echarts显示/隐藏标签的同时,始终显示饼图中间文字

news2025/6/7 9:09:13

 显示标签的同时,始终显示饼图中间文字

let _data = this.chartData.slice(1).map((item) => ({
  name: item.productName,
  value: Number(item.stock),
}));
this.chart.setOption({
  tooltip: {
    trigger: 'item',
  },
  graphic: { // 重点在这里(显示饼图中间文字)
    type: 'text',
    left: 'center',
    top: '42%',
    style: {
      text: '{total|' + this.chartData[0].stock + '}' + '\n\r' + '{active|库存总数}',
      textAlign: 'center',
      rich: {
        total: {  // 库存数量:89 (this.chartData[0].stock)
          fontSize: 22,
          fill: '#FFFFFF',
          fontWeight: 'bold',
        },
        active: {  // "库存总数"文字
          fontSize: 12,
          fill: 'rgba(255, 255, 255, 0.6)',
          lineHeight: 30,
        },
      },
    },
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: true, // 开启避免重叠
      padAngle: 2, // 扇区间隙
      label: {     // 标签
        position: 'outer',
        formatter: '{d}% {b}', // 标签为: 百分比 + name
        color: '#fff',
      },
      data: _data,
    },
  ],
});

如果不想显示标签:在 label 里加上 show: false

 

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

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

相关文章

SpringBoot关于文件上传超出大小限制--设置了全局异常但是没有正常捕获的情况+捕获后没有正常响应返给前端

项目背景 一个档案管理系统,在上传比较大的文件时由于系统设置的文件大小受限导致文件上传不了,这时候设置的异常捕捉未能正常报错导致前端页面一直在转圈,实际上后端早已校验完成。 全局异常类设置的捕捉 添加了ControllerAdvice以及RestCon…

【Go语言】Ebiten游戏库开发者文档 (v2.8.8)

1. 简介 欢迎来到 Ebiten (现已更名为 Ebitengine) 的世界!Ebiten 是一个使用 Go 语言编写的开源、极其简洁的 2D 游戏库(或称为游戏引擎)。它由 Hajime Hoshi 发起并主要维护,旨在提供一套简单直观的 API,让开发者能…

实验设计与分析(第6版,Montgomery著,傅珏生译) 第9章三水平和混合水平析因设计与分式析因设计9.5节思考题9.1 R语言解题

本文是实验设计与分析&#xff08;第6版&#xff0c;Montgomery著&#xff0c;傅珏生译) 第9章三水平和混合水平析因设计与分式析因设计9.5节思考题9.1 R语言解题。主要涉及方差分析。 YieldDesign <-expand.grid(A gl(3, 1, labels c("-", "0","…

Pycharm 配置解释器

今天更新了一版pycharm&#xff0c;因为很久没有配置解释器了&#xff0c;发现一直失败。经过来回试了几次终于成功了&#xff0c;记录一下过程。 Step 1 Step 2 这里第二步一定要注意类型要选择python 而不是conda。 虽然我的解释器是conda 里面建立的一个环境。挺有意思的

web第八次课后作业--分层解耦

一、分层 Controller&#xff1a;控制层。接收前端发送的请求&#xff0c;对请求进行处理&#xff0c;并响应数据。Service&#xff1a;业务逻辑层。处理具体的业务逻辑。Dao&#xff1a;数据访问层(Data Access Object)&#xff0c;也称为持久层。负责数据访问操作&#xff0…

【图片自动识别改名】识别图片中的文字并批量改名的工具,根据文字对图片批量改名,基于QT和腾讯OCR识别的实现方案

现在的工作单位经常搞一些意义不明的绩效工作&#xff0c;每个月都搞来一万多张图片让我们挨个打开对应图片上的名字进行改名操作以方便公司领导进行检查和搜索调阅&#xff0c;图片上面的内容有数字和文字&#xff0c;数字没有特殊意义不做识别&#xff0c;文字有手写的和手机…

20-项目部署(Docker)

在昨天的课程中&#xff0c;我们学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目。大家想一想自己最大的感受是什么&#xff1f; 我相信&#xff0c;除了个别天赋异禀的同学以外&#xff0c;大多数同学都会有相同的…

零基础安装 Python 教程:从下载到环境配置一步到位(支持 VSCode 和 PyCharm)与常用操作系统操作指南

零基础安装 Python 教程&#xff1a;从下载到环境配置一步到位&#xff08;支持 VSCode 和 PyCharm&#xff09;与常用操作系统操作指南 本文是一篇超详细“Python安装教程”&#xff0c;覆盖Windows、macOS、Linux三大操作系统的Python安装方法与环境配置&#xff0c;包括Pyt…

SAP学习笔记 - 开发18 - 前端Fiori开发 应用描述符(manifest.json)的用途

