关于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);

转载于:https://www.cnblogs.com/pengfei25/p/8929899.html

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

matlab rgb三维直方图,MATLAB小技巧之十：利用MATLAB绘制三维彩色柱状图[转载]
MATLAB自带有绘制三维柱状图的函数bar3,有版友反映不好控制柱子的颜色,特别是bar3不能绘制渐变色的柱子,并且bar3不能根据用户指定的散点数据绘制柱状图.为此,我编写了一个函数(scatte ...
echarts柱状图改变标签的位置及柱状图颜色
echarts柱状图改变标签的位置(柱状图里面的数值位置)及柱状图颜色在 series里面改变label对象里面的label属性 import * as echarts from 'echarts' ...
echarts柱状图颜色渐变样式
option: {title: {text: ''},color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, c ...
matlab矩阵画柱状三维,[原创]利用MATLAB绘制三维彩色柱状图
function scatterbar(x,y,z,scale) % 根据散点数据绘制3维彩色柱状图 % scatterbar(x,y,z,scale) x,y,z是实值数组,用来指定柱子顶 ...
Python读取excel表格数据并绘制成柱状图 | 数据排序、柱状图颜色、标签乱码等问题通通能够解决！
hello大家好, 我是你们的可爱丸, 我们又见面啦! python的功能十分强大, 它不仅可以用来做爬虫, 还可以用来做数据分析哦! 那么今天我就带着大家用python 分析表格数据,并绘制成柱状 ...
ECharts柱状图颜色设置
option = {xAxis : [{type : 'category',data : ['Mon', 'Tue', 'Wed'],axisTick: {alignWithLabel: true}} ...
echarts 柱状图颜色_echarts的实战案例一些（二）
之前的大数据项目又又又又改版啦,BTW,UI和生产童鞋又要给我们的工作增加难度啦...好吧,看下这次改版的一些目标样式吧~~ 水滴柱状图: 关键词:柱状图.水柱型难点:光柱位置调整.颜色及阴影配置 ...
printf彩色字体颜色打印输出
在printf中加入 "\033[m" 即可使printf进入彩色打印的模式可以将"\033["当作设置彩色打印模式开始,"m"为结束设置 ...
颜色错位HP CM1312nfi MFP打印机 CM1015 1017 CM1312 CP1518等彩色激光打印机颜色校准步骤方法
当彩色打印的时候,出现打印有重影,颜色错位,不能重合在一起的时候.可以进行颜色校准改善颜色错位的问题但一般可能是因为硒鼓已经用太久,选择更换吧.再生硒鼓加粉3次以上,基本都很多问题了. HP CM1 ...
qt对plot柱状图颜色设置
当使用qwtplotbarchart来使用柱状图时.可以通过下面代码来设置柱状图的颜色 QwtPlotBarChart *barChart = new QwtPlotBarChart("B ...

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

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

最新文章

热门文章