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 的关系。 高频响应分析对电容耦合还是直接耦合都是适用的，因为在电容耦合中高频模式下…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M：百万（Million） B：十亿（Billion） 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的，但是一个参数所表示多少字节不一定，需要看这个参数以什么…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
智能仓储的未来：自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”，物流的终极形态正在诞生 想象这样的场景： 凌晨3点，某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径；AI视觉系统在0.1秒内扫描包裹信息；数字孪生平台正模拟次日峰值流量压力…...
Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store： 我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数 import { configureS…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）
题目描述 给定一个整型数组，请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3，则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组，0<数组长度<= 100，0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...
云安全与网络安全：核心区别与协同作用解析
在数字化转型的浪潮中，云安全与网络安全作为信息安全的两大支柱，常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异，并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全：聚焦于保…...