遇到實際與預(yù)測的需求時，經(jīng)常會有趨勢圖實線與虛線結(jié)合的需求，分享一下實現(xiàn)關(guān)鍵點

首先，我們需要兩條折線，一條實線(默認就是實線)，一條虛線

其次，處理數(shù)據(jù)（L1實線數(shù)據(jù)，L3虛線數(shù)據(jù)）

?可以看見‘20’，‘55’是虛線的數(shù)據(jù)點，但是兩點才能確定一條線，所以處于中間數(shù)據(jù)的‘20’ ，需要自己補充前后的數(shù)據(jù)‘40’，‘10’；處于最后的數(shù)據(jù)‘55’，需要自己補充前面的數(shù)據(jù)‘55’，其余數(shù)據(jù)補充為空、-、null都可以。

最后，處理一下tooltip讓它只顯示一條數(shù)據(jù)，而不是兩條

?

另外，平滑的折線圖，虛實連接處因為數(shù)據(jù)問題注定不平滑。附上代碼

let xLabel = ['3.26','3.27','3.28','3.29','3.30','3.31','4.01','4.02','4.03','4.04','4.05','4.06','4.07','4.08','4.09','4.10','4.11','4.12', ]; let L1 = ['50', '30', '72', '35', '80', '60', '40', '60', '22', '85', '50', '40', '-', '10', '22', '5', '50', '-']; let L3 = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '40', '20', '10', '-', '-', '50', '55'];option = {backgroundColor: '#05071a',tooltip: {trigger: 'axis',formatter: function(params) {let res = params[0].axisValue + '</br>'if(params[0].value==='-'){res += params[1].seriesName + ' : ' + params[1].value + '天<br />'} else{res += params[0].seriesName + ' : ' + params[0].value + '天<br />'}return res}},grid: {top: '50px',left: '80px',right: '100px',bottom: '15%',// containLabel: true},xAxis: [{type: 'category',boundaryGap: false,axisLine: {//坐標(biāo)軸軸線相關(guān)設(shè)置。數(shù)學(xué)上的x軸show: true,lineStyle: {color: '#233653',},},axisLabel: {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置textStyle: {color: 'rgba(255,255,255,0.6)',padding: 5,fontSize: 12,},formatter: function (data) {return data;},},splitLine: {show: false,lineStyle: {color: '#192a44',},},axisTick: {show: false,},data: xLabel,},],yAxis: [{name: '周期(天)',nameTextStyle: {color: 'rgba(255,255,255,0.6)',fontSize: 12,padding: 5,},min: 0,splitLine: {show: true,lineStyle: {color: '#192a44',},},axisLine: {show: true,lineStyle: {color: '#233653',},},axisLabel: {show: true,textStyle: {color: 'rgba(255,255,255,0.6)',padding: 10,},},axisTick: {show: false,},},],series: [{name: '持續(xù)周期',type: 'line',showAllSymbol: true,symbolSize: 0,smooth: true,lineStyle: {type: 'dotted',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 1,color: 'rgba(246,187,154,1)',},{offset: 0,color: 'rgba(250,46,93,0.7)',},]),},data: L3,},{name: '持續(xù)周期',type: 'line',symbol: 'circle', // 默認是空心圓（中間是白色的），改成實心圓showAllSymbol: true,symbolSize: 0,smooth: true,lineStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 1,color: 'rgba(246,187,154,1)',},{offset: 0,color: 'rgba(250,46,93,0.7)',},]),},markLine: {data: [{type: 'average',name: '平均值',lineStyle: {color: '#7acaf3',},label: {normal: {formatter: '均值線 {c}',color: '#7acaf3',fontSize: '11px',},},},{type: 'average',name: '中位數(shù)',yAxis: 52,lineStyle: {color: '#7fe1bb',},label: {normal: {formatter: '中位線 {c}',color: '#7fe1bb',fontSize: '11px',},},},{type: 'average',name: '85%',yAxis: 60,lineStyle: {color: '#f3b58c',},label: {normal: {formatter: '85%位線 {c}',color: '#f3b58c',fontSize: '11px',},},},],},tooltip: {show: true,},data: L1,},], };

總結(jié)

以上是生活随笔為你收集整理的echarts 虚实结合的折线图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。