200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > Echarts实现堆叠柱状图+折线图

Echarts实现堆叠柱状图+折线图

时间:2023-03-06 06:39:15

相关推荐

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,stack:'one',data:(function (){var res = [];var len = 10;while (len--) {res.push(Math.round(Math.random() * 1000));}return res;})()},{name:'队列2',type:'bar',yAxisIndex: 1,stack:'one',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);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。