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

xAxis : [

            {

                type : ‘category‘,

//                 name:‘额度‘,

        //这是设置的false,就不不显示下方的x轴,默认是true的

                show: false,

        //这里呢,就是每个柱的name了,根据实际情况下就好了,我就先写这三个

                data : [‘最多‘,‘平均‘,‘最少‘],

                axisLabel: {

             //这个是倾斜角度,也是考虑到文字过多的时候,方式覆盖采用倾斜

//                     rotate: 30,

            //这里是考虑到x轴文件过多的时候设置的,如果文字太多,默认是间隔显示,设置为0,标示全部显示,当然,如果x轴都不显示,那也就没有意义了

                    interval :0

                    }

            }

        ],

        yAxis : [

            {

                type : ‘value‘,

                name:‘数量‘,

          //下面的就很简单了,最小是多少,最大是多少,默认一次增加多少

                 min: 0,

                 max: 30,

                 interval: 6,

          //下面是显示格式化,一般来说还是用的上的

                 axisLabel: {

                     formatter: ‘{value} 包‘

                 }

            }

        ],

        series : [

            {

                name: ‘数量‘,

                type: ‘bar‘,

                itemStyle: {

                    normal: {

              //好,这里就是重头戏了,定义一个list,然后根据所以取得不同的值,这样就实现了,

                        color: function(params) {

                            // build a color map as your need.

                            var colorList = [

                              ‘#C1232B‘,‘#B5C334‘,‘#FCCE10‘,‘#E87C25‘,‘#27727B‘,

                               ‘#FE8463‘,‘#9BCA63‘,‘#FAD860‘,‘#F3A43B‘,‘#60C0DD‘,

                               ‘#D7504B‘,‘#C6E579‘,‘#F4E001‘,‘#F0805A‘,‘#26C0C0‘

                            ];

                            return colorList[params.dataIndex]

                        },

              //以下为是否显示,显示位置和显示格式的设置了

                        label: {

                            show: true,

                            position: ‘top‘,

//                             formatter: ‘{c}‘

                            formatter: ‘{b}\n{c}‘

                        }

                    }

                },

          //设置柱的宽度,要是数据太少,柱子太宽不美观~

          barWidth:70,

                data: [28,15,9,4,7,8,23,11,17]

            }

        ]

说明:其实还可以利用color来设置柱状图颜色,但是有时候color设置是没有效果的。所以就采用了上述方法。

原文地址:https://www.cnblogs.com/wssdx/p/11703627.html

时间: 2024-08-02 15:51:35

echarts柱状图颜色设置:echarts柱状图如何设置不同颜色?(代码)的相关文章

百度推出的echarts,制表折线图柱状图饼图等的超级工具

一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts的简介: ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRen

ECharts动态加载堆叠柱状图的实例

一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 100%; height: 400px;" id="main"> </div> 三.js代码(获取数据以及对数据的处理方法): function loadData(callback){ $.ajax({ url: 'test.json', dataType: 'js

easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字

先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text

echarts图例颜色与地图底色

本来想写echarts初始化函数的,但最近因为要写一个地图与柱状图的混合方式,也就是每个省的地图上要有柱状图显示.于是仔细使用了一下地图. 1.地图的一些基本属性就不介绍了,还是那些style 2.地图数据的获取以及Series的加载和其他没有什么大的差异.地图数据都在map.js中,都可以自己看,也可以自己根据格式获取响应的数据. 这里主要想处理的是图例颜色与地图底图颜色怎么设置的问题. 1.图例的颜色代码 refresh: function (newOption) { if (newOpti

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

在做配置页面的时候,有这样一个需求,用户可以选择配置是单色柱状图或者彩色的柱状图,并且颜色可以自定义的 思路:首先默认构建一个一个空的图表,然后根据记录上一次操作保存过来的参数重新组建option的值,包括颜色(如下)清除option,在重组option 直接上代码 if(param.chartType=="singleBar"){//单色 option=$.getJLHZBarOption();//默认的option(自己写死的) option.color=params.colors

WORD底纹填充颜色为灰色-5%怎么设置?

操作步骤如下: 先选中要设定底纹的段落文字--点开菜单栏上的"格式"--找到"边框和底纹"选项.点开--点击"底纹"选项--"填充"选项下,第一排为"无填充颜色",然后在第二排的左起第二格就是"灰色-5%"--点击选中即可. 假如是设定"段落"底纹,那么还要在右边"应用于"选项下--选择"段落":假如是设定"文字&qu

Android实习札记(9)---设置Eclpise为护眼色与代码快速对齐

 Android实习札记(9)---设置Eclpise为护眼色与代码快速对齐 笔者的一些废话:(只是最近心情太差,吐槽下而已~) 感觉好久都没写博客了,看看上一次写博客是11月21号,已经有12天没有写自己的实习札记了, 不是没东西可以,只是最近真的是倒霉透了,一堆麻烦事,根本静不下心来,自己来到公司,第一二 个星期看看文档,写写小demo什么的,还过得去,日子还蛮滋润的,偶尔可以写下博文,但是第三个 星期开始就倒霉透了,因为笔者所在的公司是一间外包公司,可能是他们很久之前接的一个外包吧, 但是

Cocos2d-x实例:设置背景音乐与音效-设置场景实现

设置场景(Setting),Setting.h文件代码如下: [html] view plaincopy #ifndef __Setting_SCENE_H__ #define __Setting_SCENE_H__ #include "cocos2d.h" #include "SimpleAudioEngine.h" class Setting : public cocos2d::Layer { bool isEffect;                    

OS X系统 手势终极设置方法+BetterTouchTool详细设置中文翻译

相信用过罗技G系鼠标的同学都对罗技鼠标强大的自定义功能留下过深刻的印象.对于那些表示只愿追求简单拒绝功能复杂而去使用三键鼠标的同学,我很怀疑他们是否真正了解到多键鼠标或手势功能对电脑操作便捷上带来的重大意义.复制粘贴,前进后退,关闭等等这些操作看似简单,但有的需要键盘配合,有的需要右手精确操作(随着屏幕越来越大,鼠标为点击关闭等按钮而滑行的距离越来越长),如果这些操作都能由右手在盲操作的情况下完成,那将给电脑的使用体验带来巨大的变化. 在pc上一直使用逻辑G300,完美的官方驱动软件给小小的G3