1、需要场景: 实现折线统计图,如果蕴含明天,明天用虚线示意,其余用实线
2、实现思路: 将一条线进行切割,如明天是20210909,从20210901到20210909的区间将其宰割为两段为20210901-20210908,20210908-20210909
3、具体代码实现:
//明天设为虚线的办法//data须要解决的y轴显示数据,dateData为x轴数据-日期setDottedLine(data,dateData){ //明天 let nowTime = new Date() let chooseYear = nowTime.getFullYear() let chooseMonth = nowTime.getMonth() + 1 let chooseDate = nowTime.getDate() if (chooseMonth < 10) chooseMonth = '0' + chooseMonth if (chooseDate < 10) chooseDate = '0' + chooseDate let today = `${chooseYear}-${chooseMonth}-${chooseDate}`; //昨天 let oneday = new Date(nowTime - 1 * 24 * 3600 * 1000); let chooseYearonedayago = oneday.getFullYear() let chooseMonthonedayago = oneday.getMonth() + 1 let chooseDateonedayago = oneday.getDate() if (chooseMonthonedayago < 10) chooseMonthonedayago = '0' + chooseMonthonedayago if (chooseDateonedayago < 10) chooseDateonedayago = '0' + chooseDateonedayago let yesterday = `${chooseYearonedayago}-${chooseMonthonedayago}-${chooseDateonedayago}`; if(dateData.includes(today)){ let newObj = {} let arraySolid = []; let arrayDotted = []; for(let i=0; i<dateData.length; i++){ if(dateData[i]==yesterday){ arraySolid.push(data[i]) arrayDotted.push(data[i]) }else if(dateData[i]==today){ arraySolid.push(null) arrayDotted.push(data[i]) }else{ arraySolid.push(data[i]) arrayDotted.push(null) } } this.$set(newObj,'arraySolid',arraySolid) //实线 this.$set(newObj,'arrayDotted',arrayDotted) //虚线 return newObj }else{ return data }}
//调用
let ljyhDataResult = this.setDottedLine(ljyhData,xAxisData); this.option.series = [ { name: '累计用户', data: ljyhDataResult.arraySolid?ljyhDataResult.arraySolid:ljyhDataResult, type: 'line', symbolSize: 2, smooth: 0.5, yAxisIndex: 0 }, { name: '累计用户', data: ljyhDataResult.arrayDotted?ljyhDataResult.arrayDotted:ljyhDataResult, type: 'line', symbolSize: 2, smooth: 0.5, yAxisIndex: 0, lineStyle:{ normal:{ type:'dotted' } } } ],
须要解决提示框显示的问题,采纳以上代码会呈现两次累计用户的tooltip,须要去重
// 提示框 tooltip: { trigger: 'axis', formatter:function(params){ let str = ''; let newarray = []; let contentarray = []; for(let i=0;i<params.length;i++){ newarray.push(params[i].axisValue+'<br>') if(params[i].data==undefined){ }else{ if(['激活率a','激活率b'].includes(params[i].seriesName)){ newarray.push(params[i].marker+params[i].seriesName+":"+params[i].data+"%<br>"); }else{ newarray.push(params[i].marker+params[i].seriesName+":"+params[i].data+"<br>"); } } } for(let i=0; i<newarray.length; i++){ if(contentarray.indexOf(newarray[i])==-1){ contentarray.push(newarray[i]) } } for(let i=0; i<contentarray.length;i++){ str+=contentarray[i]; } return str; } },