码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-04-24 14:57:39      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:push   type   set   移除   问题   思路   记录   single   用户   

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

思路:首先默认构建一个一个空的图表,然后根据记录上一次操作保存过来的参数重新组建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);

 

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

标签:push   type   set   移除   问题   思路   记录   single   用户   

原文地址:https://www.cnblogs.com/pengfei25/p/8929899.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!