ajax+json實現echarts多個統計圖顯示
- 2019 年 10 月 5 日
- 筆記
前端時常會遇到這樣的問題，有一個單獨的模組用作統計圖，將多個折線或者柱狀圖，混合使用，下面的例子是用ajax+json模擬了調用介面實現echarts多個統計圖顯示。 樣式布局暫時就不放在上面了，以下是從項目裡面複製過來的一個小的demo，程式碼僅供參考。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <!-- 引入 echarts.js --> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script> </head> <body> <div class="page-container"> <!-- 統計圖模組 --> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-2 col-sm-2 col-xs-2" style="width: 21%"> <div class="charts2"> <div id="main1" style="width: 300px;height: 180px;"></div> </div> </div> <div class="col-md-5 col-sm-5 col-xs-5" style="width: 39%;"> <div class="charts4"> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 500px; height: 200px;"></div> </div> <div class="charts5"> <div id="main2" style="width: 500px; height: 200px;"></div> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12 charts6"> <div id="main3" style="width: 500px;height: 200px;"></div> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12 bottom"> <div class="col-md-7 col-sm-7 col-xs-7 charts7"> <div id="main4" style=" height: 200px;"></div> </div> <div class="col-md-5 col-sm-5 col-xs-5 charts8"> <div id="main5" style="width: 600px; height: 200px;"></div> </div> </div> </div> </div> <script type="text/javascript"> $.ajax({ url: "test.json", data: {}, type: 'GET', success: function(data) { alert(JSON.stringify(data)) aFun(data.echatX, data.echatY); bFun(data); cFun(data.echatX, data.echatY); dFun(data.echatX, data.echatY); eFun(data.echatX, data.echatY); fFun(data.echatX, data.echatY); }, }); // var aChart = echarts.init(document.getElementById('main')); function aFun(x_data, y_data) { // 指定圖表的配置項和數據 aChart.setOption({ title: {}, tooltip: {}, legend: { data: ['銷量'] }, xAxis: { splitLine: { show: false }, /* 改變x軸顏色 */ axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 這裡是為了突出顯示加上的 } }, data: x_data, }, yAxis: { splitLine: { show: false }, type: 'value', scale: true, name: '心率值', max: 150, min: 0, splitNumber: 5, // 改變y軸顏色 axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 這裡是為了突出顯示加上的 } }, }, series: [{ name: '巡檢達標率', type: 'bar', // 設置柱狀圖大小 barWidth: 20, // 設置柱狀圖漸變顏色 itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#1268f3" // 0% 處的顏色 }, { offset: 0.6, color: "#08a4fa" // 60% 處的顏色 }, { offset: 1, color: "#01ccfe" // 100% 處的顏色 }], false) } }, data: y_data, }] }); } // var bChart = echarts.init(document.getElementById('main1')); function bFun(param) { // 指定圖表的配置項和數據 bChart.setOption({ tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, series: [{ name: '統計人數', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { rich: { a: { color: '#999', lineHeight: 22, align: 'center' }, b: { fontSize: 16, lineHeight: 33 }, } } }, data: [ /* { value: 12, name: '管理', itemStyle: { color: '#5f4b9c' } }, { value: 3, name: '鍊鋼工', itemStyle: { color: '#2e73ba' } }, { value: 4, name: '操作工', itemStyle: { color: '#7aa83a' } },*/ { value: param.peopleOutline, name: '在線', itemStyle: { color: '#005eff' } }, { value: param.peopleOnline, name: '離線', itemStyle: { color: '#ff9194' } }, ] }] }); } // 基於準備好的dom，初始化echarts實例 var cChart = echarts.init(document.getElementById('main2')); function cFun(x_data, y_data) { // 指定圖表的配置項和數據 cChart.setOption({ title: { }, tooltip: { trigger: 'axis' }, legend: { data: ['近七日收益'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { splitLine: { show: false }, // 改變x軸顏色 axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 這裡是為了突出顯示加上的 } }, type: 'category', boundaryGap: false, data: x_data, }, yAxis: { splitLine: { show: false }, type: 'value', scale: true, name: '心率值', max: 150, min: 0, splitNumber: 5, // 改變y軸顏色 axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 這裡是為了突出顯示加上的 } }, }, series: [ { name: '', type: 'line', symbol: 'circle', // 折線點設置為實心點 symbolSize: 6, // 折線點的大小 itemStyle: { normal: { color: "#1bdaf8", // 折線點的顏色 lineStyle: { color: "#0d427e" // 折線的顏色 } } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#0e4b7a" // 0% 處的顏色 }, { offset: 0.6, color: "#0d3f70" // 60% 處的顏色 }, { offset: 1, color: "#0c3367" // 100% 處的顏色 }], false) } }, stack: '總量', data: y_data } ] }); } // 基於準備好的dom，初始化echarts實例 var dChart = echarts.init(document.getElementById('main3')); // 指定圖表的配置項和數據 function dFun(x_data, y_data) { dChart.setOption({ title: { left: 'left', text: '概率', show: false }, tooltip: { trigger: 'axis', formatter: '{a}:{c}', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, grid: { show: false, top: '30', bottom: '60', right: '60', left: '60' }, legend: { show: true, selectedMode: 'single', // 設置顯示單一圖例的圖形，點擊可切換 bottom: 10, left: 50, textStyle: { color: '#666', fontSize: 12 }, itemGap: 20, data: ['設備一', '設備二', '設備三'], inactiveColor: '#ccc' }, xAxis: { splitLine: { show: false }, type: 'category', data: x_data, axisPointer: { type: 'shadow' }, // 改變x軸顏色 axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 這裡是為了突出顯示加上的 } }, axisTick: { show: true, interval: 0 }, }, // 設置兩個y軸，左邊顯示數量，右邊顯示概率 yAxis: [{ splitLine: { show: false }, type: 'value', name: '數量', max: 1000, min: 0, show: true, interval: 500, // 改變y軸顏色 axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 這裡是為了突出顯示加上的 } }, }, // 右邊顯示概率 { splitLine: { show: false }, type: 'value', name: '概率', min: 0, max: 100, interval: 10, // 改變y軸顏色 axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 這裡是為了突出顯示加上的 } }, axisLabel: { formatter: '{value} %' } } ], // 每個設備分數量、概率2個指標，只要讓他們的name一致，即可通過，legeng進行統一的切換 series: [{ name: '設備一', type: 'bar', symbol: 'circle', // 折線點設置為實心點 symbolSize: 6, // 折線點的大小 itemStyle: { normal: { color: "#1bdaf8", // 折線點的顏色 lineStyle: { color: "#0d427e" // 折線的顏色 } } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#0e4b7a" // 0% 處的顏色 }, { offset: 0.6, color: "#0d3f70" // 60% 處的顏色 }, { offset: 1, color: "#0c3367" // 100% 處的顏色 }], false) } }, data: y_data, barWidth: '50%', }, { name: '設備一', type: 'line', symbol: 'circle', // 折線點設置為實心點 symbolSize: 6, // 折線點的大小 itemStyle: { normal: { color: "#1bdaf8", // 折線點的顏色 lineStyle: { color: "#0d427e" // 折線的顏色 } } }, yAxisIndex: 1, // 這裡要設置哪個y軸，默認是最左邊的是0，然後1，2順序來。 data: y_data, symbolSize: 10, itemStyle: { normal: { color: "#DDA0DD" } } }, ] }); } // 基於準備好的dom，初始化echarts實例 var eChart = echarts.init(document.getElementById('main4')); // 指定圖表的配置項和數據 function eFun(x_data, y_data) { eChart.setOption({ title: { text: '' }, tooltip: { trigger: 'axis' }, legend: { data: ['近七日收益'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { splitLine: { show: false }, // 改變x軸顏色 axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 這裡是為了突出顯示加上的 } }, type: 'category', boundaryGap: false, data: x_data, }, yAxis: { splitLine: { show: false }, type: 'value', scale: true, name: '心率值', max: 150, min: 0, splitNumber: 10, // 改變y軸顏色 axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 這裡是為了突出顯示加上的 } }, }, series: [ { name: '近七日收益', type: 'line', symbol: 'circle', // 折線點設置為實心點 symbolSize: 6, // 折線點的大小 itemStyle: { normal: { color: "#1bdaf8", // 折線點的顏色 lineStyle: { color: "#0d427e" // 折線的顏色 } } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#0e4b7a" // 0% 處的顏色 }, { offset: 0.6, color: "#0d3f70" // 60% 處的顏色 }, { offset: 1, color: "#0c3367" // 100% 處的顏色 }], false) } }, stack: '總量', data: y_data, } ] }); } var fChart = echarts.init(document.getElementById('main5')); // 指定圖表的配置項和數據 function fFun(x_data, y_data) { fChart.setOption({ title: { }, tooltip: {}, legend: { data: ['銷量'] }, xAxis: { splitLine: { show: false }, // 改變x軸顏色 axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 這裡是為了突出顯示加上的 } }, data: x_data, }, yAxis: { splitLine: { show: false }, type: 'value', scale: true, name: '心率值', max: 150, min: 0, splitNumber: 10, // 改變y軸顏色 axisLine: { lineStyle: { color: '#00a2e2', width: 1, // 這裡是為了突出顯示加上的 } }, }, series: [{ name: '巡檢達標率', type: 'bar', // 設置柱狀圖大小 barWidth: 20, // 設置柱狀圖漸變顏色 itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#e12251" // 0% 處的顏色 }, { offset: 0.6, color: "#df635a" // 60% 處的顏色 }, { offset: 1, color: "#e79363" // 100% 處的顏色 }], false) } }, data: y_data, }] }); } </script> </body> </html>
test.json
{ "echatX": [ "2019-07-02", "2019-07-03", "2019-07-04", "2019-07-05", "2019-07-06", "2019-07-07", "2019-07-08", "2019-07-09", "2019-07-10", "2019-07-11", "2019-07-12", "2019-07-13", "2019-07-14", "2019-07-15" ], "echatY": [ 501,210,123,333,445,157,151,369,101,101,350,435,153,100 ], "echatY2": [ 80,40,13,36,57,77,41,39,61,31,60,73,33,50 ], "peopleTotal":15,"peopleOnline":4,"peopleOutline":12,"ranges":[] }