上一章讲了 Component配置&#xff08;组件化&#xff09;。 本章继续讲Fiori的知识。 目录 1&#xff0c;应用描述符(Descriptor for Applications) 1&#xff09;&#xff0c; manifest.json 2&#xff09;&#xff0c;index.html 3&#xff09;&#xff0c;Component.…

一键试衣,6G显存可跑

发现一个好玩的一键换衣的工作流&#xff0c;推荐给大家。 https://github.com/chflame163/ComfyUI_CatVTON_Wrapper 作者参考的是开源项目&#xff0c;做成了工作流形式。 https://github.com/Zheng-Chong/CatVTON 先来看下效果&#xff0c;使用动画人物也可换衣&#xff…

20250602在Ubuntu20.04.6下修改压缩包的日期和时间

rootrootrootroot-X99-Turbo:~$ ll -rwxrwxrwx 1 rootroot rootroot 36247187308 5月 23 10:23 Android13.0地面站.tgz* rootrootrootroot-X99-Turbo:~$ touch 1Android13.0地面站.tgz rootrootrootroot-X99-Turbo:~$ ll -rwxrwxrwx 1 rootroot rootroot 36247187308 6月…

星闪开发之Server-Client 指令交互控制OLED灯案例

系列文章目录 星闪开发之Server-Client 指令交互控制OLED灯案例 文章目录 系列文章目录前言一、核心流程服务端客户端 二、图片资源三、源代码四、在Hispark Studio中配置将sle_oled-master文件夹下的相sle_oled放在peripheral文件夹下。peripheral目录下的 Kconfig文件中添加…

MySQL补充知识点学习

书接上文&#xff1a;MySQL关系型数据库学习&#xff0c;继续看书补充MySQL知识点学习。 1. 基本概念学习 1.1 游标&#xff08;Cursor&#xff09; MySQL 游标是一种数据库对象&#xff0c;它允许应用程序逐行处理查询结果集&#xff0c;而不是一次性获取所有结果。游标在需…

[ctfshow web入门] web80

信息收集 过滤了php和data if(isset($_GET[file])){$file $_GET[file];$file str_replace("php", "???", $file);$file str_replace("data", "???", $file);include($file); }else{highlight_file(__FILE__); }解题 大小写…

【设计模式-4.5】行为型——迭代器模式

说明&#xff1a;本文介绍设计模式中&#xff0c;行为型设计模式之一的迭代器模式。 定义 迭代器模式&#xff08;Iterator Pattern&#xff09;&#xff0c;也叫作游标模式&#xff08;Cursor Pattern&#xff09;&#xff0c;它提供一种按顺序访问集合/容器对象元素的方法&…

C++_核心编程_继承中的对象模型

继承中的对象模型 **问题&#xff1a;**从父类继承过来的成员&#xff0c;哪些属于子类对象中&#xff1f; * 结论&#xff1a; 父类中私有成员也是被子类继承下去了&#xff0c;只是由编译器给隐藏后访问不到 */ class Base { public:int m_A; protected:int m_B; private:int…

使用cephadm离线部署reef 18版并配置对接openstack

源 curl --silent --remote-name --location https://download.ceph.com/rpm-squid/el9/noarch/cephadm chmod x cephadm./cephadm add-repo --release reef监视节点 离线下载 apt-get --download-only install ceph ceph-mon ceph-mgr ceph-commonmkdir /reef/mon mv /var/…

2024年数维杯国际大学生数学建模挑战赛D题城市弹性与可持续发展能力评价解题全过程论文及程序

2024年数维杯国际大学生数学建模挑战赛 D题 城市弹性与可持续发展能力评价 原题再现&#xff1a; 中国人口老龄化趋势的加剧和2022年首次出现人口负增长&#xff0c;表明未来一段较长时期内我国人口将呈现下降趋势。这一趋势必将影响许多城市的高质量和可持续发展&#xff0c…

QT聊天项目DAY13

1. 重置密码 重置密码label也要实现浮动和点击效果&#xff0c;所以将忘记密码这个标签提升为ClickedLabel 1.1 ClickedLabel的复用 由于样式表(.qss) 文件中可以写入多个控件的状态UI&#xff0c;所以为了ClickedLabel能够复用&#xff0c;将成员变量的初始化方式修改为函数…

Web3如何重塑数据隐私的未来

在这个信息爆炸的时代&#xff0c;数据隐私已成为我们不得不面对的严峻问题。Web3&#xff0c;作为下一代互联网的代表&#xff0c;以其去中心化、用户主权和数据安全等特点&#xff0c;正在重塑数据隐私的未来。它不仅仅是技术的革新&#xff0c;更是对个人隐私保护理念的一次…