echarts柱状图不同颜色_Echarts 柱状图的每个柱子显示不同颜色问题及柱子上显示比例...

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

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

文章标签：

#echarts柱状图不同颜色 #柱状图上显示数据 js #相同布局在不同手机上显示不同 #重复文本显示不同颜色js

这篇博客详细介绍了如何使用Echarts库对柱状图进行样式定制，包括颜色序列的设定、标签显示以及百分比的添加。通过示例代码展示了如何在itemStyle中定义颜色函数以实现颜色的顺序显示，同时在label中添加formatter来展示每个数据项的百分比值。

在itemStyle中添加即可

series: [{
        name: '降水量',
        type: 'bar',
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        },
        itemStyle: {
            normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
              
                // 定制显示（按顺序）
                color: function(params) { 
                    var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ]; 
                    return colorList[params.dataIndex] 
                }
            },
        },
        data: [32.6, 25.9, 39.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 58.8, 16.0, 32.3],
    }]

或者固定颜色

 yAxis : [
        {
            type : 'value',
            show:false 
        }
    ],
    series : [
        {
            name:'总数量',
            type:'bar',
            barWidth: '60%',
            color: '#338AF6',
            data:[10, 52, 200, 334, 390, 330, 220],
           
            
        }
    ]

增加每个百分比 % ：增加代码： formatter: '{c}%'，具体如下：

series: [{
          name: '总数量',
          type: 'bar',
          barWidth: '60%',
          itemStyle: {
            normal: {
              // 随机显示
              //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
              // 定制显示（按顺序）
               color: function(params) {
                 var colorList = ['#338AF6', '#78C77D', '#F4D35F', '#435184', '#8C67DE', '#6BC8CA', '#0AAF9F', '#E89589', '#16A085', '#4A235A', '#C39BD3 ', '#F9E79F', '#BA4A00', '#ECF0F1', '#616A6B', '#EAF2F8', '#4A235A', '#3498DB'];
                  return colorList[params.dataIndex]
                },
              label: {
                    show: true,
                    formatter: '{c}%',
                    position: 'top'
                }
            }
          },
          data: [50, 20, 70, 48, 40, 52]
       }]