Echarts饼图中显示百分比

开发中遇到一个需求,要在饼图上显示数据百分比,下图:

在这里插入图片描述
查了echarts 文档,并不能通过简单的配置来实现,原因如下:在单个serie的label中,只能设置一个label,位置可以选择在饼图内部inner,或者饼图外部outer,无法实现同时实现内部、外部显示。查阅文档看到说可以设置两个serie,让两个饼图完全重合即可,一个外标签显示文字说明,另一个显示内标签,实现显示百分比。

demo展示
series: [
  {
    name: "情绪占比",
    type: "pie",
    label: {
      show: true,
      // position: "putside",
      formatter: "{b} {d}%",
    },
    emphasis: null,
    labelLine: {
      show: true,
      length: 40,
    },
    data: [
      { value: 55, name: "正面", itemStyle: { color: "#ff745a" } },
      { value: 15, name: "负面", itemStyle: { color: "#2391ff" } },
      { value: 30, name: "中性", itemStyle: { color: "#ffc328" } },
    ],
  },
  {
    name: "情绪占比",
    type: "pie",
    label: {
      show: true,
      position: "inside",
      formatter: "{d}%",
    },
    labelLine: {
      show: false,
    },
    emphasis: {
      label: {
        show: true,
        fontSize: 40,
        fontWeight: "bold",
      },
    },
    data: [
      { value: 55, name: "正面", itemStyle: { color: "#ff745a" } },
      { value: 15, name: "负面", itemStyle: { color: "#2391ff" } },
      { value: 30, name: "中性", itemStyle: { color: "#ffc328" } },
    ],
  },
],
效果图

在这里插入图片描述

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

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

相关文章

SAP UI5 walkthrough step5 Controllers

在这个章节&#xff0c;我们要做的是&#xff0c;将之前的text文本展示为一个按钮&#xff0c;并将声明绑定在点击按钮事件。 因为改的是外观&#xff0c;所以我们修改的是view.XML webapp/view/App.view.xml <mvc:ViewcontrollerName"ui5.walkthrough.controller.A…

20231207_最新已测_Centos7.4安装nginx1.24.0_安装详细步骤---Linux工作笔记066

以前安装的太模糊了,干脆重新写一个: 1.首先下载对应的nginx-1.24.0.tar.gz安装文件 2.然后: 去执行命令 安装依赖 yum install -y gcc yum install -y pcre pcre-devel yum install -y zlib zlib-devel yum install -y openssl openssl-devel 3.然后:去解压 tar -zxvf ngi…

ai人工智能洗稿软件免费有哪些好用?【最新AI洗稿软件盘点】

在当今信息时代&#xff0c;内容创作已成为人们工作和生活中不可或缺的一部分。为了提高创作效率&#xff0c;越来越多的人转向人工智能洗稿软件。本文将专心分享一些优质的免费AI洗稿软件。 免费AI洗稿软件的崛起 免费AI洗稿软件的崛起为许多创作者带来了便利&#xff0c;使他…

市面上主流的测评补单方式有几种?以及优缺点

目前测评方式分为了三大类&#xff1a; 一、找服务商 有些服务商手上确实有大量的国外测评人员&#xff0c;但是服务商鱼龙混杂&#xff0c;账号质量也是良莠不齐的&#xff0c;真人测评很多也是通过脚本来留Review&#xff0c;这已经是测评圈中公开的秘密了。由于listing很容…

MeteoInfo-Java解析与绘图教程

MeteoInfo-Java解析与绘图教程(四) 上文我们说到,将地图叠加在色斑图上,但大部分都是卫星绘图,现在开始讲解micaps数据绘图,同样也是更多自定义 配置 首先我们解析micaps数据,将之前学到的东西拿过来绘图 MeteoDataInfo meteoDataInfo new MeteoDataInfo(); meteoDataInfo.o…

中间件系列 - Redis入门到实战(基础篇)

前言 1.学习视频&#xff1a; 黑马程序员Redis入门到实战教程&#xff0c;深度透析redis底层原理redis分布式锁企业解决方案黑马点评实战项目 2. 本内容仅用于个人学习笔记&#xff0c;如有侵扰&#xff0c;联系删除 3. 本章学习目标&#xff1a; 初始Redis 认识NoSQL认识Redi…

臻程密封科技(江苏)有限公司携橡胶密封产品亮相2024生物发酵展

臻程密封科技&#xff08;江苏&#xff09;有限公司盛装亮相2024第12届国际生物发酵产品与技术装备展&#xff08;济南&#xff09; 展位号&#xff1a;2号馆H56 臻程密封科技&#xff08;江苏&#xff09;有限公司专注于橡胶密封材料的研发&#xff0c;橡胶密封产品的生产、…

Java 21 的虚拟线程:高性能并发应用的福音

