Echarts实现多柱状图重叠重叠效果
有两种重叠效果:
1. 多个柱子重叠为一个
2. 多个柱子重叠为两组
第一种,图例:
这个灰色不是阴影哦, 是柱子.
1. 使用详解
(1) series.Z
折线图组件的所有图形的 z 值。控制图形的前后顺序。
z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。
(2) series.barGap
不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。
如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用。
在同一坐标系上，此属性会被多个 'bar' 系列共享。此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，并且是对此坐标系中所有 'bar' 系列生效。
原始效果图:
实现代码:
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {tooltip: {trigger:"axis",formatter:"{a1}<br/>{b1}：{c1}%"},legend: {data:['增长率']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},color:['#ccc','red'],yAxis: {axisLabel:{formatter:"{value}%"}},series: [{name: '',type: 'bar',z:"-1",barGap: '-100%',data: [100, 100, 100, 100, 100, 100]},{name: '增长率',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>链接:https://blog.csdn.net/qq_38974638/article/details/109034722
第一个例子中的barGrp:-100%; 会将每个系列的柱子合为一个.
第二种, 图例:
由于同一Grid内, 有多组数据时, 取消图例会导致柱子居中, 所以, 采用一组柱子一组一Grid.
option = {tooltip: {...},legend: {silent: true,data: ['总楼宇数', '开盘楼宇数', '总车位数', '开盘车位数'],},grid: {},yAxis: {...},xAxis: [{type: 'category',data: ['2012', '2013', '2014', '2015']},{show: false,type: 'category',data: ['', '', '', '']},{show: false,type: 'category',data: ['', '', '', '']},{show: false,type: 'category',data: ['', '', '', '']}],series: [{name: '总楼宇数',type: 'bar',barWidth: '20%', data: [100, 100, 80, 80], xAxisIndex: 0},{name: '',type: 'bar', show:false, barWidth: '20%', data: [0, 0, 0, 0], xAxisIndex: 0},{name: '',type: 'bar',show:false, barWidth: '20%', data: [0, 0, 0, 0], xAxisIndex: 1},{name: '总车位数',type: 'bar',barWidth: '20%', data: [100, 133, 80, 80], xAxisIndex: 1},{name: '开盘楼宇数',type: 'bar',barWidth: '20%', data: [50, 33, 44, 55], xAxisIndex: 2},{name: '',type: 'bar',show:false, barWidth: '20%', data: [0, 0, 0, 0], xAxisIndex: 2},{name: '',type: 'bar',show:false, barWidth: '20%', data: [0, 0, 0, 0], xAxisIndex: 3},{name: '开盘车位数',type: 'bar',barWidth: '20%', data: [22, 11, 10, 22], xAxisIndex: 3},]
};
链接:https://blog.csdn.net/dahaiaixiaohai/article/details/120097616
相关文章：
Echarts实现多柱状图重叠重叠效果
有两种重叠效果: 1. 多个柱子重叠为一个 2. 多个柱子重叠为两组 第一种,图例: 这个灰色不是阴影哦, 是柱子. 1. 使用详解 (1) series.Z 折线图组件的所有图形的 z 值。控制图形的前后顺序。 z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先级更低，而且不会…...
PHP学习笔记（一谦四益）
前言 上一篇文章 PHP学习笔记（观隅反三）分享了数组的知识，这篇文章接着分享和数组相关的算法。 算法效率 算法效率分为两种：第一种是时间效率，第二种是空间效率。时间效率被称为时间复杂度，而空间效率被称…...
Jvm -堆对象的划分
堆对于一个jvm进程来说是唯一的，一个进程只有一个jvm，但是进程半酣多个线程，多个线程共享一个堆。 也就是说，一个jvm实例只存在一个堆，同时对也是Java内存管理的核心区域。 Java堆区域的大小在jvm启动时就已经被确定…...
2023美赛F题讲解+数据领取
我们给大家准备了F题的数据，免费领取！在文末 国内生产总值(GDP)可以说是一个国家经济健康状况最著名和最常用的指标之--。它通常用于确定一个国家的购买力和获得贷款的机会,为各国提出提高GDP的政策和项目提供动力。GDP“衡量一个国家在给定时间段内生产…...
【博客625】keepalived开启garp refresh的重要性
keepalived开启garp refresh的重要性 1、场景 1-1、对keepavlied master机器热迁移后出现vip不通，过后恢复 原因：机器迁移后网关那边的arp表没有刷新，流量还是转发到老的端口，但是机器已经迁移到别的端口了，于是网络…...
nginx防护规则，拦截非法字符，防止SQL注入、防XSS，nginx过滤url访问，屏蔽垃圾蜘蛛，WordPress安全代码篇
nginx防护规则，拦截非法字符，防止SQL注入、防XSS，nginx过滤url访问，屏蔽垃圾蜘蛛，WordPress安全代码篇 精心强化，小白一键复制 资源宝分享：www.httple.net 宝塔为例：/www/server/panel/vhost/nginx/你的网站域名.conf，复制代码点击保存 修改www.xx.net你自己域名incl…...
【计算机网络】网络层
文章目录网络层概述网络层提供的两种服务IPv4地址IPv4地址概述分类编址的IPv4地址划分子网的IPv4地址无分类编址的IPv4地址IPv4地址的应用规划IP数据报的发送和转发过程静态路由配置及其可能产生的路由环路问题路由选择路由选择协议概述路由信息协议RIP的基本工作原理开放最短路…...
产品经理知识体系：1.什么是互联网思维？
互联网思维 思考 笔记 用户思维 是要注重用户体验，产品带给用户的价值是什么，是能帮助用户获取想要的商品、解决生活中的问题、获取想要的信息，还是产品能通过兜售参与感、满足感等来满足用户的心理需求。 贯穿产品的整个生命周期过程。 简…...
【数据结构】单链表的接口实现（附图解和源码）
单链表的接口实现（附图解和源码） 文章目录单链表的接口实现（附图解和源码）前言一、定义结构体二、接口实现（附图解源码）1.开辟新空间2.头插数据3.头删数据4.打印整个单链表5.尾删数据6.查找单链表中的数据7…...
TikTok话题量超30亿，这款承载美好记忆的剪贴簿引发讨论
回忆风剪贴簿在TikTok引起关注小超在浏览超店有数后台时发现，有一款平平无奇的剪贴簿的种草视频爆火，在24h内收获了9.9K点赞，播放量更是突破了100W，直接冲到了【种草视频飙升榜】第六名的位置，并且这个数字目前仍在继续…...
了解Dubbo
1.注册中心挂了，消费者还能不能调用生产者？ 注册中心挂了， 消费者依然可以调用生产者。生产者和消费者都会在本地缓存注册中心的服务列表，当注册中心宕机时，消费者会读取本地的缓存数据，直接访问生产者&am…...
2023年前端面试知识点总结（JavaScript篇）
近期整理了一下高频的前端面试题，分享给大家一起来学习。如有问题，欢迎指正！ 1. JavaScript有哪些数据类型 总共有8种数据类型，分别是Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt Null 代表的含义是空对象…...
jQuery
文章目录jQuery 介绍初体验核心函数jQuery 对象和 dom 对象区分什么是 jQuery 对象，什么是 dom 对象问题：jQuery 对象的本质是什么？jQuery 对象和 Dom 对象使用区别Dom 对象和 jQuery 对象互转（重点）jQuery 选择器&…...
强化学习基础概念
强化学习入门 入门学习第一周：基础概念 经验回放： 将sss,agent当前步的action环与境的交互rrr以及下一步的状态st1s_{t1}st1组成的四元组[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wxhVd0dn-1676710992983)(null)] 组…...
Redis学习【9】之Redis RDB持久化
文章目录一 AOF(Append Only File) 持久化二 AOF 基础配置2.1 AOF的开启2.2 文件名配置2.3 混合式持久化开启2.4 AOF 文件目录配置三 AOF 文件格式3.1 Redis 协议3.2 查看 AOF 文件3.3 清单文件3.4 Rewrite 机制3.4.1 rewrite简介3.4.2 rewrite 计算策略3.4.3 手动开启 rewrite…...
分析 vant4 源码，学会用 vue3 + ts 开发毫秒级渲染的倒计时组件，真是妙啊
2022年11月23日首发于掘金，现在同步到公众号。11. 前言大家好，我是若川。推荐点右上方蓝字若川视野把我的公众号设为星标。我倾力持续组织了一年多源码共读，感兴趣的可以加我微信 lxchuan12 参与。另外，想学源码，极力推…...
事件驱动型架构
事件驱动型架构是一种软件设计模式，其中微服务会对状态变化（称为“事件”）作出反应。事件可以携带状态（例如商品价格或收货地址），或者事件也可以是标识符（例如，订单送达或发货通知&a…...
20222023华为OD机试 - 不含 101 的数（Python）
不含 101 的数 题目 小明在学习二进制时，发现了一类不含 101 的数， 也就是将数字用二进制表示，不能出现 101 。 现在给定一个正整数区间 [l,r]，请问这个区间内包含了多少个不含 101 的数？ 输入 输入一行，包含两个正整数 l l l, r r r...
杭州电子科技大学2023年MBA招生考试成绩查询和复查申请的通知
根据往年的情况，2023杭州电子大学MBA考试初试成绩可能将于2月21日公布，最早于20号出来，为了广大考生可以及时查询到自己的分数，杭州达立易考教育为大家汇总了信息。根据教育部和浙江省教育考试院关于硕士研究生招生考试工作的统一…...
电子技术——CS和CE放大器的高频响应
电子技术——CS和CE放大器的高频响应 在绘制出MOS和BJT的高频响应模型之后，我们对MOS和BJT的高频响应有了进一步的认识。现在我们想知道的是在高频响应中 fHf_HfH 的关系。 高频响应分析对电容耦合还是直接耦合都是适用的，因为在电容耦合中高频模式下…...
装饰模式（Decorator Pattern）重构java邮件发奖系统实战
前言 现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中，RouterProvider 是一个核心组件，用于提供基于数据路由（data routers）的新型路由方案。 它替代了传统的 <BrowserRouter>，支持更强大的数据加载和操作功能（如 loader 和…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...
云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风，以**「云启出海，智联未来｜打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办，现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
NFT模式：数字资产确权与链游经济系统构建
NFT模式：数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新：构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议：基于LayerZero协议实现以太坊、Solana等公链资产互通，通过零知…...
uniapp中使用aixos 报错
问题： 在uniapp中使用aixos，运行后报如下错误： AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中，CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时，通常会导致应用响应缓慢，甚至服务不可用，严重影响用户体验和业务运行。因此，掌握一套科学有效的CPU飙高问题排查方法&…...