echarts每个柱条设置不同的颜色

最新推荐文章于 2024-05-31 15:30:36 发布

麻辣_水煮鱼

最新推荐文章于 2024-05-31 15:30:36 发布

阅读量5.8k

点赞数 2

分类专栏： echarts 文章标签： echarts柱条设置不同颜色

本文链接：https://blog.youkuaiyun.com/weixin_42217154/article/details/106374317

版权

本文介绍了如何使用Echarts为每个柱状图柱子设置独特的颜色，以匹配特定系统的颜色需求。通过一段代码示例，展示了实现这一效果的方法。

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

本来好好的柱子，今天要求柱条颜色要用系统名称对应的颜色，如下图。（花里胡哨的，但是我不发表任何意见，让我改我就改-------一个莫得感情的代码搬运工）

实现代码

var provideNumber = 4;
    if($(document.body).width() > 1800){
        provideNumber = 6;
    }
    var myCharts = echarts.init(document.getElementById('usersChart'));
    var option = {
        tooltip : {
            trigger: 'axis',
        },
        grid: {
            left: '22%',
        },
        xAxis:  {
            type: 'value',
            splitLine:{show: false},//去除网格线
            position:'top',//坐标轴位置
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1,//这里是为了突出显示加上的
                }
            }
        },
        yAxis: {