ajax和echarts实现动态图表
第一步：实体类必须添加序列化特性[Serializable]
第二步：在后台类中添加静态方法，方法上添加[WebMethod],返回数据时进行对象转json ----JsonConvert.SerializeObject(list)
第三步：在页面引入jQuery和Echarts框架、插件
第四步：调用jquery的ajax方法，传入对应参数（url：“地址”,type：“post”,contentType：“application/json”，success：回调方法）
第五步：解析数据，转换成Json对象或数组：JSON.parse();
第六步：绑定图表数据
<script type="text/javascript">
$.ajax({
url: "Index.aspx/GetData",
contentType: "application/json",
type: "post",
success: function (resp) {
console.log(resp);
//json字符串转对象
var list = JSON.parse(resp.d);
console.log(list.length);
$.each(list, function (index, item) {
console.log(index)
console.log(item.uid);
console.log(item.uname);
console.log(item.upwd);
console.log(item.datenow);
});
}
})
</script>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="_4_Market.Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-3.3.1.min.js"></script>
<%--图表插件--%>
<script src="js/echarts.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="main" style="width: 900px;height:600px;"></div>
<script>
var list, xlist = new Array(), ylist = new Array();
//需要大家实现步骤
$.ajax({})
function initdata() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(main));
// 指定图表的配置项和数据
var option = {
title: {
text: 食品面类统计
},
tooltip: {},
legend: {
data: [库存]
},
xAxis: {
data: xlist
},
yAxis: {},
series: [{
name: 库存,
//柱状图bar 饼图pie 折线图line
type: pie,
data: ylist
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
</form>
</body>
</html>
上一篇：
通过多线程提高代码的执行效率例子