title: line color change based on logic in apache echarts
body: <p><strong>Due to the company policy I can't share any kind of code</strong> 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. <a href="https://i.stack.imgur.com/f3uxT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f3uxT.png" alt="requirement Image" /></a></p>
  <p>EDIT 1 The closest I came is this</p>
  <pre><code>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],
          }
      ]
  };
  </code></pre>
  <p>which renders
  <a href="https://i.stack.imgur.com/9QmGu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9QmGu.png" alt="this" /></a></p>
  <p>how can I use logic to calculate the visualmap points based on event.</p>