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 的关系。 高频响应分析对电容耦合还是直接耦合都是适用的，因为在电容耦合中高频模式下…...
2023年数学建模美赛D题（Prioritizing the UN Sustainability Goals）：SDGs 优先事项的选择
正在写，不断更新，别着急。。。 4. SDGs 优先事项的选择 4.1 基于SDG密度分布图选择优先事项 虽然每个可持续发展目标的接近度矩阵和中心性度量的结果是通用的，并创建了基本的可持续发展目标网络，但由于各国在网络的不同部分取得…...
springboot实现项目启动前的一些操作
在服务启动时，做一些操作，比如加载配置，初始化数据，请求其他服务的接口等。 有三种方法： 第一种是实现CommandLineRunner接口 第二种是实现ApplicationRunner接口 第三种是使用注解：PostConstruct 三者使用…...
详解JavaScript的形参，实参以及传参
文章目录 前言一、参数是什么？二、形参和实参 1.形参 2.实参三、传参 1.参数传递的对应关系2.两个传参的例子 总结前言 编程初学者在接触JavaScript这门语言时，很难搞懂里面的逻辑，这就会导致入门慢，入门难。这种难度一般…...
Vue中的diff算法
diff算法介绍 diff算法是一种高效对比算法。diff算法在组件更新即响应式数据监控到数据的改变，重新生成虚拟DOM树的时候调用，然后通过diff算法计算出前后虚拟dom树的差异点，更新dom时只更新变化的部分。 直接比较和修改两个数的复杂度为什么…...
【面试题】前端春招第二面
不容错过的一些面试题小细节，话不多说，直接看题~大厂面试题分享 面试题库后端面试题库 （面试必备） 推荐：★★★★★地址：前端面试题库HTML/CSS/Javascript/ES篇（1）标准盒模型和怪异盒…...
Pytorch 基础之张量数据类型
学习之前：先了解 Tensor（张量） 官方文档的解释是： 张量如同数组和矩阵一样, 是一种特殊的数据结构。在PyTorch中, 神经网络的输入、输出以及网络的参数等数据, 都是使用张量来进行描述。 说白了就是一种数据结构 基本数据类型…...
Java 基础面试题——常见类
目录1.String 为什么是不可变的？2.字符串拼接用“” 和 StringBuilder 有什么区别?3.String、StringBuffer 和 StringBuilder 的区别是什么?4.String 中的 equals() 和 Object 中的 equals() 有何区别？5.Object 类有哪些常用的方法？6.如何获…...
Windows 系统从零配置 Python 环境，安装CUDA、CUDNN、PyTorch 详细教程
文章目录1 配置 python 环境1.1 安装 Anaconda1.2 检查环境安装成功1.3 创建虚拟环境1.4 进入/退出 刚刚创建的环境1.5 其它操作1.5.1 查看电脑上所有已创建的环境1.5.2 删除已创建的环境2 安装 CUDA 和 CUDNN2.1 查看自己电脑支持的 CUDA 版本2.2 安装 CUDA2.3 安装 CUDNN2.4 …...
[REDIS]redis的一些配置文件
修改配置文件 vim /etc/redis/redis.conf目录 protected-mode tcp-backlog timeout tcp-keepalive daemonize pidfile loglevel databases 设置密码 maxclients maxmemory maxmemory-policy maxmemory-samples 默认情况下 bind127.0.0.1 只能接受本机的访问请求。在不写的情况…...
Java反序列化漏洞——CommonsCollections4.0版本—CC2、CC4
一、概述4.0版本的CommonsCollections对之前的版本做了一定的更改，那么之前的CC链反序列化再4版本中是否可用呢。实际上是可用的，比如CC6的链，引入的时候因为⽼的Gadget中依赖的包名都是org.apache.commons.collections ，⽽新的包…...
北京做网站那家好/新闻最近的新闻
作者：Jamie Hannaford翻译：bbbmj（才云）校对：bot（才云）源代码解释版（强烈建议阅读）：https://github.com/bbbmj/what-happens-when-k8s想象一下，当你…...
黄色的html代码/seo下拉优化
1.下载安装qrcodejs2包 npm i qrcodejs2 2.导入 import QRCode from "qrcodejs2"; 3.html <div class"qrcode" id"qrcode"></div> //class是我的样式可以忽略，但是id一定要下 4.使用，以下是我的代码&…...
wordpress多语言生成工具/百度收录提交网址
原文 http://www.cnblogs.com/meteoric_cry/p/4285881.html主题 curllibcurl参数很多，一不小心就容易遇到问题。曾经就遇到过一个很蛋疼的问题：libcurl断点下载>> 这里主要汇总一下，libcurl上传的二种方式： 1、直接上传文件…...
最早做团购的网站/精准营销案例
ioriiod0/orchid GitHub什么是orchid?orchid是一个构建于强大的boost库基础上的C库，类似于python下的gevent/eventlet，为用户提供基于协程的并发模型。什么是协程：协程，顾名思义，协作式程序，其思想是&…...
iapp用网站做软件代码/什么是软文推广
欢迎观看Illustrator教程，小编带大家学习Illustrator2022的基本工具和使用技巧，了解如何在 Illustrator 中创建、编辑以及应用自定义渐变。 Illustrator 提供多种着色方式， 让您可以创造性地运用色彩，包括在图稿上应用渐变。渐变…...
网站代码如何导入/必应搜索推广
Problem F: C语言习题 折半查找 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 5189 Solved: 2102 [Submit][Status][Web Board] Description 有n个数（n<20）,已按从大到小顺序存放在一个数组中，输入一个数，要求用折半查…...