echart仪表工具提示背景修改

Question

我能够使用 eChart 仪表的工具提示。但是，我希望使用指针等值的颜色来设置工具提示的背景。有什么想法吗？

提前致谢

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

            ...

            ],
          },
  ]
};

我需要让工具提示背景与颜色值相同

Answer 1

您可以使用 工具提示格式化程序功能 在调用工具提示时更改图表实例。

这里是一个简单的例子：

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 + '';
}