本文主要是介绍Echarts实现并列柱状图+折线图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
Echarts实现并列柱状图+折线图,以便后续使用时复制
//並列Bar圖+折線圖
option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#283b56'}}},legend: {data:['不良率','队列','队列2']},toolbox: {show: true,feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},dataZoom: {show: false,start: 0,end: 100},xAxis: [{type: 'category',boundaryGap: true,data: (function (){var now = new Date();var res = [];var len = 10;while (len--) {res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));now = new Date(now - 2000);}return res;})()}],yAxis: [{type: 'value',scale: true,name: '不良率',min: 0,boundaryGap: [0.2, 0.2],axisLabel: {formatter: function (value) {return value.toFixed(2)+'%';}}},{type: 'value',scale: true,name: '预购量',min: 0,boundaryGap: [0.2, 0.2],splitLine:{show:false}}],series: [{name:'队列',type:'bar',yAxisIndex: 1,data:(function (){var res = [];var len = 10;while (len--) {res.push(Math.round(Math.random() * 1000));}return res;})(),barGap:'0%'},{name:'队列2',type:'bar',yAxisIndex: 1,data:(function (){var res = [];var len = 10;while (len--) {res.push(Math.round(Math.random() * 1000));}return res;})()},{name:'不良率',type:'line',data:(function (){var res = [];var len = 0;while (len < 10) {res.push((Math.random()*10 + 5).toFixed(1) - 0);len++;}return res;})(),label:{show:true,formatter: '{c}%' }}]
};app.count = 11;
setInterval(function (){axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');var data0 = option.series[0].data;var data1 = option.series[1].data;var data2 = option.series[2].data;data0.shift();data0.push(Math.round(Math.random() * 1000));data1.shift();data1.push(Math.round(Math.random() * 1000));data2.shift();data2.push((Math.random() * 10 + 5).toFixed(1) - 0);option.xAxis[0].data.shift();option.xAxis[0].data.push(axisData);myChart.setOption(option);
}, 2000);
这篇关于Echarts实现并列柱状图+折线图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!