ECharts gauge tooltip valueFormatter 格式化进度环的 tooltip 数值显示

需求

有三个维度的进度环需要显示，但min/max只能在series维度设置，不能在data维度更细粒度的每个数组进行设置。

这就导致了必须在data的value中进行除法运算，当tooltip显示时会展示0.xx小数。

tooltip.valueFormatter

gauge有tooltip属性可供设置，使用valueFormatter对数值进行格式化。

valueFormatter的回调函数接受两个参数，第二个参数dataIndex就返回data的索引，可以进行业务逻辑判断。

valueFormatter: (value: number | string, dataIndex: number) => string

代码

const option = {
    tooltip: {
    },
    series: [{
        tooltip: {
            valueFormatter: (value, dataIndex) => {
                if (dataIndex === 0) {
                    // gaugeData[dataIndex]
                } else if (dataIndex === 1) {
                
                } else {
                
                }
                return some-string
            },
        },
        type: 'gauge',
        radius: '90%',
        min: 0,
        max: 100,
        startAngle: 90,
        endAngle: -270,
        pointer: {
            show: false
        },
        progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
                borderWidth: 1,
                borderColor: '#464646'
            }
        },
        axisLine: {
            lineStyle: {
                width: 20
            }
        },
        splitLine: {
            show: false,
            distance: 0,
            length: 10
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false,
            distance: 50
        },
        data: gaugeData,
        title: {
            fontSize: 14
        },
        detail: {
            height: 14,
            fontSize: 14,
            color: 'inherit',
            borderColor: 'inherit',
            borderRadius: 20,
            borderWidth: 1,
            formatter: function (value) {
                return `${value}%`;
            }
        }
    }],
}

const gaugeData = [
  {
    value: 20,
    name: 'Perfect',
    title: {
      offsetCenter: ['0%', '-30%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '-20%']
    }
  },
  {
    value: 40,
    name: 'Good',
    title: {
      offsetCenter: ['0%', '0%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '10%']
    }
  },
  {
    value: 60,
    name: 'Commonly',
    title: {
      offsetCenter: ['0%', '30%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '40%']
    }
  }
];

文档

https://echarts.apache.org/zh/option.html#series-gauge