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

news2024/11/19 0:44:58

堆叠有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.coloradmin.cn/o/1620837.html

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

相关文章

tcp inflight 守恒算法的几何解释

接上文:tcp inflight 守恒算法背后的哲学 在 tcp inflight 守恒算法正确性 中,E bw / srtt 的公平最优解是算出来的,如果自然可以用数学描述,那能算出来的东西反过来也一定能通过直感看出来,我倾向于用几何和力学描述…

Linux 深入理解Linux文件系统与日志分析

在Linux系统中,文件名和文件数据是分开存储的 文件数据包含 元信息(即不包含文件名的文件属性) 和 实际数据 文件元信息存储在 inode(索引节点)里, 文件实际数据存储在 block(块)里; 文件名存储在目录块里 查看文件的元信息 stat 文件名 [ro…

Maven基础篇7

私服-idea访问私服与组件上传 公司团队开发流程 本地上传–>repository–>私服 其他成员从私服拿 1.项目完成后发布到私服 在pom文件最后写上发布的配置管理 ​ //写发布的url也就是你发布到哪一个版本,以及写入id ​ ​ 发布的时候,将项…

ubuntu20 中设置桌面背景任务

1. 下载conky 使用 Conky 在 Ubuntu 中显示信息,例如你的阅读计划,可以分几个步骤来完成。Conky 是一款灵活的轻量级系统监视器,能够在桌面上显示各种信息。以下是基本的设置步骤: 安装 Conky 首先,你需要在 Ubuntu…

【Linux学习】Linux进程(二)

文章目录 📕查看进程🚀/proc目录🚀cwd与exe 📕改变进程的工作目录🚀chdir指令 📕vim卡住了怎么解决 本篇文章接着【LInux进程(一)】继续编写。 📕查看进程 &#x1f68…

java使用trim方法和replaceAll方法去除空格之后,还存在空格

今天使用其他人的一个功能,发现生成的映射少了一个,后面去代码里面debug发现是字符串中左边空格没有去除导致。查看代码,里面是使用了字符串.trim().replaceAll(" ", "")去除空格的。这个代码虽然能去除(半角…

windows查看xxx的版本号

node -v python --version redis-server --version java -version go version mvn -version git --version

工业抗振动和姿态控制的传感器:XV7021BB

针对工业应用的抗振动和姿态控制的陀螺仪传感器XV7021BB。XV7021BB陀螺仪传感器的电源电压(VDDM)均为2.7V~3.6V,接口电源电压(VDDI)范围为1.65V~3.6V,较低的电压需求便于应用电路的设计;XV7021BB内置温度传感器,并集成了用户可选数字滤波器&a…

Redis入门到通关之数据结构解析-Dict

文章目录 概述构成Dict的扩容Dict的rehash总结 欢迎来到 请回答1024 的博客 🍓🍓🍓欢迎来到 请回答1024的博客 关于博主: 我是 请回答1024,一个追求数学与计算的边界、时间与空间的平衡,0与1的延伸的后端开…

华为机考入门python3--(18)牛客18- 识别有效的IP地址和掩码并进行分类统计

分类:字符串 知识点: 字符串是否由数字组成 my_str.isdigit() 字符串填充 不足8位左侧填充0 my_str.zfill(8) 题目来自【牛客】 import sys def classify_ip(ip_mask): ip_class, is_private_ip, mask_class ignore_ip, 0, valid_mask# 解…

为什么大模型训练需要GPU,以及适合训练大模型的GPU介绍

文章目录 前言 1、为什么大模型训练需要GPU,而非CPU 2、现在都有哪些合适的GPU适合训练,价格如何 前言 今天偶然看到一篇关于介绍GPU的推文,我们在复现代码以及模型训练过程中,GPU的使用是必不可少的,那么大模型训练需…

如何评价微软发布的Phi-3,手机都可以运行的小模型

前几天才刚刚发布了Llama 3,今天微软就出手了,发布了小而精的phi-3 添加图片注释,不超过 140 字(可选) 刚刚发布的Phi-3系列小模型技术报告,引起AI圈热议。 添加图片注释,不超过 140 字&#x…

DHCP和DNS

DHCP和DNS 一、DHCP服务 1.简介 Dynamic Host Configuration Protocol(DHCP动态主机配置协议) 可以能看见下面的IP、子网掩码、默认网关、DNS都是自动获取得到。但是它是怎么自动获取的,别急我给大家来介绍下 2.DHCP原理 介绍前先给大家…

移动端日志采集与分析最佳实践

前言 做为一名移动端开发者,深刻体会日志采集对工程师来说具有重要意义,遇到问题除了 debug 调试就是看日志了,通过看日志可以帮助我们了解应用程序运行状况、优化用户体验、保障数据安全依据,本文将介绍日志采集的重要性、移动端…

接口测试|超详细面试题【附答案】

今天给姐妹们整理了一套超详细的附答案的接口测试面试题,姐妹们快学起来吧~ 接口测试的重要性,相信不用我多说了。接口测试是现在软件测试工程师一个加分项。因为很多朋友一开始做了几年的软件测试都是在做功能测试,做界面UI的测试&#xff…

(二)Go的Mysql、Redis、Cookie、Logger等的文件配置

初始化配置 文章目录 初始化配置一、配置yaml文件二、Go读取配置文件三、初始化日志Logger四、初始化数据库(MySQL或SqlLite)五、初始化缓存(Redis)六、中间件服务(middleware) 一、配置yaml文件 Server:M…

2024.4.24

求圆半径和周长 #include <iostream> using namespace std;struct Cir { private:int r; public:void set_r(int i);void show(); }; void Cir::set_r(int i)//设置半径 {r i; } void Cir::show()//打印周长面积 {double Pi 3.14;double l 2*Pi*r;double s Pi*r*r;c…

【pycharm】调试模式中四个常用按钮介绍

【pycharm】调试模式中四个常用按钮介绍 在 PyCharm 的调试模式中&#xff0c;有四个常用的按钮&#xff0c;它们的功能如下&#xff1a; Step Over (F8)&#xff1a;单步执行&#xff0c;但在遇到函数调用时&#xff0c;不会进入函数内部&#xff0c;而是将整个函数作为一步执…

技术速递|Java on Azure Tooling 3月更新 - Java on Azure 开发工具未来六个月路线图发布

作者&#xff1a;Jialuo Gan - Program Manager, Developer Division At Microsoft 排版&#xff1a;Alan Wang 大家好&#xff0c;欢迎阅读 Java on Azure 工具的三月更新。在本次更新中&#xff0c;我们将分享未来几个月对 Java on Azure 开发工具的投资。此外&#xff0c;我…

基础SQL DCL语句

DCL是数据控制语言&#xff0c;用来管理数据库用户&#xff0c;还有控制用户的访问权限 1.用户的查询 MySQL的用户信息存储在mysql数据库中&#xff0c;查询用户时&#xff0c;我们需要使用这个数据库。 后面&#xff0c;还有很多数据&#xff0c;因为篇幅的问题&#xff0c;就…