echarts 柱状图加背景加渐变

// 对上一篇的柱状图功能升级一下，不仅又背景色，还要根据百分比控制柱子的颜色，还要是渐变色，开整
// 主要代码
 itemStyle: {
       normal: {
                        barBorderRadius: 30,

                        color: (param) => {
                        // 判断返回值，然后再不同的值显示不同的颜色
                            if (param.value <= 30) {
                            // 渐变色
                                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgb(46,200,207,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgb(57,89,255,1)'
                                }])
                            } else if (param.value >= 30 && param.value <= 50) {
                                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#33FFE5'
                                }, {
                                    offset: 1,
                                    color: '#FFB264'
                                }])
                            } else {
                                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#33FFE5'
                                }, {
                                    offset: 1,
                                    color: '#FF0033'
                                }])
                            }
                            console.log(param)
                        }
                    },
                },
 // 全部代码
 import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'

const Echarts = (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 = [100, 100, 100, 100, 100, 100, 100];//背景按最大值
        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: '2%',
                right: '5%',
                bottom: '2%',
                top: '2%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'none'
                },
                backgroundColor: "rgba(0,123,177,0.2)",
                textStyle: {
                    color: 'rgba(255,255,255)',
                },
                borderColor: '#02E7BC',
                formatter: function (params) {
                    return params[0].name + ' : ' + params[0].value + '%'
                }
            },
            xAxis: {
                show: true,
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                    },
                    formatter: '{value} %'
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
            },
            yAxis: [{
                type: 'category',
                inverse: true,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    },
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true
                },
                data: salvProName
            },],
            series: [{
                name: '值',
                type: 'bar',
                zlevel: 1,
                itemStyle: {
                    normal: {
                        barBorderRadius: 30,

                        color: (param) => {
                            if (param.value <= 30) {
                                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgb(46,200,207,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgb(57,89,255,1)'
                                }])
                            } else if (param.value >= 30 && param.value <= 50) {
                                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#33FFE5'
                                }, {
                                    offset: 1,
                                    color: '#FFB264'
                                }])
                            } else {
                                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#33FFE5'
                                }, {
                                    offset: 1,
                                    color: '#FF0033'
                                }])
                            }
                            console.log(param)
                        }
                    },
                },
                label: {
                    show: true, // 开启显示
                    position: 'right', // 在上方显示
                    distance: 5, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                    verticalAlign: 'middle',
                    textStyle: { // 数值样式
                        color: '#fff',
                        fontSize: 12
                    },
                    formatter: '{c}%'
                },
                barWidth: 20,
                data: [22.1, 34.5, 45, 90, 33, 25, 15],
                // data: salvProValue
            },
            {
                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: "90%" }} ref={chartRef}></div>
    )
}
export default Echarts