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;
}
},