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

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.xdnf.cn/news/12018.html

相关文章:

  • 简数采集技巧之快速获取特殊链接网址URL方法
  • Playwright 测试框架 - Python
  • 软件工程专业的本科生应该具备哪些技能
  • 【Bluedroid】蓝牙启动之gatt_init 流程源码解析
  • DrissionPage爬虫包实战分享
  • 汽车加气站操作工证考试重点
  • 文献阅读|基于PSMA PET/CT与mpMRI多模态深度学习预测前列腺癌的不良病变
  • Spring AI 之工具调用
  • cpp多线程学习
  • 无人机光纤FC接口模块技术分析
  • [华为eNSP] 在eNSP上实现IPv4地址以及IPv4静态路由的配置
  • 融智学的数学基础,通过微分几何的纤维丛结构,构建理论框架模型包含生物层、动物层、心智层、人造物层和人格层五个维度
  • C++算法训练营 Day7 哈希表及双指针
  • 聊聊FlaUI:让Windows UI自动化测试优雅起飞!
  • Deepin 安装 Nginx
  • (eNSP)配置WDS手拉手业务
  • .NET 生态中的 MCP 项目及技术分析
  • 那些Java 线程中断的实现方式
  • 单锁与分布式锁
  • AI工程师的武器库:核心技术与实战案例
  • MCP与检索增强生成(RAG):AI应用的强大组合
  • 《Coevolutionary computation and its application》协同演化及其应用中文对照·第一章
  • 告别无效号码,精准营销从空号过滤开始
  • 固定ip和非固定ip的区别是什么?如何固定ip地址
  • Lifecycle 核心原理面试回答
  • DeepSwiftSeek 开源软件 |用于 DeepSeek LLM 模型的 Swift 客户端 |轻量级和高效的 DeepSeek 核心功能通信
  • FTPS、HTTPS、SMTPS以及WebSockets over TLS的概念及其应用场景
  • 部署SD-WAN与现有网络架构的兼容性分析:如何实现平滑集成与避免设备浪费?
  • 夏普比率(Sharpe ratio)​
  • SSL安全证书怎么安装?