echarts系列之动态修改柱状图颜色

最新推荐文章于 2025-09-26 02:02:27 发布

原创最新推荐文章于 2025-09-26 02:02:27 发布 · 4.3k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍如何在ECharts中根据特定变量动态修改柱状图的颜色，通过配置series参数和自定义颜色函数实现不同版本的数据展示不同颜色的柱状图。

echarts系列之动态修改柱状图颜色

echarts根据某一变量动态修改柱状图颜色

1.option中参数配置项series

{
     "name":"Android",
     "type":"bar",
     "data":bData,
     //配置样式
     itemStyle: {   
        //通常情况下：

　　　　　　normal:{
　　　　　　// 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
　　　　　　　　color: function (params){
　　　　　　　　return barColor()[params.dataIndex];

　　　　　　}
　　　　}

2.动态设置颜色的方法

（规则：不同version的柱状颜色不一样）

function barColor(){
                    var colorList = [
                                      '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                                      '#FFB7DD','#660077','#FFCCCC','#FFC8B4','#550088',
                                      '#FFFFBB','#FFAA33','#99FFFF','#CC00CC','#FF77FF',
                                      '#CC00CC','#C63300','#F4E001','#9955FF','#66FF66',
                                      '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                                      '#FFB7DD','#660077','#FFCCCC','#FFC8B4','#550088',
                                      '#FFFFBB','#FFAA33','#99FFFF','#CC00CC','#FF77FF',
                                      '#CC00CC','#C63300','#F4E001','#9955FF','#66FF66'
                                     
                                     
                                  ];
                     //console.log(params);
                        console.log(xAxisVersion.reverse());
                        var version_arr = xAxisVersion.reverse();
                        var unique_arr = xAxisVersion.unique();
                        var color_arr=[];
                        console.log(unique_arr);
                        var cur=-1;
                       
                       
                        for(var i=0;i<version_arr.length;i++){
                            cur=-1;
                            for(var j=0;j<unique_arr.length;j++){
                                if(version_arr[i]===unique_arr[j]){
                                    //console.log(version_arr[i],unique_arr[j]);
                                    //console.log(i,j);
                                    cur = j;
                                    break;
                                   
                                }
                             } 
                             
                            if(cur>=0){
                                color_arr.push(colorList[cur]); 
                                //console.log('==='+colorList[cur]);
                            }else{
                                color_arr[i]="#f00";
                            }
                        }
                        
                        color_arr=color_arr.reverse();
                        return color_arr;
                }

posted @ 2018-01-05 14:45 _只鱼阅读( ...) 评论( ...) 编辑收藏