关于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);
关于echar彩色柱状图颜色配置问题的更多相关文章
- echarts系列之动态修改柱状图颜色
echarts根据某一变量动态修改柱状图颜色 1.option中参数配置项series { "name":"Android", "type" ...
- SecureCRT SSH Linux中不显示彩色 字体颜色、文件夹和文件显示的颜色区别开解决办法
SecureCRT SSH Linux中不显示彩色 字体颜色.文件夹和文件显示的颜色区别开解决办法 实验环境: 刚开始我的情况是这样的:带颜色的显示不出来,然后还能看到,此处有内容,猜测是Secure ...
- qt对plot柱状图颜色设置
当使用qwtplotbarchart来使用柱状图时.可以通过下面代码来设置柱状图的颜色 QwtPlotBarChart *barChart = new QwtPlotBarChart(" ...
- echarts设置柱状图颜色渐变及柱状图粗细大小
series: [ { name: '值', type: 'bar', stack: '总量', //设置柱状图大小 barWidth : 20, //设置柱状图渐变颜色 itemStyle: { n ...
- vue中使用v-chart改变柱状图颜色以及X轴Y轴的文字颜色和大小以及标题
1.html部分 <ve-histogram :tooltip-visible="true" :x-axis="xAxis" :y-axis=" ...
- echar图柱状图和折线图混合加双侧y轴坐
代码如下: floorSalesBar(){//方法名====这个方法应该放在methods中并在mounted中调用哦 methods let _this = this; let myChart = ...
- echarts柱状图,改变柱状颜色
在使用echarts产生的柱状图中,有时候自动产生的颜色大不如人意,可以通过以下参数进行修改. series : [ { name:'天数', type:'bar', stack: '天', data ...
- CAD打印线条太粗、线条颜色设置
不管你是使用打印机,还是将CAD转换为PDF文件,如果出现以下情况,线条太粗,根本看不清楚,怎么解决呢? 或者,不想通过图层复杂.繁琐的设置,想将各种颜色线条的CAD全部打印成黑白,或者指定某一种颜色 ...
- 【带着canvas去流浪】(1)绘制柱状图
目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 思考题 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端& ...
随机推荐
- 团体程序设计天梯赛L1-022 奇偶分家 2017-03-22 17:48 81人阅读 评论(0) 收藏
L1-022. 奇偶分家 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定N个正整数,请统计奇数和偶数各有多少个? 输入格式 ...
- Hadoop各个启动流
(0)如果集群是第一次启动,需要格式化namenodehadoop@node1:~$ hdfs namenode –format (1)启动HDFS:hadoop@master:~$ start-df ...
- [LeetCode 题解]: String to Interger (atoi)
Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...
- SQL Server 2012 表分区
转载于:https://www.cnblogs.com/knowledgesea/p/3696912.html 什么是表分区 一般建立数据库表时,表数据都存放在一个文件里. 但是如果是分区表的话,表数 ...
- mysql安装 卸载 查字符集编码
下载地址 : https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.11-winx64.zip 解压zip 解压完之后的目录 在里面新建一 ...
- C#中的线程
1.线程Thread 多线程的意义在于一个应用程序中,有多个执行部分可以同时执行:对于比较耗时的操作(例如io,数据库操作),或者等待响应(如WCF通信)的操作,可以单独开启后台线程来执行,这样主线程 ...
- 新编辑器Cocos Creator发布:对不起我来晚了!
1月19日,由Cocos创始人王哲亲手撰写的一篇Cocos Creator新品发布稿件在朋友圈被行业人士疯狂转载,短短数小时阅读量突破五位数.Cocos Creator被誉为“注定将揭开Cocos开发 ...
- CF1106F Lunar New Year and a Recursive Sequence(矩阵快速幂+bsgs+exgcd)
题面 传送门 前置芝士 \(BSGS\) 什么?你不会\(BSGS\)?百度啊 原根 对于素数\(p\)和自然数\(a\),如果满足\(a^x\equiv 1\pmod{p}\)的最小的\(x\)为\ ...
- SPOJ 3267 DQUERY(离线+树状数组)
传送门 话说这好像HH的项链啊…… 然后就说一说上次看到的一位大佬很厉害的办法吧 对于所有$r$相等的询问,需要统计有多少个不同的数,那么对于同一个数字,我们只需要关心它最右边的那一个 比如$1,2, ...
- windows下安装ubuntu15.04
本文主要介绍windows下安装ubuntu15.04,对与其他的版本也是适用的.现在要讲的是一种最简单ubuntu的安装方式. 1软件下载 1.磁盘分区工具DiskGenius 2.启动项修改工具E ...