echarts给柱形图的每个柱子设置不同颜色

最新推荐文章于 2023-12-13 15:15:05 发布

原创最新推荐文章于 2023-12-13 15:15:05 发布 · 1w 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在ECharts中为柱状图系列设置不同的颜色。通过使用特定的JavaScript函数，可以根据数据索引来选择预定义的颜色列表中的颜色。

 series: [{
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                 itemStyle: {
                    normal:{  
                    color: function (params){
                        var colorList = ['#ff4844','#9ac3e5','#66ac52','#ffc032','#549bd3','#f47e39'];
                        return colorList[params.dataIndex];
                    }
                },
              },
        }]