Java 21 最重要的特性之一就是虚拟线程 (JEP 444)。这些轻量级的线程降低了编写、维护和观察高吞吐量并行应用所需的努力。 在讨论新特性之前&#xff0c;让我们先看一下当前的状态&#xff0c;以便更好地理解它试图解决什么问题以及带来了哪些好处。 平台线程 在引入虚拟线…

浅谈5G基站节能及数字化管理解决方案的设计与应用-安科瑞 蒋静

截至2023年10月&#xff0c;我国5G基站总数达321.5万个&#xff0c;占全国通信基站总数的28.1%。然而&#xff0c;随着5G基站数量的快速增长&#xff0c;基站的能耗问题也逐渐日益凸显&#xff0c;基站的用电给运营商带来了巨大的电费开支压力&#xff0c;降低5G基站的能耗成为…

在springboot中引入参数校验

一、概要 一般我们判断前端传过来的参数&#xff0c;需要对某些值进行判断&#xff0c;是否满足条件。 而springboot相关的参数校验注解&#xff0c;可以解决我们这个问题。 二、快速开始 首先&#xff0c;我用的springboot版本是 3.1.5 引入参数校验相关依赖 <!--1…

【异常】浅析异常体系及为什么一定会执行finally块代码

异常体系&#xff1a; &#xff08;1&#xff09;所有异常&#xff08;Exception&#xff09;、错误&#xff08;Error&#xff09;都继承自异常中的基类&#xff1a;Throwable。而异常又可以分为检查异常&#xff08;Checked Exception&#xff09;、非检查异常&#xff08;Un…

深度学习记录--神经网络表示及其向量化

神经网络表示 如下图 就这个神经网络图来说&#xff0c;它有三层&#xff0c;分别是输入层(Input layer)&#xff0c;隐藏层(Hidden layer)&#xff0c;输出层(Output layer) 对于其他的神经网络&#xff0c;隐藏层可以有很多层 一般来说&#xff0c;不把输入层算作一个标准…

根据年份和第几周来获取,那一个周的周天日期

在工作中遇到这个问题&#xff0c;仓库有物料录入&#xff0c;告诉了年份和这个年的第几周&#xff0c;要求把时间转换为XXXX-XX-XX的格式。日期为那个周的最后一天&#xff08;周天&#xff09; 在Java中想要获取特定年份和周数的周天日期&#xff0c;可以使用LocalDate类 pu…

使用粗糙贴图制作粗纹皮革手提包3D模型

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 当谈到游戏角色的3D模型风格时&#xff0c;有几种不同的风格&#xf…

Linux设备分类与设备号

文件分为&#xff1a; 1.文件内容&#xff1b;2.文件名&#xff1b;3.元信息&#xff08;时间戳&#xff0c;文件大小等&#xff09; 一、Linux内核对设备的分类 linux的文件种类&#xff1a; -&#xff1a;普通文件 d&#xff1a;目录文件 p&#xff1a;管道文件 s&#x…

YOLOv8独家原创改进:SPPF自研创新 | 可变形大核注意力(D-LKA Attention),大卷积核提升不同特征感受野的注意力机制

💡💡💡本文自研创新改进: 可变形大核注意力(D-LKA Attention)高效结合SPPF进行二次创新,大卷积核提升不同特征感受野的注意力机制。 收录 YOLOv8原创自研 https://blog.csdn.net/m0_63774211/category_12511737.html?spm=1001.2014.3001.5482 💡💡💡全网独…

课堂练习3.2:进程的创建

3-3 进程是操作系统中一个非常重要的概念。程序的运行是通过进程来完成的。在层次结构的操作系统中&#xff0c;进程不仅是系统分配资源的基本单位&#xff0c;而且是 CPU 调度的基本单位。进程管理是操作系统最重要的功能之一。通过本实训将会学习到&#xff1a;Linux 0.11 的…

某马点评——day04

达人探店 发布探店笔记 改一下&#xff0c;图片保存路径就可以直接运行测试了。 查看探店笔记 Service public class BlogServiceImpl extends ServiceImpl<BlogMapper, Blog> implements IBlogService {Resourceprivate IUserService userService;Overridepublic Resu…

Docker build 无法解析域名

### 报错 Docker build 无法解析域名 报错&#xff1a;ERROR [ 2/12] RUN curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo 解决Docker build无法解析域名 # 追加到 etc/docker/daemon.json&#xff0c;注意JSON的格式 {"dn…

【GAMES101】观测变换

图形学不等于 OpenGL&#xff0c;不等于光线追踪&#xff0c;而是一套生成整个虚拟世界的方法 记得有个概念叫光栅化&#xff0c;就是把三维虚拟世界的事物显示在二维的屏幕上&#xff0c;这里就涉及到观察变换 观察变换&#xff0c;叫viewing transformation&#xff0c;包括…
最新文章