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":[] }
