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

时间: 2024-10-05 05:01:57

关于echar彩色柱状图颜色配置问题的相关文章

echarts柱状图颜色设置:echarts柱状图如何设置不同颜色?(代码)

xAxis : [             {                 type : 'category', //                 name:'额度', //这是设置的false,就不不显示下方的x轴,默认是true的                 show: false, //这里呢,就是每个柱的name了,根据实际情况下就好了,我就先写这三个                 data : ['最多','平均','最少'],                 axisL

echarts图表x轴文字显示不全问题及柱状图颜色调整

var myChart= echarts.init(document.getElementById('myChart')); option = { title: { // text: '纯属虚构', }, tooltip: { trigger: 'axis' }, grid: { left: '5%',//左边距 right: '5%',//走边距 top: 10,//上边距 bottom: 50,//下边距 containLabel: true }, xAxis: [ { type: 'cat

CAD打印线条太粗、线条颜色设置

不管你是使用打印机,还是将CAD转换为PDF文件,如果出现以下情况,线条太粗,根本看不清楚,怎么解决呢? 或者,不想通过图层复杂.繁琐的设置,想将各种颜色线条的CAD全部打印成黑白,或者指定某一种颜色,或者只将某一种颜色打印成彩色其它颜色为黑白,怎么办? 方法其实非常简单,就在CAD的打印设置里面,只是平时你可能没有注意. 改变CAD线条粗细的方法: 改变线条颜色的方法(和上述方法前面步骤相同):

(转载)MatLab绘图

转载自:http://www.cnblogs.com/hxsyl/archive/2012/10/10/2718380.html 转载自:http://www.cnblogs.com/jeromeblog/p/3396494.html plot选项: 一 基础功能 二维图形 一. plot函数① 函数格式:plot(x,y)  其中x和y为长度相同                     坐标向量     函数功能:以向量x.y为轴,绘制曲线. [例] 在区间0≤X≤2?内,绘制正弦曲线y=si

Matlab绘图高级部分

转载自:http://www.cnblogs.com/jeromeblog/p/3396494.html 图形是呈现数据的一种直观方式,在用Matlab进行数据处理和计算后,我们一般都会以图形的形式将结果呈现出来.尤其在论文的撰写中,优雅的图形无疑会为文章加分.本篇文章非完全原创,我的工作就是把见到的Matlab绘图代码收集起来重新跑一遍,修改局部错误,然后将所有的图贴上来供大家参考.大家可以先看图,有看中的可以直接把代码Copy过去改成自己想要的. 1 2 3 4 5 6 7 8 9 10 1

Android绘制优化(一)绘制性能分析

前言 一个优秀的应用不仅仅是要有吸引人的功能和交互,同时在性能上也有很高的要求.运行Android系统的手机,虽然配置在不断的提升,但仍旧无法和PC相比,无法做到PC那样拥有超大的内存以及高性能的CPU,因此在开发Android应用程序时也不可能无限制的使用CPU和内存,如果对CPU和内存使用不当也会造成应用的卡顿和内存溢出等问题.因此,应用的性能优化对于开发人员有着更高的要求.Android性能优化分为很多种,比较常用的有绘制优化.内存优化.耗电优化和稳定性优化等,这个系列我们就来学习性能优化

图表操作

1.图表:用来更加直观的显示数据  名字:Chart,是在.NET4.0框架和更高版本中存在 1.添加标题:属性里的Titles集合,添加一个标题 2.指定数据源:DataSource 3.添加,移除Series,修改Series的标识名 4.绑定显示数据 chart1.DataSource=da.SelectAll()   造一个指定数据源 绑定X轴显示的数据: chart1.Series["Series1"].XValueMember = "Name"; 绑定Y

dotnetcharting 的简单使用

dotnetcharting 是一个很好用的图表控件,能画出很漂亮的报表,一般常用到的主要有柱状图.饼图.折线图三种. dotnetcharting 有web版.winform版多个版本可供使用,官方网址:http://www.dotnetcharting.com/ ,官网有很多示例(http://www.dotnetcharting.com/gallery/),而且有winform安装版示例和代码,如下图. dotnetcharting 有网上破解版的,去博客园或谷歌一搜一堆. 说下个人感受,

TaskController.java-20160611

package main.java.com.zte.controller.system; import java.io.PrintWriter;import java.util.ArrayList;import java.util.Arrays;import java.util.HashMap;import java.util.List;import java.util.Map; import javax.annotation.Resource; import net.sf.json.JSONA