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

news2024/11/21 0:22:31

实现效果如下图:

首先实现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博客 

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

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

相关文章

3C电子制造:智慧物流引领产业升级

在当今科技飞速发展的时代&#xff0c;3C电子制造行业正面临着一系列挑战和机遇。市场需求的多变和技术革新的加速&#xff0c;使得企业必须不断创新和升级。在这个过程中&#xff0c;智慧物流成为了一个关键的环节&#xff0c;它能够有效地提高生产效率、降低成本并增强企业的…

无心剑小诗《银婚颂》

银婚颂 二十五个春秋共一轮 你是岁月赠予我最亮的星辰 从青春燃烧到岁月沉稳 你的笑颜,我永恒的晨昏 春花烂漫是你眼里的璀璨 夏日蝉鸣是彼此故事的和弦 秋叶纷飞诉说漫天情缘 冬雪纯洁见证温暖的牵绊 月光洒满每段共享小径 星光点染每个深情的夜晚 风雨同舟铸就铜墙铁壁 携…

专属定制适合个人的知识付费平台,打造个性化品牌与自主管理体验

明理信息科技知识付费saas租户平台 在当今数字化时代&#xff0c;知识付费平台已经成为人们获取专业知识、提升自身素质的重要渠道。然而&#xff0c;公共知识付费平台虽然内容丰富&#xff0c;但难以满足个人或企业个性化的需求和品牌打造。因此&#xff0c;我们提出了专属定…

易基因:ChIP-seq等揭示Runx2通过转录调控Itgav表达激活肝星状细胞以促进肝纤维化|科研进展

这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 肌成纤维细胞&#xff08;myofibroblasts&#xff09;主要由肝脏中活化的肝星状细胞(hepatic stellate cells HSC)组成&#xff0c;在肝纤维化进展中发挥着核心作用。由于肌成纤维细胞主要负责细胞外基质蛋…

neo4j图数据库安装和测试

neo4j图数据库安装和测试 1. 下载合适的neo4j软件版本。 https://we-yun.com/doc/neo4j/ https://neo4j.com/deployment-center/#enterprise 2. 下载JAVAJDK 由于neo4j是一个用Java编写的图形数据库&#xff0c;因此在安装和运行Neo4j之前&#xff0c;需要先安装Java Developm…

H5定时打卡领取奖励系统PHP源码,附带搭建教程

搭建教程 环境采用&#xff1a;linux的服务器系统 Nginx 1.18.0 MySQL 5.6.49 PHP-7.2 创建一个网站绑定上域名PHP版本选择7.2 这里不要绑定错了 创建好&#xff0c;我们进入到网站根目录&#xff0c;把源码打包压缩上传进去 压缩格式要用zip 不能有中文&#xff0c;…

《软件项目接口安全设计规范》

1.token授权机制 2.https传输加密 3.接口调用防滥用 4.日志审计里监控 5.开发测试环境隔离&#xff0c;脱敏处理 6.数据库运维监控审计 软件全套文档&#xff1a;软件开发全套资料-CSDN博客

javaweb项目jar包部署

装好系统后直接先安装java环境 方法一&#xff1a;使用OpenJDK安装Java 更新系统软件包列表&#xff1a; sudo yum update安装OpenJDK&#xff1a; sudo yum install java-1.8.0-openjdk-devel # Java 8安装如果你需要其他版本的Java&#xff0c;你可以替换 1.8.0 为其他版本…

奇数码问题

title: 奇数码问题 date: 2024-01-05 11:52:04 tags: 逆序对 cstefories: 算法进阶指南 题目大意 解题思路 将二维转化为一维&#xff0c;求他的逆序对&#xff0c;如果逆序对的奇偶性相同&#xff0c;则能够实现。 代码实现 #include<iostream> #include<string.h&…

微服务应用可观测性解决方案介绍

目录 一、可观测性出现背景 二、什么是可观测性&#xff08;Observability&#xff09; 2.1 可观测性的不同解析 2.1.1 百度维基解析 2.1.2 IBM解析 2.1.3 CNCF&#xff08;云原生计算机基金会&#xff09;组织解析 2.1.4 我的个人理解 2.2 可观测性和监控的区别与联系 …

