echarts 折线图最后一个点放大

最近有接到一个需求， 折线图 其中一条线的最后一个点高亮， 并且有label展示 如下图所示：

分析： 由于原先 折线图是自适应的， 在数据量过大的时候， 有时候最后一个点是展示不出来的， 所以对这个点 写的样式 和 label都 不展示， 只有hover状态下才会显示效果， 所以我们要做的就是 自己控制展示的点

1、 控制展示的点： 通过修改间隔， 保证折线图只展示固定点数（最后一个点必须展示） `
const count = xAxisData.length; const defaultInterval = parseInt(((count - 1) / 24).toString()); let differNum = count - defaultInterval * 24 - 1 ; let preIndex = 0

const intervalFormat = (index) => {
    // 小于等于25个点全部展示
    if (count <= 24) {
        return true
    }

    if (index === count - 1) {
        // 遍历完数据重置（防止数据被刷掉）
        differNum = count - defaultInterval * 24 - 1;
        preIndex = 0
        return true
    }
    if (index === 0) {
        return true
    }

    // 间隔数
    let currentInterval = differNum > 0 ? defaultInterval : defaultInterval - 1
    if (preIndex + 1 + currentInterval ===  index ) {
        differNum = differNum > 0 ? differNum - 1 : 0
        preIndex = index;
        return true
    }

        return false
}
// 配置 axisLabel.interval 和  axisTick.interval 的间隔
opt.xAxis[0].axisLabel.interval = intervalFormat
opt.xAxis[0].axisTick.interval = intervalFormat;
return opt

`

2、 配置symbol： 直接配置最后一个点的样式 ， 注意label的position 设置为left 在设置偏移， 可以避免文字超长被挡住的情况

`

return {
    symbol:'circle',
    symbolSize: (value,ind) => {
      // 最后一个数据 突出展示
      if (item.length - 1 == ind.dataIndex && ind.seriesName === legendData[0]) {
          return 8;
      } else {
        return 4
      }
    },
    label: {
      show: true,
      position: 'left',
      offset: [10, -10],
      formatter: (params) => (item.length - 1 == params.dataIndex && params.seriesName === legendData[0]) ? formatNum(params.value) : ''
    },
}

`

主要配置的属性为 interval 和 symbol , 具体在哪配置看项目代码