react中echarts柱状图渐变色

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
        // 取返回数据中的最大值作为背景色
        bigNum = Math.max.apply(null, props?.info[1])
        for (let i = 0; i < salvProValue.length; i++) {
            salvProMax.push(bigNum)
        }
        const options = {
            grid: {
                // 左右边距，调节整个echarts距离外面box的位置
                left: 50,
                bottom: 30,
                top: 10,
            },
            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: [
                {
                    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'
                            }]), // 柱状图的渐变色
                        },
                    },
                },
                {
                    name: '背景',
                    type: 'bar',
                    barWidth: 20,
                    barGap: '-100%',
                    data: salvProMax,
                    itemStyle: {
                        normal: {
                            color: 'rgba(0, 123, 177, 0.2)',
                            barBorderRadius: 30,
                        }
                    },
                },
            ]
        };
        // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
        const chart = echarts.init(chartRef.current)

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

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

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