关于echar彩色柱状图颜色配置问题

Posted 2020-11-01 人在路途

在做配置页面的时候，有这样一个需求，用户可以选择配置是单色柱状图或者彩色的柱状图，并且颜色可以自定义的

思路：首先默认构建一个一个空的图表，然后根据记录上一次操作保存过来的参数重新组建option的值，包括颜色（如下）清除option，在重组option

直接上代码

if(param.chartType=="singleBar"){//单色
    option=$.getJLHZBarOption();//默认的option(自己写死的)
    option.color=params.colors;
    option.xAxis[0].axisLabel.textStyle.color=params.serieColor;//更新横坐标的颜色
    option.yAxis[0].axisLabel.textStyle.color=params.serieColor;//更新纵坐标的颜色
    if(param.selectNodes.length>0){
        option.xAxis[0].data=[];
        option.series[0].data=[];
        $(params.selectNodes).each(function(){
            option.xAxis[0].data.push(this.name);
            option.series[0].data.push(this.data[0]);
        })
    }
}else{//多色
    option=$.getJLHZBarOption();
    var colors=$.extent(true,[],$.defaultColors());//默认的color颜色数组
    option.series[0].itemStyle={normal:{
        color:function(param){
            if(color.length<param.dataIndex){
                colors.push($.defaultColors()[param.dataIndex])
            }
            return colors[param.dataIndex]
        },
        //自定义设置某一个柱状图的颜色
        setColor:function(index,color){
            color[index]=color;
        },
        //自定义移除某一个柱状图的颜色
        removeColor:function(index){
            if(colors.length>index){
                color.splice(index,1)
            }
        },
        //获得整个柱状图的颜色数组
        getColors:function(){
            return colors;
        }
    }}
    //设置颜色
    for(var index in params.color){
        option.series[0].itemStyle.normal.setColor(index,param[index])
    }
}
option.title.text=param.title;//标题以及颜色
if(option.title.textStyle==undefined){
    option.title[0].textStyle.color=param.titleColor;
}else{
    option.title.textStyle.color=param.titleColor;
}
//清除
config.chart.clear();
config.chart.setOption(option,true);