About the color configuration problem of echar color histogram

When making the configuration page, there is such a requirement, the user can choose whether the configuration is a monochrome histogram or a colored histogram, and the color can be customized

Idea: First build an empty chart by default, and then rebuild the option value according to the parameters saved in the last operation of the record, including the color (below) to clear the option, and then reorganize the option

code directly

if (param.chartType=="singleBar"){ // Monochrome 
    option=$.getJLHZBarOption(); // Default option (written to death) 
    option.color= params.colors;
    option.xAxis[ 0].axisLabel.textStyle.color=params.serieColor; // Update the color of the abscissa 
    option.yAxis[0].axisLabel.textStyle.color=params.serieColor; // Update the color of the ordinate 
    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 { // Multicolor 
    option= $.getJLHZBarOption();
     var colors=$.extent( true ,[],$.defaultColors()); // Default color array 
    option.series[0].itemStyle= {normal:{
        color:function(param){
            if(color.length<param.dataIndex){
                colors.push($.defaultColors()[param.dataIndex])
            }
            return colors[param.dataIndex]
        },
        // Customize the color of a histogram 
        setColor: function (index,color){
            color[index]=color;
        },
        // Customize remove the color of a histogram 
        removeColor: function (index){
             if (colors.length> index){
                color.splice(index,1)
            }
        },
        // Get the color array of the entire histogram 
        getColors: function (){
             return colors;
        }
    }}
    // Set the color 
    for ( var index in params.color){
        option.series[0].itemStyle.normal.setColor(index,param[index])
    }
}
option.title.text =param.title; // title and color 
if (option.title.textStyle== undefined){
    option.title[0].textStyle.color=param.titleColor;
}else{
    option.title.textStyle.color=param.titleColor;
}
// Clear 
config.chart.clear();
config.chart.setOption(option,true);

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324768060&siteId=291194637