文档章节

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

o
 osc_x4h57ch8
发布于 2018/04/24 14:07
字数 317
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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

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

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

如何将div放置在其容器的底部? - How can I position my div at the bottom of its container?

问题: Given the following HTML: 鉴于以下HTML: <div id="container"> <!-- Other elements here --> <div id="copyright"> Copyright Foo web designs </div> </div> I would like #cop......

富含淀粉
53分钟前
10
0
unity列表控件Horizontal/Vertical/Grid Layout Group用法介绍

1. Grid Layout Group 为Panel控件添加Grid Layout Group,子控件为四个按钮,分别为Grid,Calendar,Gear,User: 默认属性为 为方便演示,按钮的底色为控件自带image,按钮上面的图标为其子...

路过暴风
今天
19
0
Distinct()与lambda? - Distinct() with lambda?

问题: Right, so I have an enumerable and wish to get distinct values from it. 是的,所以我有一个可枚举的,并希望从中获得不同的值。 Using System.Linq , there's of course an ext......

法国红酒甜
今天
16
0
学习编写编译器[关闭] - Learning to write a compiler [closed]

问题: Preferred languages : C/C++, Java, and Ruby. 首选语言 :C / C ++,Java和Ruby。 I am looking for some helpful books/tutorials on how to write your own compiler simply for......

技术盛宴
今天
17
0
OSChina 周一乱弹 —— 毛巾又怎么样?!我在乎的是大姐姐温柔的怀抱!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《雨 因你而下,于你而止》- Seto 手机党少年们想听歌,请使劲儿戳(这里) @Dan...

小小编辑
今天
48
2

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部