序言
最近一直在趕項目，遇到過很多問題，也找到了一些解決的方法，現在准備靜下心來整理一下這段時間的成果，完善代碼，把遇到的問題和解決方法記下來，備忘。
前幾天做統計頁面的時候，需求為對在線/離線人員統計，對不同類別統計，需要顯示統計信息並能單擊某一類別觸發事件。
用到的插件當然是強大的echarts了。這里為官方文檔案例，最全面的還是官方文檔啦。
html
<!-- 統計表 --> <div class="chart" id="leaderchart"></div>
初始化
1 //統計 2 //下面代碼中的this和that都是我本地工程里面用的，可以自己定義變量var mychart來代替this.mychart
3 this.mychart = echarts.init(document.getElementById('leaderchart'), "shine");//初始化並綁定html頁面中的div顯示統計圖形，第二個參數為主題
柱狀圖
效果：
代碼：
1 var option = { 2 title: { 3 subtext: '人員總數：' + result.totalUser //標題顯示總數 4 }, 5 tooltip: {//設置提示 6 trigger: 'item', 7 formatter: "{b}:{c}", //提示文本為x軸字段：值 8 textStyle: { //提示文本的樣式 9 color: '#fff', 10 fontsize: 12 11 } 12 }, 13 xAxis: [ //設置x軸顯示字段 14 { 15 type: "category", 16 data: ['在線人員', '離線人員'] 17 } 18 ], 19 yAxis: [ //設置y軸顯示字段 20 { 21 type: "value", 22 } 23 ], 24 series: [{ 25 type: 'bar',//統計圖類型 26 barWidth: 30,//柱狀的寬 27 itemStyle: { 28 normal: { //默認顯示樣式 29 color: function (params) { //按照順序循環顯示顏色 30 var colorList = ['rgb(230,182,0)', 'rgb(43,130,29)']; 31 return colorList[params.dataIndex]; 32 }, 33 label: { //柱狀上部顯示value值 34 show: true, 35 position: 'top', 36 formatter: function (params) { 37 return params.value; 38 } 39 } 40 }, 41 emphasis: { //鼠標移入樣式 42 shadowBlur: 10, 43 shadowOffsetX: 0, 44 shadowColor: 'rgba(0,0,0,0.4)' 45 } 46 }, 47 data: [result.total, Outline],//綁定'在線人員', '離線人員'數據，即y軸的值 48 // markPoint: {//設置標記點，這里沒用到就不顯示了。 49 // data: [ 50 // { name: '在線', xAxis: '在線人員', yAxis: result.total }, 51 // { name: '在線', xAxis: '離線人員', yAxis: Outline } 52 // ] 53 // } 54 }] 55 }; 56 this.mychart.setOption(option);//將配置應用到統計圖形中
formatter在官網上的定義
餅狀圖
效果：
代碼：
1 var option = { 2 tooltip: { //提示信息 3 trigger: 'item', 4 formatter: function (params) { //設置提示信息的內容 5 return '<p>占比：' + + params.percent + '%</p><p>面積：' + params.data.value + '</p><p>項目數量：' + params.data.count; 6 }, 7 textStyle: { //設置提示信息的樣式 8 color: '#fff', 9 fontsize: 12 10 } 11 }, 12 legend: { //圖例 13 orient: 'vertical', 14 x: 'left', 15 itemWidth: 10, // 圖例圖形寬度 16 itemHeight: 8, // 圖例圖形高度 17 data: infos //綁定要顯示的統計數據，為數組 18 }, 19 series: [{ 20 type: 'pie',//設置統計圖的類型 21 radius: "55%",//設置餅狀圖的大小 22 center: ['60%', '50%'],//設置餅狀圖的位置 23 data: infos //綁定要顯示的統計數據，為數組 24 }] 25 }; 26 this.mychart.setOption(option); //將配置應用到統計圖形中
統計的數據
1 //將要傳入的參數都定義到里面，name和value為統計的主要參數，其他用作點擊事件需要傳入的參數，根據自己需要添加。 2 var infos = []; 3 var item = { 4 name: mc,//雲城區 5 value: pros[i].sum_acreage,//面積值 6 count: pros[i].pro_count,//數量 7 dm: dm, 8 section: pros[i].pro_section || pros[i].pro_use_type, 9 type: statisticType 10 }; 11 infos.push(item);
注冊點擊事件
3 this.mychart.on('click', function (params) {//為統計圖形添加點擊事件 4 if (params.seriesType == "pie") {//當統計圖為餅狀圖的時候 5 var name = params.name; 6 var data = params.data; 7 that.getProInfo(data.type, data.section, data.dm);//調用的方法函數 8 } 9 else if (params.seriesType == "bar") { 10 var name = params.name;//雲城區 11 // var date = $("#dateperson").val(); 12 switch (name) { 13 case "在線人員": 14 that.getPersonLeader(1);//調用的方法函數 15 break; 16 case "離線人員": 17 that.getPersonLeader(0);//調用的方法函數 18 break; 19 case "有日志": 20 that.getProfileInfo(1);//調用的方法函數 21 break; 22 case "無日志": 23 that.getProfileInfo(0);//調用的方法函數 24 break; 25 } 26 } 27 });
官網上params的定義
實現整個統計圖功能使用的代碼和知識點差不多就為以上所述，官網上有很多詳細的解釋，可以多研究參考。