Vue项目中使用echarts实现折线图中的标注线

        本文主要是讲在Vue项目中使用echarts实现折线图中带有标注线,如下图所示,先看下最终效果图;

 这里说两个地方:1.x周横坐标如何间隔显示,以及如何显示开始和结束(因为按照间隔设置的话,可能最后显示的不是我们想要显示的日期,所以这里顺便讲一下);2.就是标注线如何设置

老规矩,先上代码

 xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xDayList,
          axisLine: {
            // 坐标轴线
            show: false,
          },
          axisTick: {
            // 刻度线
            show: false,
          },
          axisLabel: {
            // 显示最小值
            showMinLabel: true,
            // 显示最大值
            showMaxLabel: true,
            // 间隔
            interval: 6,
            textStyle: {
              fontSize: "10",
              fontFamily: "PingFangSC-Regular, PingFang SC",
              fontWeight: "400",
              color: "rgba(0, 0, 0, 0.45)",
            },
          },
        },

从代码可以看到,x轴轴线,刻度线是否显示;x轴上数据最大值和最小值是否显示,以及间隔设置

再看y轴,这里主要说下如何把单位带上去,利用formatter;分割线就是上图中与x轴水平的线的样式设置splitLine

yAxis: {
          type: "value",
          axisLine: {},
          axisTick: {
            // 刻度线
            show: false,
          },
          axisLine: {
            // 轴线
            show: false,
          },
          axisLabel: {
            formatter: "{value}" + `${this.yUnit}`,
            textStyle: {
              fontSize: "11",
              fontFamily: "PingFangSC-Regular, PingFang SC",
              fontWeight: "400",
              color: "rgba(0, 0, 0, 0.45)",
            },
          },
          // 分割线
          splitLine: {
            lineStyle: {
              color: ["rgba(0,0,0,0.06)"],
              width: 1,
              type: "solid",
            },
          },
        },

ok,接下来看如何设置标注线,主要使用了markLine

{
            //symbol: "none", 去掉小圆点
            name: `${this.lineName}`,
            showSymbol: this.curveList.length == 1 ? true : false,
            data: this.curveList,
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                color: `${this.lineColor}`, // 折线线条颜色:红色
              },
            },
            itemStyle: {
              color: `${this.lineColor}`,
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: `${this.areaStartColor}`,
                },
                {
                  offset: 1,
                  color: `${this.areaEndColor}`,
                },
              ]),
            },
            markLine: {
              symbol: "none", //去掉箭头
              itemStyle: {
                normal: {
                  lineStyle: {
                    // color: "red", 这是公共的,单独的话,需要单独设置
                  },
                  label: {
                    formatter: "",
                  },
                },
              },
              data: this.markLineDataList,
            },
          },

这里我们看data属性对应的值,是一个数组,里面就是想要展示的标注线的对象,如下图

{
         
          yAxis: y轴的坐标,
          lineStyle: {
            // 标记线颜色
            color: aqi.stand,
          },
}

基本上就可以实现上面的效果了;(当然yAxis也可以换成xAxis,这样就会显示竖直的线)

补充一下,这里的标注线,只有一个值,有时候我们可能需要的是一个开始和一个结束的两个不同的值;

[
          {
            xAxis: 0,
            yAxis: comfortLevel,
          },
          {
            label: {
              position: "end",
              formatter: " ",
            },
            xAxis: 30,
            yAxis: comfortLevel,
            name: "终点",
            lineStyle: {
              // 标记线颜色
              color: hcho.comfort,
            },
          },
]

此时不再是一个对象,而是使用一个数组,每一个数组里面包含了起点和终点坐标;

例如红框里面的那个标注线;

如有错误之处,欢迎指正,谢谢