line color change based on logic in apache echarts

Question

Due to the company policy I can't share any kind of code but I have been struggling with apche echarts. The requirement is I have a line whose color should change at certain points based on logic. I tried achieving using linestyle and piecewise using dimension. I came pretty close to visualmap but the issue persisted when The parallel or adjacent lines started to get affected and caused wrong color changes on the graph. Here is the requirement the line on the chart is supposed to be red unless we come across a point where the color could be changed to green and back to red when the event is done. please refer to the image and I am open to any and all suggestions. I would prefer a sandbox as an answer link so i can test if that works with the requirement or not.

EDIT 1 The closest I came is this

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],
        }
    ]
};

which renders

how can I use logic to calculate the visualmap points based on event.

Answer 1

You can do that using the visualMap component which maps the data to visual channels.

Like in your example, in a Line series chart you have:

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'
      }
   ]
 },

The data for the Line chart is an array of 20 values so the above means: draw the line green for the first 6 values, draw red for values between 6 and 8, then green till 14th value, then red for 14th to 17th value and then green for the values thereon.

See the example here .