快捷導(dǎo)航

echarts折線圖每段顯示不同的顏色的實現(xiàn)

更新時間：2023年09月11日 16:21:06 作者：云隙陽光i

本文主要介紹了echarts折線圖每段顯示不同的顏色的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

效果圖

配置項：

zqChartFour: {
    title: {
      text: "一天用電量分布",
      subtext: "純屬虛構(gòu)",
    },
    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, //第一部分數(shù)據(jù)
        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, //第二部分數(shù)據(jù)
        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,
        ],
      },
    ],
  },

到此這篇關(guān)于echarts折線圖每段顯示不同的顏色的實現(xiàn)的文章就介紹到這了,更多相關(guān)echarts折線圖顏色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: