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.mfbz.cn/a/572160.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于springboot+vue+Mysql的篮球竞赛预约平台

开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:…

STM32 HAL库F103系列之DAC实验(二)

DAC输出正弦波实验 实验简要 1,功能描述 通过DAC1通道1(PA4)输出正弦波,然后通过DS100示波器查看波形 2,使用定时器7 TRGO事件触发转换 TEN1位置1、TSEL1[2:0]010 3,关闭输出缓冲 BOFF1位置1 4,使用DMA模式 DMAE…

无人机+遥控器:工业级手持地面站(支持安卓系统)功能技术详解

手持地面站是一种专为无人机设计的便携式设备,用于实现飞行控制、任务规划、数据链路通信等功能。由于支持安卓系统,这种地面站设备在软件生态上具有极大的灵活性,能够兼容并运行众多基于安卓平台的无人机控制应用程序。 在硬件方面&#xff…

vue中的mixin(局部混入、全局混入)

一、mixin是什么 Mixin是面向对象程序设计语言中的类,提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类;Mixin类通常作为功能模块使用,在需要该功能时“混入”,有利于代码复用又避免了多继承的复杂 Vue中的mixin…

如何在 Ubuntu 14.04 上配置 StatsD 以收集 Graphite 的任意统计数据

介绍 Graphite 是一个图形库,允许您以灵活和强大的方式可视化不同类型的数据。它通过其他统计收集应用程序发送给它的数据进行图形化。 在之前的指南中,我们讨论了如何安装和配置 Graphite 本身,以及如何安装和配置 collectd 以编译系统和服…

python实现视频剪辑

即刻关注,获取更多 实现目标 因上传某盘等文件大小限制,无法上传视频,故需要对视频进行压缩 参考资料 ffmpeg文档参考: https://ffmpeg.org/ffmpeg.html 依赖条件 已经安装好python3.11 ,原则上更高版本也可以 安装 ffmpeg 依赖 p…

21.3K star!推荐一款可视化自动化测试/爬虫/数据采集神器!功能免费且强大!

大家好,我是狂师! 在大数据时代,信息的获取与分析变得尤为重要。对于开发者、数据分析师乃至非技术人员来说,能够高效地采集网络数据并进行分析是一个强有力的工具。今天,我要向大家推荐的是一款功能强大、操作简单且…

线上申报开放时间!2024年阜阳市大数据企业培育认定申报条件、流程和材料

2024年阜阳市大数据企业培育认定申报条件、流程和材料,线上申报开放时间整理如下 一、2024年阜阳市大数据企业培育认定申报要求 (一)经营范围 申请认定的企业应当从事以下生产经营活动: 1.从事数据收集、存储、使用、加工、传输、…

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

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

多分辨率展开

1.,首先这个图居然给出了基和对偶基相等这个概念。我需要说明一下这个概念的来源。 1.1.,对偶基一开始是来自高等代数的线性空间,然后是泛函分析中的赋范线性空间的共轭空间。至于基的概念,赋范线性空间并没有,可能是因为正交需要内积来定义&…

Python基础知识(二)

🎬 秋野酱:《个人主页》 🔥 个人专栏:《Java专栏》 《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 1.输入和输出函数1.1输出函数1.2输入函数 2.常见运算符2.1赋值运算符2.2比较运算符2.3逻辑运算符2.4and逻辑与2.5or逻辑或2.6not逻…

超纯水抛光树脂MB-115的使用及装填注意事项

用前须知 01.抛光树脂是由高度纯化、转型的H型阳树脂和OH型阴树脂混合而成,如果装填和操作得当,在最初的周期中即可制备出电阻率大于18.0MΩcm和TOC小于10ppb的超纯水,无需化学再生。 02.树脂开封后长时间暴露在空气中会吸收二氧化碳&#…

k8s日常动手实践 ~~ pod访问 pod请求 k8s api ~ 含新版带curl的busybox镜像

前言: 可以使用 Kubernetes API 获取集群信息。使用 Service Account(SA)进行身份验证,可以以安全的方式访问 Kubernetes API,而无需在 Pod 中使用明文凭据。 以下是一个使用 Service Account 访问 Kubernetes API 获…

HAWE比例多路阀驱动放大器

HAWE比例多路阀驱动放大器是一种在工程机械和工业自动化领域中广泛使用的高精度控制元件,它通过电气信号来控制流体的流动方向、流量及压力等参数。多路比例阀品牌技术的核心在于高性能、低成本、智能化控制、高频响、安全性以及技术创新等方面。这些技术的发展不仅…

Web前端开发之HTML_1

第一个前端程序VS Code安装VS Code 快捷键 1. 第一个前端程序 使用记事本&#xff0c;新建一个文本文档&#xff0c;重命名为Welcome.html&#xff0c;如下图&#xff1a; 用记事本打开文档&#xff0c;内容输入如下&#xff1a; <html> <head> <t…

<计算机网络自顶向下>网络层导论

在计算机网络中&#xff0c;网络层包括数据平面和控制平面&#xff0c;它们分别负责网络数据转发和网络路由控制。以下是它们之间的区别&#xff1a; 数据平面&#xff08;Data Plane&#xff09;&#xff1a; 数据平面负责实际的数据传输和转发&#xff0c;它处理网络中的数据…

IDEA本地将镜像推送到coding制品仓库

创建制品仓库 假设仓库名称为docker 在IDEA 添加Docker 注册表 IDEA必须先安装docker插件 地址 用户名和密码就是coding的登录名和密码服务器 最好本地安装docker桌面版&#xff0c;更容易操作 测试连接成功 推送镜像到coding的docker制品仓库 选中某个镜像 鼠标右键 注册表…

金蝶云星空和旺店通·企业版单据接口对接

金蝶云星空和旺店通企业版单据接口对接 接入系统&#xff1a;旺店通企业版 慧策最先以旺店通ERP切入商家核心管理痛点——订单管理&#xff0c;之后围绕电商经营管理中的核心管理诉求&#xff0c;先后布局流量获取、会员管理、仓库管理等其他重要经营模块。慧策的产品线从旺店通…

画家-qt-surce

void GraphicView::paintEvent(QPaintEvent *pe) { QPainter painter(viewport()); painter.setRenderHint(QPainter::SmoothPixmapTransform);//升级画家 painter.drawImage(rect(),musicImage); } 分析&#xff1a; 这段代码是用于绘制图形视图的部分。 1. void GraphicV…

Hbase中二级索引与Phoenix二级索引实现

1、引入 HBase本身只提供基于行键和全表扫描的查询&#xff0c;而行键索引单一&#xff0c;对于多维度的查询困难。 所以我们引进一个二级索引的概念。二级索引的本质就是建立各列值与行键之间的映射关系 。 图解&#xff1a; 2、常见实现二级索引的方案&#xff1a; HBase…
最新文章