前面用到的更多的是单个统计图，有些统计图里面，使用柱状图折线图混合使用的，下面写的是用ajax+json本地模拟数据，发送请求，渲染出一个柱状图折线图混合图表。
一个练手的小demo，仅供参考：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>柱状图折线图混合使用</title> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> </head> <style> .charts6 { background: #0d1c2e; } </style> <body> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12 charts6"> <div id="main3" style="height: 200px;"></div> </div> </div> </body> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script type="text/javascript"> // 折线图 $.ajax({ url: "test.json", data: {}, type: 'GET', success: function(data) { console.log(JSON.stringify(data)) dFun(data.echatX, data.echatY, data.echatY2); }, }); // 基于准备好的dom，初始化echarts实例 var dChart = echarts.init(document.getElementById('main3')); // 指定图表的配置项和数据 function dFun(x_data, y_data, y2_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, 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, // 折线点的大小 data: y_data, barWidth: '50%', }, { //折线 name: '', type: 'line', symbol: 'circle', // 折线点设置为实心点 symbolSize: 6, // 折线点的大小 yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。 data: y2_data, symbolSize: 10, itemStyle: { normal: { color: "#DDA0DD" } } }, ] }); } </script> </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":[] }
