ECharts 柱状图颜色设置

最新推荐文章于 2024-11-04 14:30:42 发布

原创最新推荐文章于 2024-11-04 14:30:42 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

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

文章标签：

#echarts #图表 #echarts 图表 #echarts 颜色设置

Web FrontEnd 同时被 2 个专栏收录

226 篇文章

订阅专栏

ECharts

13 篇文章

订阅专栏

本博客展示了一周内采购活动的数据分析，通过柱状图详细呈现了每天的采购数量变化，从周一到周日的数据分别为10、52、200、334、390、330、220。图表使用了特定的颜色方案进行视觉区分，并在鼠标悬停时增加了阴影效果以增强用户体验。

series : [
    {
        name:'七天内采购',
        type:'bar',
        barWidth: '40%',
        data:[10, 52, 200, 334, 390, 330, 220],
        itemStyle: {   
            //通常情况下：
            normal:{  
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组中的颜色
                color: function (params){
                    var colorList = ['#a453f7','#a453f7','#a453f7','#a453f7','#a453f7','#a453f7','#eab807',];
                    return colorList[params.dataIndex];
                }
            },
            //鼠标悬停时：
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        },
    }
]