Echarts折线图的末尾部分线条虚线

原理：等于画了两条线，一条实线一条虚线；把实线的最后的值给虚线；再将提示框进行过滤，防止多个点以及值为空的情况

初步实现参考：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
     trigger: 'axis',
     axisPointer: {
      type: 'cross'
    }
  },
  series: [
    {
      data: [150, 230, 224, 124, 218, 135],
      type: 'line'
    },
    {
      data: ['-', '-', '-', '-', '-', 135, 260],
      type: 'line',
      lineStyle: {
        type: 'dotted',//'dotted'虚线 'solid'实线
        color: "#F02FC2"
      }
    }
  ]
};

最终实现：

options = {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var htmlStr = '';
            var valMap = {};
            for (var i = 0; i < params.length; i++) {
              var param = params[i];
              var xName = param.name;//x轴的名称  
              var seriesName = param.seriesName;//图例名称  
              var value = param.value;//y轴值  
              var color = param.color;//图例颜色  

              //过滤无效值
              if (value == '-') {
                continue;
              }

              //过滤重叠值
              if (valMap[seriesName] == value) {
                continue;
              }

              if (i === 0) {
                htmlStr += xName + '<br/>';//x轴的名称  
              }
              htmlStr += '<div>';
              //为了保证和原来的效果一样，这里自己实现了一个点的效果  
              htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';

              //圆点后面显示的文本  
              htmlStr += seriesName + '：' + value;

              htmlStr += '</div>';
              valMap[seriesName] = value;
            }
            return htmlStr;
          },
          axisPointer: {
            type: 'cross',
            label: {
              show: true,
              backgroundColor: "#7B7DDC"
            }
          }
        },
        legend: {
          x: 'center',
          y: '6%',
          // itemWidth: 18, // 图例标记的图形宽度。[ default: 25 ]
          textStyle: {
            color: '#bcf',
            fontSize: 10,
          },
          // icon: 'circle',
          data: ['上游流速', '下游流速', '平均流速']
        },
        grid: {
          right: '5%',
          bottom: '10%',
          left: '2%',
          top: '18%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ["2021", "2022", "2023", "2024", "2025", "2026"],
            name: '时间',
            nameTextStyle: {
              color: '#d4ffff'
            },
            axisLine: {
              lineStyle: {
                color: '#0B4CA9'
              }
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#FFF",
                fontSize: 12,
              },
            },
          }],
        yAxis: [{
          type: 'value',
          name: '次数',
          nameTextStyle: {
            color: '#d4ffff'
          },
          position: 'left',
          axisLine: {
            lineStyle: {
              color: '#0B4CA9'
            }
          },
          splitLine: {
            lineStyle: {
              color: "#0B4CA9",
            }

          },
          axisLabel: {
            color: '#d4ffff',
            fontSize: 12,
          }
        },],
        series: [
          {
            name: '上游流速',
            type: 'line',
            smooth: true,
            yAxisIndex: 0,
            symbol: "circle",
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#2EF7F3",
              }
            },
            data: [12, 12, 26, 22, 24, 15]
          },
          {
            name: '下游流速',
            type: 'line',
            smooth: true,
            yAxisIndex: 0,
            symbol: "circle",
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#5EBEFC",
              }
            },
            data: [13, 7, 10, 18, 17, 28]
          },
          {
            name: '平均流速',
            type: 'line',
            smooth: true,
            yAxisIndex: 0,
            symbol: "circle",
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: "#9BBEFC",
                lineStyle: {
                  width: 2,
                  // type: 'dotted'  //'dotted'虚线 'solid'实线
                }
              }
            },
            // data: [20, 21, 16, 22, 21, 31]
            data: [20, 21, 16, 22]
          },
          // 平均流速- 末尾虚线
          {
            name: "平均流速",
            type: "line",
            smooth: true,
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#F02FC2",
                // 最后一个点的边框颜色
                borderWidth: 2,
                lineStyle: {
                  width: 2,
                  type: 'dotted',
                  color: "yellow"//'dotted'虚线 'solid'实线
                }
              }
            },
            data: ["-", "-", "-", 22, 31, 12]
          },
        ]
      }