echarts折线图每段显示不同的颜色

最新推荐文章于 2024-06-28 10:57:23 发布

云隙阳光i

最新推荐文章于 2024-06-28 10:57:23 发布

阅读量1k

点赞数 3

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/preoccupied_/article/details/132800319

版权

效果图

在这里插入图片描述

配置项：

zqChartFour: {
    title: {
      text: "一天用电量分布",
      subtext: "纯属虚构",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "00:00",
        "01:15",
        "02:30",
        "03:45",
        "05:00",
        "06:15",
        "07:30",
        "08:45",
        "10:00",
        "11:15",
        "12:30",
        "13:45",
        "15:00",
        "16:15",
        "17:30",
        "18:45",
        "20:00",
        "21:15",
        "22:30",
        "23:45",
      ],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} W",
      },
      axisPointer: {
        snap: true,
      },
    },
    visualMap: [
      {
        show: false,
        dimension: 0,
        seriesIndex: 0, //第一部分数据
        pieces: [
          {
            lte: 6,
            color: "orange",
          },
          {
            gt: 6,
            lte: 8,
            color: "red",
          },
          {
            gt: 8,
            lte: 14,
            color: "purple",
          },
          {
            gt: 14,
            lte: 17,
            color: "Chocolate",
          },
          {
            gt: 17,
            color: "pink",
          },
        ],
      },
      {
        show: false,
        dimension: 0,
        seriesIndex: 1, //第二部分数据
        pieces: [
          {
            lte: 3,
            color: "blue",
          },
          {
            gt: 3,
            lte: 8,
            color: "black",
          },
          {
            gt: 8,
            lte: 14,
            color: "green",
          },
          {
            gt: 14,
            lte: 17,
            color: "grey",
          },
          {
            gt: 17,
            color: "DodgerBlue",
          },
        ],
      },
    ],
    series: [
      {
        name: "用电量",
        type: "line",
        smooth: true,
        data: [
          300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400,
          500, 600, 750, 800, 700, 600, 400,
        ],
      },

      {
        name: "费用",
        type: "line",
        smooth: true,
        data: [
          200, 180, 150, 160, 170, 200, 450, 400, 300, 290, 280, 290, 300,
          400, 400, 650, 700, 600, 450, 300,
        ],
      },
    ],
  },