echarts图例formatter配置添加百分比

echarts图例如何添加百分比

const pieChart = async () => {
  const myChart = echarts.init(piepic.value)
  const piedata = await getPieData(); // 等待数据返回
  myChart.setOption({
    title: {},
    grid: {},
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: 'middle',
      align:'left',
      icon: 'circle',
      textStyle: {
        fontSize: 12,
        padding: [0, 10, 0, -5] //图例文字内间距
      },
      orient: 'vertical',
      right:10,
      backgroundColor:'#f7f7f7',
      formatter: function (name) {
          var total = 0;
          var tarValue;
          for (var i = 0; i < piedata.length; i++) {
            total += piedata[i].value;
            if (name === piedata[i].name) {
              tarValue = piedata[i].value;
            }
          }
          var p = Math.round((tarValue / total) * 100);
          return name + p + "%";
        },
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['30%', '50%'],
        padAngle: 2,
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data:piedata,
      }
    ]
  })
}

在这里插入图片描述

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

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

相关文章

C# 解决 Excel 自动适应列宽的问题

目录 问题现象 原因分析 范例运行环境 解决问题 生成测试文本 实现自适应 小结 问题现象 通过 COM 操作 Excel 自动适应列宽的方法是 AutoFit 方法&#xff0c;该方法适于自动适应列宽或行高。 最近在我们的一款应用里发现效果并没有符合预期&#xff0c;我们提供了一…

YOLOv10训练自己的数据集

目录 0、引言 1、环境配置 2、数据集准备 3、创建配置文件 3.1、设置官方配置文件&#xff1a;default.yaml&#xff0c;可自行修改。 3.2、设置data.yaml 4、进行训练 4.1、方法一 4.2、方法二 5、验证模型 5.1、命令行输入 5.2、脚本运行 6、总结 0、引言 本文…

【线性代数】SVDPCA

用最直观的方式告诉你&#xff1a;什么是主成分分析PCA_哔哩哔哩_bilibili 奇异值分解singular value decomposition&#xff0c;SVD principal component analysis,PCA 降维操作 pca就是降维后使得信息损失最小 投影在坐标轴上的点越分散&#xff0c;信息保留越多 pca的实现…

C++数据结构之:树Tree

摘要&#xff1a; it人员无论是使用哪种高级语言开发东东&#xff0c;想要更高效有层次的开发程序的话都躲不开三件套&#xff1a;数据结构&#xff0c;算法和设计模式。数据结构是相互之间存在一种或多种特定关系的数据元素的集合&#xff0c;即带“结构”的数据元素的集合&am…

Xcode中给UIView在xib中添加可视化的属性

给UIView在xib中添加可视化的属性 效果如下图: 可以直接设置view 的 borderColor 、borderWidth、cornerRadius,也可以单独指定view的某个角是圆角。减少了代码中的属性。 完整代码: UIView+Border.h #import <UIKit/UIKit.h>@interface UIView (Border)/// 可以…

软件设计师(中级)概要笔记:基于软件设计师教程(第5版)

文章目录 作者前言1、计算机系统知识1.1、计算机系统基础知识1.1.1 计算机系统硬件基本组成1.1.2 中央处理单元1.1.3、数据表示原码、反码、补码和移码&#xff08;符号数&#xff09;符号数的应用定点数和浮点数 1.1.4、校验码奇偶校验循环冗余校验码海明码 1.2、计算机体系…

基于梯度提升树回归模型的房地产价格估计

目录 1. 作者介绍2. 梯度提升树回归算法介绍2.1 算法原理2.2 算法讲解与分析 3. 实验过程3.1 数据集介绍3.2 代码介绍3.3 完整代码实现3.4 测试结果 参考文献 1. 作者介绍 雷强&#xff0c;男&#xff0c;西安工程大学电子信息学院&#xff0c;2023级研究生 研究方向&#xff…

个人笔记-随意记录

常见问题&#xff1f; 1.linux重启服务 端口被占用如何解决&#xff1f; 查看某个端口被占用的进程 netstat -tulnp | grep :23454 强制杀死进程 kill -9 1776 重启服务即可

JDK 22 新特性

JDK各个版本特性查看地址&#xff1a;https://openjdk.org/projects/jdk/17/&#xff08;修改后面数字即可&#xff0c;目前最新的是23&#xff09; JDK 22 于 2024 年 3 月 19 日全面发布。 一&#xff0c;开发计划 2023/12/07Rampdown Phase One (fork from main line) 第…

