echarts有背景的柱状图，鼠标滑过提示信息都是展示背景柱状图的值

// 上一篇文章介绍了如何实现有背景的柱状图，现在又遇到一个问题，鼠标滑过柱子，提示信息是背景柱子的值，解决方案，自定义tooltip的formatter，上代码
 tooltip: {
                //鼠标悬浮提示数据
                formatter: function (param) {
                   // param.seriesIndex 会告诉你是第一个柱状图，用这个来判断你要显示的数值
                    let str = ''
                    if (param.seriesIndex === 1) {
                        str = `<div>${param.name}: ${param.value} 辆</div>`
                    }
                    return str
                },
                backgroundColor: 'rgba(0,123,177,0.2)',
                borderColor: "#030C31",
                textStyle: {
                    color: '#ffffff',
                }
  },
  //完整代码
  import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'

const CarAgeEcharts = (props) => {
    const chartRef = useRef()
    console.log(props)


    useEffect(() => {
        console.log(props)

        var salvProName = [];
        var salvProValue = [];
        if (props?.info?.length) {
            salvProName = props?.info[0];
            salvProValue = props?.info[1];
        }
        var salvProMax = [];//背景按最大值
        let bigNum = 0
        // props?.info[1].map((res)=>{

        // })
        bigNum = Math.max.apply(null, props?.info[1])
        for (let i = 0; i < salvProValue.length; i++) {
            salvProMax.push(bigNum)
        }
        const options = {
            grid: {
                // 左右边距
                left: 50,
                bottom: 30,
                top: 10,
            },
            tooltip: {
                //鼠标悬浮提示数据
                formatter: function (param) {
                    console.log(param)
                    let str = ''
                    if (param.seriesIndex === 1) {
                        str = `<div>${param.name}: ${param.value} 辆</div>`
                    }
                    return str
                },
                backgroundColor: 'rgba(0,123,177,0.2)',
                borderColor: "#030C31",
                textStyle: {
                    color: '#ffffff',
                }
            },
            xAxis: {
                type: 'category',
                data: props?.info[0],
                axisTick: {
                    show: false,

                },
                axisLabel: {
                    interval: 0
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    //分割线配置
                    show: true,
                    lineStyle: {
                        color: "rgba(48,170,219,0.15)",
                    },
                },
                axisLabel: {
                    //y轴文字的配置
                    textStyle: {
                        color: "#ffffff",
                        margin: 15,
                    },
                }
            },
            series: [
                {
                    name: '背景',
                    type: 'bar',
                    barWidth: 20,
                    barGap: '-100%',
                    data: salvProMax,
                    itemStyle: {
                        normal: {
                            color: 'rgba(0, 123, 177, 0.2)',
                            barBorderRadius: 30,
                        }
                    },
                },
                {
                    data: props?.info[1],
                    type: 'bar',
                    smooth: true,
                    barWidth: 20,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 10,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#18FFE1'
                            }, {
                                offset: 0.5,
                                color: '#18EBFF'
                            }, {
                                offset: 1,
                                color: '#00A2FF'
                            }]),
                        },
                    },
                },

            ]
        };
        // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
        const chart = echarts.init(chartRef.current)

        // 设置图表实例的配置项和数据
        chart.setOption(options)

        // 组件卸载
        return () => {
            // myChart.dispose() 销毁实例。实例销毁后无法再被使用
            chart.dispose()
        }
    }, [props])

    return (
        // 把图表封装单独放入一个组件中
        <div style={{ width: "100%", height: "70%" }} ref={chartRef}></div>
    )
}
export default CarAgeEcharts