使用Echarts+Ajax制作动态统计图表
1.使用Echats有两个比较方便的网站
1.https://echarts.baidu.com/echarts2/doc/example.html （统计图的样式）
2.https://echarts.baidu.com/builder.html (在线js定制生成)
2.引入ECharts
直接在官网下载所需ECharts文件，或者去上面定制生成js文件然后像引入普通JavaScript库一样用script标签引入即可。代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts入门</title>
</head>
<body>
<!-- 引入ECharts文件 -->
<script src='echarts.min.js'></script>
</body>
</html>
3.制作统计图（列举一个饼图和柱图）
<!-- 查看饼状图 --> <div id="main" style="width: 600px;height:400px;"></div> <!-- 查看柱状图 --> <div id="main2" style="width: 600px;height:400px;"></div>
4.初始化,指定图表配置和使用Ajax动态绑定数据
后台写方法查询数据是返回json格式，前台使用ajax调用解析，然后填充数据到Echaets里面就可以了
//饼状图绑定数据
<script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); $.ajax({ url: "../../wxInterface/yqwxRepair.asmx/WXTJ", //后台方法路径（返回json格式） type: "POST", async: false, dataType: "json", data: "", contentType: "application/json", cache: false, timeout: 30000, success: function (json) { json = eval("(" + json.d + ")"); //对后台json解析，根据返回的格式不同自行修改 var data = json.data; if (json) {
var servicedata = []; for (var i = 0; i < data.length; i++) { var obj = new Object(); obj.name = data[i].YQMC; //循环取你想要显示的名称，对应数据库字段 obj.value = data[i].CiShu; //循环取你想要显示的值
servicedata[i] = obj; //待会要填充的数据（包含名称和值） } myChart.setOption({ title: { text: '仪器维修次数', subtext: '饼图', x: 'center' }, tooltip: { trigger: 'item', formatter: "{b} <br/>{c} : {d} %" //a 系列名称，b 数据项名称，c 数值，d 百分比 }, legend: { orient: 'vertical', x: 'left', data: data.YQMC //绑定名称 }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore: { show: true }, saveAsImage: { show: true } } }, calculable: true, series: [ { name: '点击量', type: 'pie', radius: '55%',//饼图的半径大小 center: ['50%', '60%'],//饼图的位置 data: servicedata //填充数据 } ] }) } }, error: function (errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); myChart.hideLoading(); } }); </script>
//柱状图 <script type="text/javascript"> var myChart2 = echarts.init(document.getElementById('main2')); // 显示标题，图例和空的坐标轴 myChart2.setOption({ title: { text: '仪器维修次数' }, tooltip: {}, legend: { data: ['仪器'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '仪器', type: 'bar', data: [] }] }); var names = []; //类别数组（实际用来盛放X轴坐标值） var nums = []; //销量数组（实际用来盛放Y坐标值） $.ajax({ url: "../../wxInterface/yqwxRepair.asmx/WXTJ", type: "POST", async: false, dataType: "json", data: "", contentType: "application/json", cache: false, timeout: 30000, success: function (json) { json = eval("(" + json.d + ")"); var Data = json.data; if (json) { for (var i = 0; i < Data.length; i++) { names.push(Data[i].YQMC); //挨个取出类别并填入类别数组 } for (var i = 0; i < Data.length; i++) { nums.push(Data[i].CiShu); //挨个取出销量并填入销量数组 } myChart2.setOption({ //加载数据图表 xAxis: { data: names }, series: [{ // 根据名字对应到相应的系列 name: '仪器', data: nums }] }); } }, error: function (errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); myChart2.hideLoading(); } }); </script>
