echarts折线统计图实现虚实结合

?橙橙

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


阅读 119
1 声望
2 粉丝
0 条评论
你知道吗?

1 声望
2 粉丝
宣传栏