echarts使用visualMap，使折线图在某个刻度线上区分颜色,

最新推荐文章于 2024-10-29 16:30:53 发布

AspirinZero

最新推荐文章于 2024-10-29 16:30:53 发布

阅读量1.2k

点赞数 10

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/AspirinZero/article/details/140015514

版权

echarts使用visualMap，使折线图在某个刻度线上区分颜色,

visualMap：echart的视觉映射组件，

visualMap-piecewise

分段型视觉映射组件（visualMapPiecewise）

此次需求需要在0处区分线段颜色，并且有连续性，大于0，等于0，小于0 三个颜色

所以用的是数据自定义分段型——piecewise。

还有其他类型：

平均分段型——splitNumber

离散数据分段——categories

代码入下：此次需求的核心内容为pieces中的。

setLineOption(chartInstance, data, chartId) {
      
      const option = {
       yAxis: [
          {
            splitNumber: 7,
            type: "value", // Y轴类型为数值轴
            name: "差异量",
            min: "dataMin",
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
              symbol: ["none", "arrow"],
              symbolSize: [6, 10],
              symbolOffset: [0, "50%"],
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "差异量",
            yAxisIndex: 1,
            type: "line",
            smooth: true,
            data: data.map((item) => {
              return (item.dif * 1).toFixed(2);
            }),
            itemStyle: {
              normal: {
                color: "#46ee62",
              },
            },
          },
        ],
        visualMap: {
          type: "piecewise",
          show: false,
          max: Math.max(...data.map((item) => item.dif)),
          min: Math.min(...data.map((item) => item.dif)),
          pieces: [
            // 自定义分段规则
            { gt: 0, color: "red" }, // 大于0的颜色 （0,+∞)
            {value: 0, color: "gray"},//等于0 [0]
            { lt: 0, color: "#46ee62" }, // 小于的颜色(-∞,0)
            //value是定义一个数据，表示等于value值的情况。
          ],
          seriesIndex: 2, 指定对谁分段
          yAxisIndex: 1,
          piecewise: true,
          outOfRange: {
            color: "yellow",
          },
        },
        legend: {
          data: ["差异量"],
          fontSize: 14,
          top: "6%",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "20%",
          bottom: "5%",
          containLabel: true,
        },
      };
      if (chartId === "lineRef1") {
        chartInstance.setOption(option); // 应用配置项到图表实例
      }
    },