echarts折线图-动态设置多y轴的页面展示

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

使用场景：监测设备具有不同且数量不固定的监测项，需要根据接口返回的监测项的实时信息，在一个echarts图表里面进行数据的展示，方便用户进行数据的观测和对不同监测项监测数据的对比。

具体展示效果：

基础配置项：
let option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
      },
      grid: {
        containLabel: true,
        left: 70,
        right: "15%",
        bottom: "12%",
        top: "15%",
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [],
        name: "时间    ",
        nameLocation: "start",
      },
      yAxis: [],
      visualMap: [],
      textStyle: {
        color: "#ffffff",
      },
      series: [],
    } 

y轴的配置项-展示多个y轴需要设置偏移量，y轴之间有相隔，如果y轴过多，grid里面的left和right的值可以设置多一点，整体左右两边偏移量增多

    * @param obj 监测项类型数据
    * @param curveConfigs 监测项阈值数据
    * @param index 下标
    // echarts的y轴配置
      const yAxisObj = {
        name: `${obj.name}(${obj.unit || ""})`,
        type: "value",
        // 坐标轴展示位置
        position: index > 0 ? "right" : "left",
        // 偏移量
        offset: index > 1 ? index * 30 : 0,
        // 坐标轴名称样式
        nameTextStyle: {
          color: colorList[index],
          padding: [0, 0, 0, -10],
        },
        axisLine: {
          show: true,
          // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
          // 需要显示在x轴两边的多y轴，默认为true，不用更改
          // onZero: false,
          lineStyle: {
         // 设置visualMap后，不能单独设置折线颜色(visualMap---可以设置超过某个值的部分标注为其他颜色)
            // color: colorList[index],
          },
        },
        axisTick: {
          show: true
        },
      };
      

折线值的配置项--存在有阈值的折线，超过对应阈值，超出的那段线，显示阈值设定的颜色

 * @param obj 监测项类型数据
     * @param curveConfigs 监测项阈值数据
     * @param index
    // 设置折线值
      const series = {
        name: `${obj.name}(${obj.unit || ""})`,
        type: "line",
        smooth: true,
        data: obj.values,
        symbol: "circle",
        lineStyle: {
          width: 2,
          // color: colorList[index],
        },
        itemStyle: {
          color: colorList[index],
        },
        // 值对应的y轴
        yAxisIndex: index
      };

      // 设置超出阈值的折线，显示对应阈值颜色
      if (curveConfigs.length) {
        visualMap = {
          // 分段式
          type: "piecewise",
          show: false,
          precision: 1,
          // 对应那一根数值线
          seriesIndex: index,
          outOfRange: {
            // 设置未超出阈值折线的颜色
            color: [colorList[index]],
          },
          pieces: curveConfigs.length
            ? [
                {
                  min: Number(curveConfigs[0]), // min需要设置数字类型的值
                  max: Number(curveConfigs[0]), // max需要设置数字类型的值
                  color: "yellow",
                },
                {
                  min: Number(curveConfigs[1]),
                  max: Number(curveConfigs[1]),
                  color: "orange",
                },
                {
                  min: Number(curveConfigs[2]),
                  max: Number(curveConfigs[2]),
                  color: "red",
                },
              ]
            : [],
        };
      }

echarts注意事项

1、如遇到echarts第一次渲染，第二次或者第三次不渲染的情况

1.1 检查页面值是否更新，lineChart.setOption(options, true);的第二个参数是否为true

1.2 检查渲染echarts的dom元素是否有被正常挂载，显示

1.3 检查渲染echarts的盒子上面的_echarts_instance_属性是否有变化，根据节点上面的"echarts_instance"属性判断这个文本节点是否未重新加载

2、Uncaught (in promise) Error: yAxis "0" not found

   y轴设置项为空所报的错误