Hawacodes
Hawacodes

Reputation: 13

Changing a part of the progress' color in the gauge chart with the condition in Echarts

I have created a gauge chart using Echarts. The part of the progress needs to be green after a conditon in my case after 200 the part left after 200 needs to be green. For example, the value is 210 the arc between 200 - 210 needs to be green. Before 200 After 200

Here is my code:

var value = 210
option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 240,
      splitNumber: 12,
      progress: {
        show: true,
        width: 18,
        itemStyle: {
        color: value > 200 ? "#23d935": "#999"
      }
      },
      pointer: {
        icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
        length: '75%',
        width: 16,
        offsetCenter: [0, '5%'],
      },
      axisLine: {
        lineStyle: {
          width: 18
        }
      },
      axisTick: {
       show:false
      },
      splitLine: {
        show:false
      },
      axisLabel: {
        distance: 30,
        color: '#999',
        fontSize: 20
      },
      title: {
        show: false
      },
      detail: {
        rich: {
          value: {
            fontSize: 50,
            fontWeight: 'bolder',
            color: '#777'
          },
          unit: {
            fontSize: 20,
            color: '#999',
            padding: [0, 0, -20, 10]
          }
        }
      },
      data: [
        {
          value: value
        }
      ]
    },
  ]
};

I tried adding a condition to the progress color property however it affects all the progress not the part of it.

Upvotes: 1

Views: 124

Answers (0)

Related Questions