Echarts柱状图循环配色多色彩

旧梦星轨

已于 2024-11-08 16:09:37 修改

阅读量1.3k

点赞数 4

分类专栏： Echarts 文章标签： echarts javascript ecmascript 前端

于 2023-07-05 09:55:06 首次发布

本文链接：https://blog.csdn.net/qq_60961397/article/details/131541001

版权

Echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

话不多说，直接上配置案例，欢迎留言分享交流

option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', "y", "q", "y", "u"]
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                itemStyle: {
                    color: function (params) {
                        console.log('颜色参数', params);
                        let colorArr = [
                            '#5470c6',
                            '#91cc75',
                            '#fac858',
                            '#ee6666',
                            '#73c0de',
                            '#3ba272',
                            '#fc8452',
                            '#9a60b4',
                            '#ea7ccc',
                            '#FF0033',
                            '#09F7F7'
                        ];
                        return colorArr[params.dataIndex % colorArr.length];
                    }
                },
                data: [120, 200, 150, 80, 70, 110, 130, 20, 50, 80, 140],
                type: 'bar',
                showBackground: true
            }
        ]
    }

在这里插入图片描述

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————