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>