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

思路:首先默认构建一个一个空的图表,然后根据记录上一次操作保存过来的参数重新组建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彩色柱状图颜色配置问题的更多相关文章

  1. echarts系列之动态修改柱状图颜色

    echarts根据某一变量动态修改柱状图颜色 1.option中参数配置项series { "name":"Android", "type" ...

  2. SecureCRT SSH Linux中不显示彩色 字体颜色、文件夹和文件显示的颜色区别开解决办法

    SecureCRT SSH Linux中不显示彩色 字体颜色.文件夹和文件显示的颜色区别开解决办法 实验环境: 刚开始我的情况是这样的:带颜色的显示不出来,然后还能看到,此处有内容,猜测是Secure ...

  3. qt对plot柱状图颜色设置

      当使用qwtplotbarchart来使用柱状图时.可以通过下面代码来设置柱状图的颜色 QwtPlotBarChart  *barChart = new QwtPlotBarChart(" ...

  4. echarts设置柱状图颜色渐变及柱状图粗细大小

    series: [ { name: '值', type: 'bar', stack: '总量', //设置柱状图大小 barWidth : 20, //设置柱状图渐变颜色 itemStyle: { n ...

  5. vue中使用v-chart改变柱状图颜色以及X轴Y轴的文字颜色和大小以及标题

    1.html部分 <ve-histogram :tooltip-visible="true" :x-axis="xAxis" :y-axis=" ...

  6. echar图柱状图和折线图混合加双侧y轴坐

    代码如下: floorSalesBar(){//方法名====这个方法应该放在methods中并在mounted中调用哦 methods let _this = this; let myChart = ...

  7. echarts柱状图,改变柱状颜色

    在使用echarts产生的柱状图中,有时候自动产生的颜色大不如人意,可以通过以下参数进行修改. series : [ { name:'天数', type:'bar', stack: '天', data ...

  8. CAD打印线条太粗、线条颜色设置

    不管你是使用打印机,还是将CAD转换为PDF文件,如果出现以下情况,线条太粗,根本看不清楚,怎么解决呢? 或者,不想通过图层复杂.繁琐的设置,想将各种颜色线条的CAD全部打印成黑白,或者指定某一种颜色 ...

  9. 【带着canvas去流浪】(1)绘制柱状图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 思考题 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端& ...

随机推荐

  1. css中padding和magin的区别

    1.Margin 用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离. 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边.   如果只提供一个,将用于全部的四边.   如果提供两个,第 ...

  2. Java50道经典习题-程序1 不死神兔

    题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子对数为多少? 分析:假如:1月1日有1对兔子,根据题目“从出生后 ...

  3. Linux常用开发指令

    gcc mysqltest.c -o mysqltest `mysql_config –cflags –libs`

  4. [网络流24题][CTSC1999] 家园

    题目链接:戳我 对于这种一个点(表面意义上的一个点,比如说一个位置)对应多种情况的(比如说随着时间的推移有着不同的状态,而且这种状态>2),我们考虑在类似于分层图上面跑网络流. 比如说这道题,周 ...

  5. [HNOI2004]宠物收养所

    题目链接:戳我 其实也就是一个splay而已了. 但是一定要注意这种需要计算的,刚开始insert的时候插入极大值极小值的时候不要让它爆掉int.......(比如我刚开始就写了一个214748364 ...

  6. 在linux 创建网络会话和绑定两块网卡

    1. 如果我们在公司网络中要手动指定网络的IP地址,当我们回到家里则是使用DHCP(动态主机配置协议)自动分配IP地址.这就有点麻烦了,因为要频繁的修改IP地址,所以接下来我们来创建网络会话----- ...

  7. ocp题库变化,052新加的考试题及答案整理-32

    32. Examine these commands and their output: • SQL> SELECT * FROM emp; • ENO ENAME • ---- ----- • ...

  8. [Flex] 组件Tree系列 —— 阻止用户点击选中Tree中任何节点

    mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:阻止用户点击选中Tree中任何节点 ...

  9. ubuntu安装gnome桌面

    1. apt install gnome-shell 2. apt install ubuntu-gnome-desktop 3. apt install unity-tweak-tool 4. ap ...

  10. NOIP模拟题汇总(加厚版)

    \(NOIP\)模拟题汇总(加厚版) T1 string 描述 有一个仅由 '0' 和 '1' 组成的字符串 \(A\),可以对其执行下列两个操作: 删除 \(A\)中的第一个字符: 若 \(A\)中 ...