Echarts柱状图采用不同色

最新推荐文章于 2025-03-19 14:28:07 发布

杀猪刀-墨林

最新推荐文章于 2025-03-19 14:28:07 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

分类专栏： # echarts 文章标签： Echarts柱状图不同色柱图

本文链接：https://blog.csdn.net/qq_38948398/article/details/111626850

echarts 专栏收录该内容

19 篇文章

订阅专栏

本文展示了如何使用ECharts创建一个带有动态颜色和渐变背景的柱状图，通过自定义itemStyle和backgroundStyle实现数据可视化，适合前端开发者理解和实践数据展示技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

echarts配置：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        itemStyle: {
            normal: {
              color: function (params) {
                var colorList = [
                  '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                  '#FE8463', '#9BCA63', '#FAD860',
                ];
                return colorList[params.dataIndex]
              },
            },
        },
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
};