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

思路:首先默认构建一个一个空的图表,然后根据记录上一次操作保存过来的参数重新组建option的值,包括颜色(如下)清除option,在重组option

直接上代码

  1. if(param.chartType=="singleBar"){//单色
  2. option=$.getJLHZBarOption();//默认的option(自己写死的)
  3. option.color=params.colors;
  4. option.xAxis[0].axisLabel.textStyle.color=params.serieColor;//更新横坐标的颜色
  5. option.yAxis[0].axisLabel.textStyle.color=params.serieColor;//更新纵坐标的颜色
  6. if(param.selectNodes.length>0){
  7. option.xAxis[0].data=[];
  8. option.series[0].data=[];
  9. $(params.selectNodes).each(function(){
  10. option.xAxis[0].data.push(this.name);
  11. option.series[0].data.push(this.data[0]);
  12. })
  13. }
  14. }else{//多色
  15. option=$.getJLHZBarOption();
  16. var colors=$.extent(true,[],$.defaultColors());//默认的color颜色数组
  17. option.series[0].itemStyle={normal:{
  18. color:function(param){
  19. if(color.length<param.dataIndex){
  20. colors.push($.defaultColors()[param.dataIndex])
  21. }
  22. return colors[param.dataIndex]
  23. },
  24. //自定义设置某一个柱状图的颜色
  25. setColor:function(index,color){
  26. color[index]=color;
  27. },
  28. //自定义移除某一个柱状图的颜色
  29. removeColor:function(index){
  30. if(colors.length>index){
  31. color.splice(index,1)
  32. }
  33. },
  34. //获得整个柱状图的颜色数组
  35. getColors:function(){
  36. return colors;
  37. }
  38. }}
  39. //设置颜色
  40. for(var index in params.color){
  41. option.series[0].itemStyle.normal.setColor(index,param[index])
  42. }
  43. }
  44. option.title.text=param.title;//标题以及颜色
  45. if(option.title.textStyle==undefined){
  46. option.title[0].textStyle.color=param.titleColor;
  47. }else{
  48. option.title.textStyle.color=param.titleColor;
  49. }
  50. //清除
  51. config.chart.clear();
  52. 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. XJOI 3605 考完吃糖(DAG图dfs)

    题目描述: 期末考试考完了,分数也出来了,大家准备吃糖庆祝一下,为了鼓励同学们下学期能取得更好的成绩,司马红豆同学让n个同学站成一排,如果某个同学的分数比相邻的一个同学要高,那么他得到的糖果就会比这个 ...

  2. VMware安装Ubuntu分辨率无法适应屏幕的解决方法

    ​ 一开始虚拟机安装Ubuntu的时候遇到分辨率无法适应屏幕的时候,百度了一大堆都说使用xrandr命令来修改分辨率,但是还是无法适应1920x1080的屏幕,强迫症表示非常难受! ​ 然后在不知道是 ...

  3. C++对象的virtual table在内存中的布局

    (1)单一继承 (2)多重继承 (3)虚拟继承 参考:<深度探索C++对象模型>

  4. MVC4 4种Filter

    1. AuthorizationFilter: 从命名上看这个用于完成授权相关的工作. AuthorizationFilter 实现了 IAuthorizationFilter 接口, 如果我们希望执 ...

  5. duilib入门简明教程 -- 完整的自绘标题栏(8)

       看了前面那么多教程,相信对duilib已有基本映像了,我们就快马加鞭,做出一个完整的自绘标题栏吧~     看到下面这个效果图,小伙伴们是不是有点惊呆了呢~O(∩_∩)O~       duil ...

  6. .Net Core内存回收模式及性能测试对比

    .NET Core 两种GC模式: Server GC / Workstation GC Server GC : 主要应用于多处理器系统,并且作为ASP.NET Core宿主的默认配置.它会为每个处理 ...

  7. python学习之路 五:函数式编程

    本节重点 掌握函数的作用.语法 掌握作用域.全局变量与局部变量知识 掌握函数名称空间.闭包 一.函数编程基础知识 1.基本定义 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数 ...

  8. DI 依赖注入之StructureMap框架

    DI  依赖注入之StructureMap框架 一.简叙: structureMap只是DI框架中的其中之一. 二.安装及使用: 1.懒人方法: 使用MVC5项目时,可以直接在nuget程序包中安装S ...

  9. UML uml高级知识之用例图

    uml高级知识之用例图 建模工具推荐使用 visio2010: include:选择菜单栏中的'UML'->单击’构造型‘->新建->构造型那里输入include->基类那里选 ...

  10. windows 多个人同时远程同一台电脑

    windows  多个人同时远程同一台电脑 第一步:(内外远程) 参考内网多个人同时远程一台电脑: http://www.cnblogs.com/zlp520/p/7688984.html 第二步:( ...