echart柱形堆积图-同一组堆积柱子设置同一种颜色

2024-02-29 12:20

本文主要是介绍echart柱形堆积图-同一组堆积柱子设置同一种颜色,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

//权限申请人员增长柱状图
personCountOption = {backgroundColor:'#fff',
    tooltip : {trigger: 'axis',
        padding:10,
        axisPointer : {type : 'none'
        }},
    // color:['#E50216'],
    calculable : true,
    grid: {x: 45,
        x2: 15,
        y: 0,
        y2: 15,
        backgroundColor:'#fff',
        borderWidth: 0
    },
    yAxis : [{type : 'value',
            axisLine:{show:false,
                lineStyle:{color:'#DDDDDD',
                    width:1
                }},
            splitLine:{show:false
            },
            axisLabel:{show:false,
                textStyle:{color:'#999'
                }}}],
    xAxis   : [{type : 'category',
            axisLine:{show:false,
                lineStyle:{color:'#DDDDDD',
                    width:0
                }},
            splitLine:{show:false
            },
            axisTick:{show:false
            },
            axisLabel:{show:false,
                textStyle:{color:'#999'
                }},
            data: function () {var list = [];
                for(var i = 1;i<=12;i++){list.push(i+'月份');
                }return list;
            }()}],
    series : [{name:'回收授权',
            type:'bar',
            stack: '总量',
            // barWidth:20,
            itemStyle : {normal: {barBorderRadius: [0, 0, 4, 4],
                    label : {show: false},
                    color: function(params) {var colorList = [     //柱子颜色
                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                            '#D7504B','#C6E579','#F4E001'
                        ];
                        return colorList[params.dataIndex]}}},
            data:[1, 1, 2, 2, 3, 5,1, 1, 2, 3, 3, 5]},
        {name:'已拒绝',
            type:'bar',
            stack: '总量',
            // barWidth:20,
            itemStyle : {normal: {label : {show: false},
                    color: function(params) {var colorList = [     //柱子颜色
                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                            '#D7504B','#C6E579','#F4E001'
                        ];
                        return colorList[params.dataIndex]}}},
            data:[1, 2, 2, 1, 3, 5,1, 2, 2, 1, 3, 5]},
        {name:'已授权',
            type:'bar',
            stack: '总量',
            // barWidth:20,
            itemStyle : {normal: {label : {show: false},
                    color: function(params) {var colorList = [     //柱子颜色
                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                            '#D7504B','#C6E579','#F4E001'
                        ];
                        return colorList[params.dataIndex]}}},
            data:[11, 15, 5, 8, 4, 6,11, 15, 5, 8, 4, 6]},
        {name:'待处理',
            type:'bar',
            stack: '总量',
            // barWidth:20,
            itemStyle : {normal: {label : {show: false},
                    color: function(params) {var colorList = [     //柱子颜色
                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                            '#D7504B','#C6E579','#F4E001'
                        ];
                        return colorList[params.dataIndex]}}},
            data:[9, 8, 5, 9, 2, 10,9, 8, 5, 9, 2, 10]},
        {name:'总数',
            type:'bar',
            stack: '总量',
            // barWidth:20,
            itemStyle : {normal: {barBorderRadius: [4, 4, 0, 0],
                    label : {show: false},
                    // color:'#E50216'
                    color: function(params) {var colorList = [     //柱子颜色
                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                            '#D7504B','#C6E579','#F4E001'
                        ];
                        return colorList[params.dataIndex]}}},
            data:[20, 30, 25, 35, 50, 60,20, 30, 25, 35, 50, 60]
        }]
};
附图:

这篇关于echart柱形堆积图-同一组堆积柱子设置同一种颜色的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/caiyongshengCSDN/article/details/79095332
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/758766

相关文章

python设置环境变量路径实现过程

《python设置环境变量路径实现过程》本文介绍设置Python路径的多种方法:临时设置(Windows用`set`,Linux/macOS用`export`)、永久设置(系统属性或shell配置文件... 目录设置python路径的方法临时设置环境变量(适用于当前会话)永久设置环境变量(Windows系统

Go语言编译环境设置教程

《Go语言编译环境设置教程》Go语言支持高并发(goroutine)、自动垃圾回收,编译为跨平台二进制文件,云原生兼容且社区活跃,开发便捷,内置测试与vet工具辅助检测错误,依赖模块化管理,提升开发效... 目录Go语言优势下载 Go  配置编译环境配置 GOPROXYIDE 设置(VS Code)一些基本

小白也能轻松上手! 路由器设置优化指南

《小白也能轻松上手!路由器设置优化指南》在日常生活中,我们常常会遇到WiFi网速慢的问题,这主要受到三个方面的影响,首要原因是WiFi产品的配置优化不合理,其次是硬件性能的不足,以及宽带线路本身的质... 在数字化时代,网络已成为生活必需品,追剧、游戏、办公、学习都离不开稳定高速的网络。但很多人面对新路由器

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

linux hostname设置全过程

《linuxhostname设置全过程》:本文主要介绍linuxhostname设置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录查询hostname设置步骤其它相关点hostid/etc/hostsEDChina编程A工具license破解注意事项总结以RHE

Python设置Cookie永不超时的详细指南

《Python设置Cookie永不超时的详细指南》Cookie是一种存储在用户浏览器中的小型数据片段,用于记录用户的登录状态、偏好设置等信息,下面小编就来和大家详细讲讲Python如何设置Cookie... 目录一、Cookie的作用与重要性二、Cookie过期的原因三、实现Cookie永不超时的方法(一)

Qt 设置软件版本信息的实现

《Qt设置软件版本信息的实现》本文介绍了Qt项目中设置版本信息的三种常用方法,包括.pro文件和version.rc配置、CMakeLists.txt与version.h.in结合,具有一定的参考... 目录在运行程序期间设置版本信息可以参考VS在 QT 中设置软件版本信息的几种方法方法一:通过 .pro

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

PostgreSQL 默认隔离级别的设置

《PostgreSQL默认隔离级别的设置》PostgreSQL的默认事务隔离级别是读已提交,这是其事务处理系统的基础行为模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一 默认隔离级别概述1.1 默认设置1.2 各版本一致性二 读已提交的特性2.1 行为特征2.2

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2