产业认可 | 开源网安荣获 CCIA“2023 年度优秀会员单位”

​1月4日&#xff0c;“2023年度中国网络安全产业联盟成员大会暨理事会”在京召开&#xff0c;开源网安作为成员单位受邀出席本次大会。 在会上&#xff0c;联盟发布了关于2023年度表彰先进的决定&#xff0c;作为中国软件安全领域的创领者&#xff0c;开源网安在技术、实践和创…

docker容器化部署及数据持久化

1、加载MySQL 5.7的镜像 docker load -i mysql-5.7.tar.gz 2、执⾏命令启动MySQL容器&#xff1a; sh start-mysql.sh docker run -itd \ --name mysql \ --restart always \ -p 30036:3306 \ -v $PWD/mysql/config-file.cnf:/etc/mysql/conf.d/config-file.cnf \ -v $PWD/m…

初识对抗生成网络(GAN)

在研究语义通信的时候&#xff0c;发现解码端很多都是用GAN或基于GAN来完成的。带着对GAN的好奇&#xff0c;对GAN进行了一个初步学习。这篇文章介绍一下和GAN相关的一些常识吧~   本文围绕以下几个内容展开&#xff1a;     1.什么是GAN&#xff1f;     2.为什么要…

HubSpot集成怎么样?有哪些优势和特点?

HubSpot在集成方面表现出色&#xff0c;并为用户提供了强大的集成能力。以下是HubSpot集成的一些特点和优势&#xff1a; 1.丰富的集成生态系统&#xff1a; HubSpot拥有丰富的应用市场&#xff0c;用户可以轻松访问并集成多种第三方应用。这包括与营销、销售、客户服务等领域…

JavaScript中实现页面跳转的多种方法【通俗易懂】

✨前言✨   本篇文章主要在于如何使用JavaScript中的各种实现页面跳转的方式 &#x1f352;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f352;博主将持续更新学习记录收获&#xff0c;友友们有任何问题可以在评论区留言 在JavaScr…

Image - 体积最小的 base64 encode 1*1透明图片,透明背景图片base64编码

背景 前端开发时&#xff0c;有些<img>标签的src属性的值来源于接口&#xff0c;在接口获取结果之前&#xff0c;这个src应该设置为什么呢&#xff1f; 误区&#xff1a;设置为# 有人把src设置为<img src"#" />。 这是有问题的&#xff0c;浏览器解析…

mybatis-flex与springBoot整合

mybatis-flex基本使用 1.测试sql2.导入坐标3.框架搭建1.pojo层2.mapper层3.service层4.controller层5.启动类6.配置类7.EmpMapper.xml 4.启动测试 本片文章在springBoot3&#xff0c;jdk21下测试通过 注意官方网站为&#xff1a;https://mybatis-flex.com/ 请点击&#xff1a;直…

HashMap最全面试题 连环15问

目录 问1&#xff1a;JDK1.7与1.8中的HashMap底层数据结构有什么不同&#xff1f; 问2&#xff1a;何时会转为红黑树&#xff0c;何时会退化为链表&#xff1f; 问3&#xff1a;HashMap根据key查询的时间复杂度&#xff1f; 问4&#xff1a;为何一上来不树化&#xff1f; …

Android跨进程渲染

文章目录 背景实现步骤服务端客户端参考代码 背景 2024年第一篇博客&#xff0c;希望所有看到这篇博客的同学都能财务自由&#xff0c;早日退休&#xff01; 跨进程渲染就是在服务端进程渲染&#xff0c;在客户端进程显示。在一些 3d 的应用场景&#xff0c;当多个应用需要显…

【揭秘】单例模式DCL导致无法访问对象?

前两天&#xff0c;在审查团队成员的代码时&#xff0c;我发现了一个错误的单例模式写法。 在Java中&#xff0c;单例模式是一种非常常见的设计模式&#xff0c;用于确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取该实例&#xff0c;但是&#xff0c;如果不正…