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,一经查实,立即删除!

相关文章

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

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

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

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

学python的第十九天

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

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

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

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

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

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

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

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

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

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

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

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

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

制作github.io学术个人主页

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

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

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

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

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

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

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

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

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

状态模式和策略模式对比

状态模式和策略模式都是行为型设计模式,它们的主要目标都是将变化的行为封装起来,使得程序更加灵活和可维护。之所以将状态模式和策略模式进行比较,主要是因为两个设计模式的类图相似度较高。但是,从状态模式和策略模式的应用场景…

Pulsar Meetup 深圳 2024 会务介绍

“ Hi,各位热爱 Pulsar 的小伙伴们,Pulsar Meetup 深圳 2024 报名倒计时啦,快来报名。这里汇集了腾讯、华为和谙流科技等大量 Pulsar 大咖,干货多多,礼品多多,不容错过啊。 ” 活动介绍 由 AscentStream 谙…

Python 0基础_变现_38岁_day 16(文件操作)

在python,使用内置函数open()进行文件的一些读写操作 文件操作格式:open(文件路径,访问模式,字符编码) 前面两个参数是必备参数,后面的字符编码为选填,但是大多数情况下都会协商字符编码 访问模式 r 只读 w…

数码摄影色彩构成,数码相机色彩管理

一、资料描述 本套摄影色彩资料,大小58.54M,共有6个文件。 二、资料目录 《抽象彩色摄影集》.阿瑟.pdf 《色彩构成》.pdf 《色彩学》.星云.扫描版.pdf 《摄影色彩构成》.pdf 《数码相机色彩管理》.pdf 数码摄影进阶之4《色彩篇》.pdf 三、资料下…

解决IDEA中Tomcat控制台乱码问题(包括sout输出乱码)

文章目录 前言一、控制台直接输出乱码二、sout输出内容在控制台显示乱码 前言 今天在使用Tomcat的时候发现控制台输入出现了乱码问题,其实之前就出现过一次,解决了,但是新创建一个项目后又会出现sout的内容在控制台输出的乱码问题&#xff0…

Windows下Git的使用

目录 一、克隆远程仓库到本地二、git的三板斧2.1 add-将代码添加到本地仓库2.2 commit-提交代码到本地仓库2.3 push-推送本次添加操作到远程仓库2.4 gitee只有三板斧吗? 三、推送后没有出现绿点四、push到远程时报错五、git图形化界面下载链接 一、克隆远程仓库到本…