echarts实现点击不同的柱子实现类目的不同名字

实现效果如下图:

首先实现echarts堆叠柱状图数据为0的不占用x轴空间

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
  },
  legend: {
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  
  xAxis: [
    {
      type: 'category',
      position: 'bottom',
      data: ['园区内', '园区外']
    },
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: "门诊",
      type: "bar",//柱状图
      stack:"园区内",
      emphasis: {//折线图的高亮状态。
        focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
      },
      data: [data[0][1],0],
    },
    {
      name: "医院",
      type: "bar",//柱状图
      stack:"园区内",
      emphasis: {//折线图的高亮状态。
        focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
      },
      data: [data[0][2],0],
    },
    {
      name: "现结",
      type: "bar",//柱状图
      stack:"园区外",
      emphasis: {//折线图的高亮状态。
        focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
      },
      data: [0,data[1][1]],
    },
    {
      name: "月结",
      type: "bar",//柱状图
      stack:"园区外",
      emphasis: {//折线图的高亮状态。
        focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
      },
      data: [0,data[1][2]],
    },
  ]
};

这个时候我们需要把类目中多余的为0项删除即可

在tooltip使用以下即可
formatter: params => {
            var res = `${params[0].name} <br/>`
            for (const item of params) {
              if (item.value !== 0) {
                res += `<span style="background: ${item.color}; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> ${item.seriesName} :${item.value}<br/>`
              }
            }
            return res
          }

可能柱子会有点偏,使用下面属性可进行左右调整 barGap:-1

      series: [
                {
                    data:[data[0][1],0],
                    type: 'bar', 
                    smooth: true,
                    barMaxWidth:30,
                    barGap:-1,
                    stack:'园区内',
                    name: '门诊'
                },
                ....
              ]

参考文章:

echarts堆叠柱状图数据为0的不占用x轴空间_echarts 柱状图 值为0 不占据x轴线宽度-CSDN博客

echarts柱状图去掉数值为0的tooltip不显示_echarts柱状数据为0的去掉该列-CSDN博客 

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

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

相关文章

【大数据】分布式协调系统 Zookeeper

分布式协调系统 Zookeeper 1.Zookeeper 的特点2.Zookeeper 的数据结构3.Zookeeper 的应用场景3.1 统一命名服务3.2 统一配置管理3.3 统一集群管理3.4 服务器动态上下线3.5 软负载均衡 Zookeeper 是 Apache 开源的一个顶级项目&#xff0c;目的是为分布式应用提供协调服务&#…

【C++期末编程题题库】代码+详解18道

适合期末复习c看&#xff0c;或者刚入门c的小白看&#xff0c;有的题会补充知识点&#xff0c;期末复习题的代码一般比较简单&#xff0c;所以语法上没那么严谨。本文所有题目要求全在代码块的最上面。 目录 1、设计复数类 2、设计Computer类 3、实现相加的函数模板 4、圆类…

基于Java SSM框架实现新闻推送系统项目【项目源码】计算机毕业设计

基于java的SSM框架实现新闻推送系统演示 SSM框架 当今流行的“SSM组合框架”是Spring SpringMVC MyBatis的缩写&#xff0c;受到很多的追捧&#xff0c;“组合SSM框架”是强强联手、各司其职、协调互补的团队精神。web项目的框架&#xff0c;通常更简单的数据源。Spring属于…

Python 快速合并PDF表格转换输出CSV文件

单位的刷脸考勤机后台系统做得比较差&#xff0c;只能导出每个部门的出勤统计表pdf&#xff0c;格式如下&#xff1a; 近期领导要看所有部门的考勤数据&#xff0c;于是动手快速写了个合并pdf并输出csv文件的脚本。 安装模块 pypdf2&#xff0c;pdfplumber&#xff0c;前者用…

年底了,准备跳槽的可以看看...

前两天跟朋友感慨&#xff0c;今年的铜九铁十、裁员、疫情导致好多人都没拿到offer!现在已经1月了&#xff0c;具体明年的金三银四只剩下两个月。 对于想跳槽的职场人来说&#xff0c;绝对要从现在开始做准备了。这时候&#xff0c;很多高薪技术岗、管理岗的缺口和市场需求也出…

企业该如何选择好的跨境数据传输平台

跨境数据传输平台是一种可以帮助企业在不同国家和地区之间安全传输数据的工具。它可以通过对数据进行加密、脱敏、压缩等处理&#xff0c;确保数据在传输过程中的安全性和完整性。同时&#xff0c;它还可以根据不同的合规要求&#xff0c;对数据进行分类、分级、备份等处理&…

Prometheus实战篇:Prometheus监控redis

