关于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 博客园地址:<大史住在大前端& ...
随机推荐
- 搭建python+PyQt+Eric平台
搭建python+PyQt+Eric平台 预备安装程序: 2.1.下载Python3.2 官方网站:http://www.python.org/ 下载地址:http://www.python.org/ ...
- LightOJ 1098(均值不等式,整除分块玄学优化)
We all know that any integer number n is divisible by 1 and n. That is why these two numbers are not ...
- 在Centos 7 上面 安装MySQL 5.7 简录
In a web browser, visit mysql.com page: https://dev.mysql.com/downloads/repo/yum/ Locate the desired ...
- INDEX--关于索引的琐碎
--=========================================================更新时的操作1>更新时有两种方式,一种是在原来的位置更新,另外一种是移除删除 ...
- django使用ajax传输数据
HTML文件ajax get例子 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 29.Combination Sum(和为sum的组合)
Level: Medium 题目描述: Given a set of candidate numbers (candidates) (without duplicates) and a targe ...
- 快速启动工具Rulers 4.1
Rulers 4.1 Release 360云盘 https://yunpan.cn/cSbq5nx9GVwrJ 访问密码 0532 百度云 http://pan.baidu.com/s/1czCNR ...
- luogu4383 [八省联考2018]林克卡特树(带权二分+dp)
link 题目大意:给定你 n 个点的一棵树 (边有边权,边权有正负) 你需要移除 k 条边,并连接 k 条权值为 0 的边,使得连接之后树的直径最大 题解: 根据 [POI2015]MOD 那道题, ...
- Java函数的联级调用
String类的方法可以连续调用: String str="abc"; String result=str.trim().toUpperCase().concat("de ...
- Java传参都是传引用变量的副本
最近做练习时碰到一个问题,Java到底是怎样传参的,经过查资料与实验,我发现Java传参都是传引用变量的副本值. 1 Java中的引用变量 1.1 字面值引用变量:即基本数据类型的引用变量 ,如 in ...