用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制
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}%' } }, { name:'预期', type:'line', areaStyle:{ }, 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; var data3 = option.series[3].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); data3.shift(); data3.push((Math.random() * 10 + 5).toFixed(1) - 0); option.xAxis[0].data.shift(); option.xAxis[0].data.push(axisData); myChart.setOption(option); }, 2000);