准备环境 docker-compose安装redis docker-compose.yaml version: 3 services:redis:image:redis:5container_name: rediscommand: redis-server --requirepass 123456 --maxmemory 512mbrestart: alwaysvolumes:- /data/redis/data: /dataport:- "6379:6379"dock…

数据结构之各大排序(C语言版)

我们这里话不多说&#xff0c;排序重要性大家都很清楚&#xff0c;所以我们直接开始。 我们就按照这张图来一一实现吧&#xff01; 一.直接插入排序与希尔排序. 这个是我之前写过的内容了&#xff0c;大家可以通过链接去看看详细内容。 算法之插入排序及希尔排序&#xff08…

Spring中的工厂类

目录 1.ApplicationContext 4.2.BeanFactory 1.ApplicationContext ApplicationContext的实现类&#xff0c;如下图&#xff1a; ClassPathXmlApplicationContext&#xff1a;加载类路径下 Spring 的配置文件 FileSystemXmlApplicationContext&#xff1a;加载本地磁盘下 S…

安徽2024考试公告一览表!有需要的速收藏

考公群体&#xff0c;越来越多&#xff01; 考研减少的很多学生转来考公&#xff0c;24年国考人数突破291万&#xff0c;较23年增长约40万 考试难度&#xff0c;逐年增大&#xff0c;逐年创新&#xff01; 结束的24国考&#xff0c;江浙省考&#xff0c;学生普遍反映难度增大&a…

[C#]使用OpenCvSharp实现二维码图像增强超分辨率

【官方框架地址】 github.com/shimat/opencvsharp 【算法介绍】 借助于opencv自带sr.prototxt和sr.caffemodel实现对二维码图像增强 【效果展示】 【实现部分代码】 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin…

代码随想录-刷题第四十七天

139. 单词拆分 题目链接&#xff1a;139. 单词拆分 思路&#xff1a;本题可以使用记忆化回溯&#xff0c;不再过多介绍&#xff0c;主要讲解完全背包方法。 单词就是物品&#xff0c;字符串s就是背包&#xff0c;单词能否组成字符串s&#xff0c;就是问物品能不能把背包装满。…

VSCode编辑器下载与安装

1、下载 官网下载地址&#xff1a; 打开下载地址&#xff0c;如下图&#xff0c;根据自己的平台选择相应版本下载&#xff08;本文只针对Windows系统的安装&#xff0c;所以下载Windows版的&#xff09;。 点击会自动下载&#xff0c;下载完成文件如下图&#xff1a; 2、安装…

python入门,list列表详解

目录 1.list的定义 2.index查找某元素的下标 3.修改 ​编辑 4.插入 ​编辑 5.追加元素 1.append,追加到尾部 2.extend,追加一批元素 ​编辑 6.删除元素 1.del 列表[下标] 2.列表.pop(下标) 3.列表.remove(元素) 7.清空列表 8.统计某一元素在列表内的数量 9.计算…

计算机组成原理 控制器

控制器 #mermaid-svg-cDexVavlf0QIZRSF {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-cDexVavlf0QIZRSF .error-icon{fill:#552222;}#mermaid-svg-cDexVavlf0QIZRSF .error-text{fill:#552222;stroke:#552222;}#me…

iOS苹果和Android安卓测试APP应用程序的差异

Hello大家好呀&#xff0c;我是咕噜铁蛋&#xff01;我们经常需要关注移动应用程序的测试和优化&#xff0c;以提供更好的用户体验。在移动应用开发领域&#xff0c;iOS和Android是两个主要的操作系统平台。本文铁蛋讲给各位小伙伴们详细介绍在App测试中iOS和Android的差异&…

设计模式之装饰者模式【结构型模式】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档> 学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某…

Linux内存管理:(五)反向映射RMAP

文章说明&#xff1a; Linux内核版本&#xff1a;5.0 架构&#xff1a;ARM64 参考资料及图片来源&#xff1a;《奔跑吧Linux内核》 Linux 5.0内核源码注释仓库地址&#xff1a; zhangzihengya/LinuxSourceCode_v5.0_study (github.com) 1. 前置知识&#xff1a;page数据结…

【unity】基于Obi的绳/杆蓝图、绳杆区别及其创建方法

绳索 是通过使用距离和弯曲约束将粒子连接起来而形成的。由于规则粒子没有方向(只有位置)&#xff0c;因此无法模拟扭转效应(维基百科)&#xff0c;绳子也无法保持其静止形状。然而&#xff0c;与杆不同的是&#xff0c;绳索可以被撕裂/劈开&#xff0c;并且可以在运行时改变其…

LeetCode(36)有效的数独 ⭐⭐

请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例图&#xff09; 注…