react中echarts柱状图渐变色

javascript 复制代码
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
相关推荐
黑云压城After15 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务17 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
C+ 安口木19 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
CoderYanger19 小时前
前端基础-HTML入门保姆级课堂笔记
前端·javascript·css·html
赛博切图仔19 小时前
qiankun、micro-app、wujie,2025年我们该选谁?
前端·javascript
码界筑梦坊20 小时前
267-基于Django的携程酒店数据分析推荐系统
python·数据分析·django·毕业设计·echarts
im_AMBER20 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
玩代码21 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
苏打水com1 天前
JavaScript 面试题标准答案模板(对应前文核心考点)
javascript·面试
Wx-bishekaifayuan1 天前
基于微信小程序的社区图书共享平台设计与实现 计算机毕业设计源码44991
javascript·vue.js·windows·mysql·pycharm·tomcat·php