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);