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 的关系。 高频响应分析对电容耦合还是直接耦合都是适用的，因为在电容耦合中高频模式下…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
（十）学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如 中文，英文，日语），语音情感（如 开心，悲伤）&#x…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中，可以通过监听键盘的显示和隐藏事件，动态调整弹窗的位置。关键点在于获取键盘高度，并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）
本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...