echarts 堆叠柱状图 顶部添加合计

堆叠有3个,后面加了一个对象显示顶部的数据,

其实主要的代码还是在series 的第四项,需要注意的是

 series的第四项中的data需要为 data: [0, 0, 0]     顶部的统计才能显示出来

增加的代码如下

{name: '综合',type: 'bar',stack: 'total',label: {show: true,position: 'top',formatter: (p) => {let arr1 =[100, 302, 301]let arr2 =[320, 132, 101]let arr3 =[220, 182, 191]return arr1[p.dataIndex] + arr2[p.dataIndex] + arr3[p.dataIndex]}},emphasis: {focus: 'series'},data: [0, 0, 0]}

完整代码如下  可以在 echarts  中直接运行

option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {left: '4%',right: '1%',bottom: '2%',top: '15%',containLabel: true},xAxis: {type: 'category',axisLine: {show: false},axisTick: {show: false},axisLabel: {show: true},data: ['1月', '2月', '3月']},yAxis: [{type: 'value',name: '(个)',nameTextStyle: {padding: [0, 0, 0, -36] // 上右下左与原位置距离},splitLine: {show: true,lineStyle: {type: 'dashed'}},axisLine: {show: false},axisTick: {show: false}}],series: [{name: '近两个月复购客户数',type: 'bar',stack: 'total',barWidth: '40%',itemStyle: {color: '#3AA0FF'},label: {show: true,color: '#fff',fontSize: '14px',formatter: (params) => params.value},emphasis: {focus: 'series'},data: [100, 302, 301]},{name: '近三个月复购客户数',type: 'bar',stack: 'total',barWidth: '40%',itemStyle: {color: '#4ECB73'},label: {show: true,color: '#fff',fontSize: '14px',formatter: (params) => params.value},emphasis: {focus: 'series'},data: [320, 132, 101]},{show: false,name: '近四个月复购客户数',type: 'bar',stack: 'total',barWidth: '40%',itemStyle: {color: '#FF892B'},label: {show: true,color: '#fff',fontSize: '14px',formatter: (params) => params.value},emphasis: {focus: 'series'},data: [220, 182, 191]},{name: '综合',type: 'bar',stack: 'total',label: {show: true,position: 'top',formatter: (p) => {let arr1 =[100, 302, 301]let arr2 =[320, 132, 101]let arr3 =[220, 182, 191]return arr1[p.dataIndex] + arr2[p.dataIndex] + arr3[p.dataIndex];}},emphasis: {focus: 'series'},data: [0, 0, 0]}]
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/3108.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux网络加固操作

查看防火墙状态 systemctl status firewalld 查看开放的端口 firewall-cmd --list-ports 查看特定端口是否开放 firewall-cmd --query-port22/tcp 添加端口 firewall-cmd --zonepublic --add-port80/tcp --permanent 添加富规则禁止访问3306端口 firewall-cmd --permanent …

【Java框架】SpringMVC(三)——异常处理,拦截器,文件上传,SSM整合

目录 异常处理解释局部异常处理全局异常 拦截器拦截器介绍作用:拦截器和过滤器之间的区别拦截器执行流程代码实现补充 文件上传依赖配置MultipartResolver编写文件上传表单页APIMultipartFileFile.separator必须对上传文件进行重命名代码示例 SpringMVC文件上传流程多文件上传 …

算法训练营day22

一、二叉搜索树的最近公共祖先 class Solution {public TreeNode lowestCommonAncestor(TreeNode root, TreeNode p, TreeNode q) {//得到p q的最大值&#xff0c;跟root比较//max < root 向左遍历 &#xff0c;max > root 继续比较 min > root 向右遍历; min < r…

AWS制作WordPress在国内外的利弊?

AWS作为全球领先的云计算服务供应商&#xff0c;为WordPress提供了强大且灵活的托管环境&#xff0c;使用AWS来搭建和运行WordPress无疑是个不错的选择。即便如此使用AWS制作还是会有些许利弊&#xff0c;九河云作为AWS的合作伙伴来为读者们仔细探讨AWS在WordPress的利弊。 利&…

学python的第十九天

网络通信和访问数据库 1.1 基本的网络知识 TCP/IP IP是低级的路由协议&#xff0c;它将数据拆分在许多小的数据包中&#xff0c;并通过网络将他们发送到某一特定地址&#xff0c;但无法保证所有包都抵达目的地&#xff0c;也不能保证包按顺序抵达 TCP&#xff08;传输控制协议…

深度学习系列65:数字人openHeygen详解

1. 主流程分析 从inference.py函数进入&#xff0c;主要流程包括&#xff1a; 1&#xff09; 使用cv2获取视频中所有帧的列表&#xff0c;如下&#xff1a; 2&#xff09;定义Croper。核心代码为69行&#xff1a;full_frames_RGB, crop, quad croper.crop(full_frames_RGB)。…

本地wsl的Ubuntu安装docker,不使用docker桌面版

第一步&#xff1a;安装docker引擎 建议大家去docker官网那边看 Install Docker Engine on Ubuntu | Docker Docs 第二步&#xff1a;使用以下命令 sudo update-alternatives --config iptables 选1就对了 第三步&#xff1a;启动docker service docker start

Android MVVM架构 + Retrofit完成网络请求

关于Retrofit&#xff0c;这个应该不是一个很新颖的东西了&#xff0c;简单过一下吧 1.由Square公司开发&#xff0c;基于Type-safe的REST客户端。 2.使用注解来定义API接口&#xff0c;使得HTTP请求变得简洁且易于维护。 3.支持同步和异步请求&#xff0c;可与RxJava、Corouti…

【安卓13】解决带GMS编译报super分区空间不足错误

1、错误信息 2、解决方案 不同供应商修改分区大小的文件路径不一样&#xff0c;但是万变不离其宗&#xff0c;根据报错信息全局搜索关键词BOARD_SUPER_PARTITION_SIZE 这里以RK供应商和AML供应商修改为例&#xff1a; &#xff08;1&#xff09;RK改法&#xff1a; 根目录下…

全光谱灯对人体的危害?谨记全光谱灯选购要避开的四大套路

全光谱灯对人体的危害有多大&#xff1f;近年来网上关于护眼台灯对视力有害的言论有很多&#xff0c;引发了很多人空前的关注&#xff0c;事实上这未必是一件坏事&#xff0c;因为随着护眼台灯的热度持续上涨&#xff0c;市面上浑水摸鱼的行为增多了不少&#xff0c;有着不少劣…

图论基础知识 并查集/例题

并查集 学习记录自代码随想录 并查集可以解决的问题&#xff1a; 并查集常用来解决连通性问题。 判断两个元素是否在同一个集合里的时候&#xff0c;要想到用并查集。 并查集主要有两个功能&#xff1a; 1.将两个元素添加到一个集合中&#xff1b; 2.判断两个元素在不在同一…

STM32H7使用FileX库BUG,SD卡挂载失败

问题描述&#xff1a; 使用STM32H7ThreadXFileX&#xff0c;之前使用swissbit牌的存储卡可正常使用&#xff0c;最近项目用了金士顿的存储卡&#xff0c;发现无法挂载文件系统。 原因分析&#xff1a; 调试过程发现&#xff0c;关闭D-Cache可以挂载使用exfat文件系统。 File…

QT5.12.12配置MSVC2017编译器环境

QT5.12.12配置MSVC2017编译器环境&#xff1a; &#xff08;失败&#xff0c;转成Mingw&#xff09; 编译器 目前的主流编译器应该是三种。GNU(Gcc,g), Clang/llvm和MSVC。来看一下GPT的回答。 GNU&#xff08;GCC&#xff09;: 优点&#xff1a;   跨平台支持&#xff1…

C# 扩展运算符(...)的详细解析

在C#编程中&#xff0c;扩展运算符&#xff08;…&#xff09;是一种非常有用的特性&#xff0c;它可以将一个数组或集合转换成一个可迭代的序列。扩展运算符在C# 7.0及以后的版本中引入&#xff0c;提供了一种简洁的方式来创建数组、列表或集合的实例&#xff0c;尤其是在需要…

一文看够,植物线粒体基因组分析套路

线粒体堪称生命活动的“能量供给站”&#xff0c;植物线粒体是线粒体基因组研究中难度最高的&#xff0c;其基因组大小差异较大&#xff0c;100kb-10Mb&#xff0c;大部分由非编码DNA序列组成&#xff0c;且有许多同源序列&#xff0c;占基因组总长的2%-60%&#xff0c;基因间区…

制作github.io学术个人主页

制作如图的学术个人主页。About me - Xianwen Ling’s Blog 学术个人主页是一个学者展示个人学术成果和研究方向的重要工具。个人主页可以集中展示学者的研究论文、出版物、演讲和发布的项目等学术成果&#xff0c;这样其他人可以更方便地了解和评估学者的研究贡献。个人主页可…

Maven 安装及配置教程(Windows)【安装】

文章目录 一、 下载1. 官网下载2. 其它渠道 二、 安装三、 配置四、 验证五、 本地仓储配置六、 配置镜像七、 配置JDK八、完整配置九、常用命令十、IDEA 中配置 Maven1. 配置当前项目2. 配置新建 / 新打开 项目 软件 / 环境安装及配置目录 一、 下载 1. 官网下载 安装地址&a…

书生·浦语大模型第二期实战营第七节-OpenCompass 大模型评测实战 笔记和作业

来源&#xff1a; 视频教程&#xff1a;https://www.bilibili.com/video/BV1Pm41127jU/?spm_id_from333.788&vd_sourcef4a51f7f5a63e756f73ad0dff318c1a3 文字教程&#xff1a;https://github.com/InternLM/Tutorial/blob/camp2/opencompass/readme.md 作业来源&#x…

【Hadoop】- MapReduce YARN 初体验[9]

目录 提交MapReduce程序至YARN运行 1、提交wordcount示例程序 1.1、先准备words.txt文件上传到hdfs&#xff0c;文件内容如下&#xff1a; 1.2、在hdfs中创建两个文件夹&#xff0c;分别为/input、/output 1.3、将创建好的words.txt文件上传到hdfs中/input 1.4、提交MapR…

HotSpot JVM 中的应用程序/动态类数据共享

0.前言 本文的目的是详细讨论 HotSpot JVM 自 JDK 1.5 以来提供的一项功能&#xff0c;该功能可以减少启动时间&#xff0c;但如果在多个 JVM 之间共享相同的类数据共享 (CDS) 存档&#xff0c;则还可以减少内存占用。 1.类数据共享 (CDS) CDS 的想法是使用特定格式将预处理…