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

思路:首先默认构建一个一个空的图表,然后根据记录上一次操作保存过来的参数重新组建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. CGLIB介绍与原理(通过继承的动态代理)

    一.什么是CGLIB? CGLIB是一个功能强大,高性能的代码生成包.它为没有实现接口的类提供代理,为JDK的动态代理提供了很好的补充.通常可以使用Java的动态代理创建代理,但当要代理的类没有实现接 ...

  2. 设计模式9---装饰模式(Decorator Pattern)

    装饰模式又名包装(Wrapper)模式.装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案. 装饰模式的结构 装饰模式以对客户透明的方式动态地给一个对象附加上一些责任.换言之,客户端 ...

  3. windows包管理工具和 ssh安装

    Chocolatey windows下的包管理工具 https://chocolatey.org/ cmd里执行 @"%SystemRoot%\System32\WindowsPowerSh ...

  4. 201621123023《Java程序设计》第4周学习总结

    一.本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 继承.多态.覆盖.重载 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一般不需要出现过多的字. 二.书面作业 1. 面 ...

  5. “全栈2019”Java第八十三章:内部类与接口详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. POJ 3522 最小差值生成树(LCT)

    题目大意:给出一个n个节点的图,求最大边权值减去最小边权值最小的生成树. 题解 Flash Hu大佬一如既往地强 先把边从小到大排序 然后依次加入每一条边 如果已经连通就把路径上权值最小的边删去 然后 ...

  7. CentOS 6.5 BCM43142 80211无线网卡驱动安装

    https://blog.csdn.net/lisonglisonglisong/article/details/74859545 https://blog.csdn.net/shile/articl ...

  8. [ActionSprit 3.0] FMS直播

    音视频流的发布(服务端) package { import flash.display.Sprite; import flash.events.NetStatusEvent; import flash ...

  9. js 平均分割

    let alllist=res.data; var result = []; for (var i = 0; i < alllist.length; i += 3) { result.push( ...

  10. Tutorial 01 4,5题

    .任务四: 程序设计思想:利用Math.random()产生一个char类型的字符,再利用for循环是他们相加,最后将他们放在一个消息框中输出.   程序流程图:   源程序:           p ...