10款你一定不知道的实用工具!

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://aitools.jurilu.com/ 1. S激活工具——KMS激活工具 HEU_KMS_Activator&#xff0c;一款KMS激活工具&#xff0c;适用于Windows、Office及VL版本&#xff0c;无需联网…

MySql学习(一)——MySQL概述之MySQL的启动

文章目录 一、MySQl概述1.1 启动MySQL1.2 客户端连接1.3 关系型数据库1.4 总结 一、MySQl概述 数据库&#xff1a;存储数据的仓库&#xff0c;数据是有组织的进行存储&#xff0c;简称为&#xff08;DB&#xff09;数据库管理系统&#xff1a;操纵和管理数据库的大型软件&…

模拟散列表-java

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 一、模拟散列表 二、算法思路 1.散列表 2.拉链法 3.开放寻址法 三、代码如下 1.拉链法代码如下&#xff1a; 2.开放寻址法代码如下&#xff1a; 3.读入数据 3.代码运行结…

scipy.io.loadmat加载.mat文件,出现KeyError: ‘xxx‘

源代码&#xff1a; input_image loadmat(rC:\Users\admin\Downloads\Indian_Pines\SVM/aa.mat)[aa] #影像图 错误显示&#xff1a; 解决方法&#xff1a; 因为loadmat函数读取出来的高光谱数据是dict格式的所以需要定位才能进行后续操作&#xff0c;定位通常是通过列名&a…

GraphQL(4):GraphQL clients访问接口

下面演示在GraphQL clients访问GraphQL 接口 1 修改baseType.js 添加可供用户访问的静态资源路径 代码如下&#xff1a; const express require(express); const {buildSchema} require(graphql); const grapqlHTTP require(express-graphql).graphqlHTTP; // 定义schema…

深度学习500问——Chapter10:强化学习(1)

文章目录 10.1 强化学习的主要特点 10.1.1 定义 10.2 强化学习应用实例 10.3 强化学习和监督式学习、非监督式学习的区别 10.3.1 强化学习和监督式学习的区别 10.3.2 强化学习和非监督式学习的区别 10.1 强化学习的主要特点 其他许多机器学习算法中学习器都是学得怎样做&#…

0基础学习区块链技术——推演猜想

在《0基础学习区块链技术——入门》一文中&#xff0c;我们结合可视化工具&#xff0c;直观地感受了下区块的结构&#xff0c;以及链式的前后关系。 本文我们将抛弃之前的知识&#xff0c;从0开始思考和推演&#xff0c;区块链技术可能是如何构思出来的。 去中心 在一般的思维…

SpringSecurity6从入门到实战之SpringSecurity整合自动装配详解(源码级讲解,耐心看完)

SpringSecurity6从入门到实战之SpringSecurity整合自动装配详解 这里我先引出问题然后再来一步步进行剖析,SpringSecurity到底是如何实现引入依赖后所有请求都需要进行认证并且会弹出login登录表单页面. 接下来会对SpringBoot的自动装配进行详解,SpringSecurity也是通过自动装配…

【渗透测试】DC-1靶机实战(上)漏洞扫描获取反弹shell

目录 一、范围界定 二、信息收集 三、目标识别 1&#xff09;主机发现 2&#xff09;端口扫描 四. 服务枚举 1&#xff09;网站首页 2&#xff09;Web指纹识别 3&#xff09;nikto报告 4&#xff09;robots.txt 5&#xff09;UPGRADE.txt 五. 漏洞映射 1&#xff…

【项目管理常见问题大揭秘】每个管理者都要Get的「五维思维」~

走上管理岗☸要懂得五维思维 &#x1f4bc;自我管理——做自己的CEO 严于律己&#xff1a;严格要求自己&#xff0c;注重个人品牌建设 宽以待人&#xff1a;接纳不同观点&#xff0c;提升团队凝聚力 尊重事实&#xff1a;鼓励团队成员发挥优势&#xff0c;避免负面评价 坚守诚…

Mysql基础教程(15):别名

MySQL 别名 在本文中&#xff0c;我们讨论了 MySQL 中的列别名&#xff0c;表别名和派生表别名&#xff0c;以及使用别名来简化 SQL 和提高 SQL 的可读性。 如果在一个 SQL 中涉及到多个表&#xff0c;我们需要使用 table_name.column_name 这样的方式来引用每个表的字段&…