Need a plugin on/off

or you can use apache echarts grafana plugin

const onOffStatus = data.series[0].fields[0].values.buffer[0]

let dasImage = onOffStatus === 'True' ?
  'data:image/svg+xml;base64,YOUR_BASE64_SVG_TOKEN_FOR_OPEN' :
  'data:image/svg+xml;base64,YOUR_BASE64_SVG_TOKEN_FOR_CLOSED'
return {
  xAxis: { show: false },
  yAxis: { show: false },
  series: [
    {
      type: 'image',
      startAngle: 200,
      endAngle: -20,
      center: ['50%', '70%'],
      axisLine: {
        lineStyle: {
          width: 8,
          color: [
            [0.3, 'red'],
            [0.7, 'orange'],
            [1, '#96BE0F']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        distance: -15,
        length: 5,
        lineStyle: {
          color: '#fff',
          width: 1
        }
      },
      splitLine: {
        distance: -15,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      axisLabel: {
        color: 'auto',
        distance: -20,
        fontSize: 12
      },
      detail: {
        valueAnimation: true,
        formatter: '{value} %',
        color: 'auto'
      },
      data: [50]
    }
  ],
  graphic: {
    type: 'image',
    left: 'center',
    bottom: 350,
    offsetCenter: [0, '-60%'],
    style: {
      image: dasImage,
      width: 480
    }
  }
};
1 Like