apache echarts中根據邏輯改變線條顏色

Question

由於公司政策，我不能分享任何類型的代碼，但我一直在努力使用 apche echarts。 要求是我有一條線，其顏色應該根據邏輯在某些點改變。 我嘗試使用 linestyle 實現並使用 dimension 進行分段。 我非常接近 visualmap，但是當平行線或相鄰線開始受到影響並導致圖表上出現錯誤的顏色變化時，問題仍然存在。 這是圖表上的線應該是紅色的要求，除非我們遇到一個點，在該點上顏色可以更改為綠色並在事件完成時變回紅色。 請參考圖片，我願意接受任何和所有建議。 我更喜歡沙箱作為答案鏈接，這樣我就可以測試它是否符合要求。

編輯 1 我最接近的是這個

option = {
    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,
        pieces: [{
            lte: 6,
            color: 'green'
        }, {
            gt: 6,
            lte: 8,
            color: 'red'
        }, {
            gt: 8,
            lte: 14,
            color: 'green'
        }, {
            gt: 14,
            lte: 17,
            color: 'red'
        }, {
            gt: 17,
            color: 'green'
        }]
    },
    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],
        }
    ]
};

呈現

我如何使用邏輯來計算基於事件的視覺地圖點。

Answer 1

您可以使用將數據映射到視覺通道的visualMap組件來做到這一點。

就像在您的示例中一樣，在 Line 系列圖表中，您有：

visualMap: {
 show: false,
 dimension: 0,
 pieces: [
  {
    lte: 6,
    color: 'green'
  },
  {
    gt: 6,
    lte: 8,
    color: 'red'
  },
  {
    gt: 8,
    lte: 14,
    color: 'green'
  },
  {
    gt: 14,
    lte: 17,
    color: 'red'
  },
  {
    gt: 17,
    color: 'green'
      }
   ]
 },

折線圖的數據是一個包含 20 個值的數組，因此上面的意思是：為前 6 個值繪制綠色線，為 6 到 8 之間的值繪制紅色，然后為第 14 個值繪制綠色，然后為第 14 到 17 個值繪制紅色，然后然后綠色表示其上的值。

請參閱此處的示例。