zoukankan      html  css  js  c++  java
  • 关于echar彩色柱状图颜色配置问题

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

    思路:首先默认构建一个一个空的图表,然后根据记录上一次操作保存过来的参数重新组建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);
  • 相关阅读:
    [转载]Oracle查看当前用户权限
    [转载]Oracle查看当前用户权限
    UltraEdit实用技巧
    _splitpath,_makepath分析路径
    [ZT]让你的软件界面更漂亮(1、2)
    [book]程序员修炼之道
    考考你的C++水平
    将*.STL转换成顶点索引格式
    JBuilder 2006 企业完整版
    [book]道法自然
  • 原文地址:https://www.cnblogs.com/pengfei25/p/8929899.html
Copyright © 2011-2022 走看看