当前位置: 首页 > article >正文

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

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

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}', // 标签为: 百分比 + namecolor: '#fff',},data: _data,},],
});

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

 

http://www.lryc.cn/news/2401022.html

相关文章:

  • 【Spring AI】调用 DeepSeek 实现问答聊天
  • Java消息队列与安全实战:谢飞机的烧饼摊故事
  • parquet :开源的列式存储文件格式
  • SpringBoot关于文件上传超出大小限制--设置了全局异常但是没有正常捕获的情况+捕获后没有正常响应返给前端
  • 【Go语言】Ebiten游戏库开发者文档 (v2.8.8)
  • Spring Boot应用开发实战
  • 实验设计与分析(第6版,Montgomery著,傅珏生译) 第9章三水平和混合水平析因设计与分式析因设计9.5节思考题9.1 R语言解题
  • Pycharm 配置解释器
  • learn react course
  • SQL进阶之旅 Day 11:复杂JOIN查询优化
  • web第八次课后作业--分层解耦
  • MySQL 事务深度解析:面试核心知识点与实战
  • 使用Redis作为缓存,提高MongoDB的读写速度
  • 【图片自动识别改名】识别图片中的文字并批量改名的工具,根据文字对图片批量改名,基于QT和腾讯OCR识别的实现方案
  • Kafka消息队列笔记
  • 机器人变量类型与配置
  • nssm配置springboot项目环境,注册为windows服务
  • 20-项目部署(Docker)
  • Python学习(6) ----- Python2和Python3的区别
  • 零基础安装 Python 教程:从下载到环境配置一步到位(支持 VSCode 和 PyCharm)与常用操作系统操作指南
  • SAP学习笔记 - 开发18 - 前端Fiori开发 应用描述符(manifest.json)的用途
  • 分类与逻辑回归 - 一个完整的guide
  • 一键试衣,6G显存可跑
  • 跟着deepseek浅学分布式事务(2) - 两阶段提交(2PC)
  • 【仿生机器人软件架构】通过整合认知系统实现自主精神性——认知系统非常具有可执行性
  • 20250602在Ubuntu20.04.6下修改压缩包的日期和时间
  • Fullstack 面试复习笔记:项目梳理总结
  • 星闪开发之Server-Client 指令交互控制OLED灯案例
  • MySQL补充知识点学习
  • 《前端面试题:CSS有哪些单位!》