在做配置页面的时候,有这样一个需求,用户可以选择配置是单色柱状图或者彩色的柱状图,并且颜色可以自定义的
思路:首先默认构建一个一个空的图表,然后根据记录上一次操作保存过来的参数重新组建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);