echart gauge tooltip background modification

Question

I was able to use tooltip for the eChart gauge. however, I would like to have the background of the tooltip using the color of the value such as the pointer. any idea ?

thanks in advance

option = {
  
  tooltip: {
              trigger: "item", backgroundColor: 'inherit',
            },

  series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            center: ["50%", "60%"],
            radius: "100%",
            min: 0,
            max: 1,
            splitNumber: 8,
            axisLine: {
              roundCap: true,
              Gap: '100%',
              lineStyle: {
                width: 13,
                color: [
                        [0.27, '#e76262'],
                        [0.3, 'transparent'],
                        [0.52, '#f9cf4a'],
                        [0.55, 'transparent'],
                        [0.77, '#eca336'],
                        [0.8, 'transparent'],
                        [1, '#3ece80'],
                ],
              },
            },

            ...

            ],
          },
  ]
};

I need to have my tooltip background same a the colored value

Answer 1

You can use the tooltip formatter funtion to change your chart instance when the tooltip is invoked.

Here is a quick example:

const colors = [
  [0.27, '#e76262'],
  [0.3, 'transparent'],
  [0.52, '#f9cf4a'],
  [0.55, 'transparent'],
  [0.77, '#eca336'],
  [0.8, 'transparent'],
  [1, '#3ece80']
];

option = {
  tooltip: {
    trigger: 'item',
    formatter: format
  },
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      center: ['50%', '60%'],
      radius: '100%',
      min: 0,
      max: 1,
      splitNumber: 8,
      axisLine: {
        roundCap: true,
        Gap: '100%',
        lineStyle: {
          width: 13,
          color: colors
        }
      },
      data: [0.8]
    }
  ]
};

function format(params) {
  const value = params.value;
  
  let color = 'transparent'
  if (value < 0.3) {
    color = '#e76262';
  } else if (value < 0.55) {
    color = '#f9cf4a';
  } else if (value < 0.8) {
    color = '#eca336';
  } else {
    color = '#3ece80';
  }
  
  myChart.setOption({tooltip: {backgroundColor: color}, series: [{pointer: {itemStyle: {color: color}}}]});
  
  return value + '';
}