title: { text: '健康人数统计', // subtext:'', x: 'center', y: '7px', textStyle: { color: '#3A7BD5', fontSize: 16 }, textAlign: 'left' },
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" class="col-md-12 col-sm-12 col-xs-12" style="height: 400px;"></div> <script> // 叠堆折线图数据请求 $.ajax({ url: "data.json", data: {}, type: 'GET', success: function(data) { aFun(data.echatX, data.echatY, data.echatY2); }, }); // 基于准备好的dom，初始化echarts实例 var aChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 function aFun(x_data, y_data, y2_data) { aChart.setOption({ title: { text: '健康人数统计', // subtext:'', x: 'center', y: '7px', textStyle: { color: '#3A7BD5', fontSize: 16 }, textAlign: 'left' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { x: '450px', y: 'right', textStyle: { //图例文字的样式 color: '#fff', fontSize: 16 }, data: ['正常', '异常'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, 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', itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#1362f2" // 0% 处的颜色 }, { offset: 0.6, color: "#3278f8" // 60% 处的颜色 }, { offset: 1, color: "#5490ff" // 100% 处的颜色 }], false) } }, data: y_data }, { name: '异常', type: 'bar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#e67726" // 0% 处的颜色 }, { offset: 0.6, color: "#f48c47" // 60% 处的颜色 }, { offset: 1, color: "#fe9d62" // 100% 处的颜色 }], false) } }, data: y2_data } ] }); } </script> </body> </html>
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-15" ], "echatY": [ 120,121,123,123,125,127,128,129,122 ], "echatY2": [ 60,64,63,63,65,67,68,69,65 ] }
