ECharts柱状图颜色设置

最新推荐文章于 2025-01-26 16:45:32 发布

原创最新推荐文章于 2025-01-26 16:45:32 发布 · 1.1w 阅读

3 ·

CC 4.0 BY-SA版权

_格鲁特宝宝原创，转载请务必注明出处

文章标签：

#js #echarts #series #柱状图颜色

ECharts 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用ECharts实现的柱状图配置示例，包括x轴、y轴及系列数据的定义方式，并展示了如何通过itemStyle设置柱状图的颜色及鼠标悬停效果。

option = {
    xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            data:[200, 390, 334,],
            itemStyle:{
                //通常情况下：
                normal:{  
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组中的颜色
                    color: function (params){
                        var colorList = [
                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                        return colorList[params.dataIndex];
                    },
                    // color: '#a453f7',  //设置所有柱状图颜色
                },
                //鼠标悬停时：
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};