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

思路:首先默认构建一个一个空的图表,然后根据记录上一次操作保存过来的参数重新组建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. spark介绍4(sparksql)ODBC(Windows)gc

    (ODBC是open database connection开源数据连接)  在Windows控制面板的管理工具里面 GC(Garbage Collection):JAVA/.NET中的垃圾回收器 l ...

  2. jQuery基础入门

    一.什么是 jQuery Jquery它是javascript的一个轻量级框架,对javascript进行封装,它提供了很多方便的选择器.供你快速定位到需要操作的元素上面去.还提供了很多便捷的方法. ...

  3. [LeetCode 题解]: Triangle

    前言   [LeetCode 题解]系列传送门:  http://www.cnblogs.com/double-win/category/573499.html   1.题目描述 Given a tr ...

  4. RobotFramework做接口自动化(内部接口需要登录token)

    背景: 项目中需要做接口自动化测试,使用robot,有一个收货地址列表的接口直接传参数访问时会返回:{"msg":"缺少参数","code" ...

  5. solr的schema.xml配置属性解释

    schema.xml做什么? SOLR加载数据,创建索引和数据时,核心数据结构的配置文件是schema.xml,该配置文件主要用于配置数据源,字段类型定义,搜索类型定义等.schema.xml的配置直 ...

  6. 2.css的引入方式

    网页中引用CSS样式 内联样式 行内样式表 外部样式表 ..链接式 ..导入式 内嵌方式 style标签 <!doctype html> <html> <head> ...

  7. StratifiedShuffleSplit()函数 实现对数据集的划分

    sklearn.model_selection.StratifiedShuffleSplit(n_splits=10, test_size=’default’, train_size=None, ra ...

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

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

  9. AHOI2005航线规划 bzoj1969(LCT缩点)

    题目描述 对Samuel星球的探险已经取得了非常巨大的成就,于是科学家们将目光投向了Samuel星球所在的星系——一个巨大的由千百万星球构成的Samuel星系. 星际空间站的Samuel II巨型计算 ...

  10. 三,Smarty模板技术/引擎——变量操作(2)

    1, 变量的分类 ① 从PHP中分配的变量,比如a.php跳转到b.php时候,可以在a.php中分配变量,b.tpl中直接调用.a.php中代码,$smarty->assign(‘str’,’ ...