【echarts饼图】legend显示data中的name和value

news2024/10/6 12:25:22

效果图:
在这里插入图片描述

legend自定义显示格式:

 legend: {
    formatter: function (name) {
      let v;
      optionCheck.series.data.forEach((item) => {
        if (item.name === name) {
          v = item.value;
        }
      });
      return name + ' ' + v;
    },
  },

全部配置项:

const optionCheck = reactive({
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    right: 'right',
    y: 'center',
    // 设置图例形状
    icon: 'circle',
    itemWidth: 16, // 设置宽度
    itemHeight: 16, // 设置高度
    textStyle: {
      fontSize: 14,
    },
    formatter: function (name) {
      let v;
      optionCheck.series.data.forEach((item) => {
        if (item.name === name) {
          v = item.value;
        }
      });
      return name + ' ' + v;
    },
  },
  series: {
    type: 'pie',
    labelLine: {
      show: false,
    },
    label: {
      show: false,
    },
    emphasis: {
      label: {
        show: false,
      },
    },
    radius: ['50%', '70%'],
    // 设置饼状图在画布中的位置
    center: ['20%', '50%'],
    data: [],
  },
});

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

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

相关文章

Shell脚本学习-MySQL单实例和多实例启动脚本

已知MySQL多实例启动命令为: mysqld_safe --defaults-file/data/3306/my.cnf & 停止命令为: mysqladmin -uroot -pchang123 -S /data/3306/mysql.sock shutdown 请完成mysql多实例的启动脚本的编写: 问题分析: 要想写出脚…

BES 平台 SDK之提示音的添加

本文章是基于BES2700 芯片,其他BESxxx 芯片可做参考,如有不当之处,欢迎评论区留言指出。仅供参考学习用! BES 平台 SDK之按键的配置_谢文浩的博客-CSDN博客 关于系统按键简介可参考上一篇文章。链接如上所示! 一&am…

工作流管理软件的好处:提升效率、优化流程的利器

一旦您投资了工作流管理系统,就没有回头路了。这是让您的员工满意的完美公式,同时确保所有流程以最高效率和及时完成。事实证明,这些实用的工作流程管理工具对为其客户提供基于知识的专业服务的组织有益(在我们的专业服务指南中了…

【3维视觉】3D空间常用算法(点到直线距离、面法线、二面角)

3D空间点到直线的距离 3D空间点到直线的距离 3D空间的曲率 三维空间有三个基本元素,点,线,面。那么曲率是如何定义的呢? 点的曲率? 线的曲率? 面的曲率? 法曲率 设曲面上的曲线在某一点处的切…

【Spring Boot】请求参数传json数组,后端采用(pojo)新增案例(103)

请求参数传json数组,后端采用(pojo)接收的前提条件: 1.pom.xml文件加入坐标依赖:jackson-databind 2.Spring Boot 的启动类加注解:EnableWebMvc 3.Spring Boot 的Controller接受参数采用:Reque…

第一个 vue-cli 项目

一、什么是 vue-cli vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加…

为什么数字孪生和GIS高度互补?它们是如何实现互补的?

在数字化时代,数字孪生和GIS作为两项重要技术,它们的融合正日益受到人们的关注和认可。数字孪生是将实体世界与数字世界紧密结合的技术,可以创建实时的虚拟副本,对物理系统进行模拟、优化和预测。而GIS则是用于收集、管理、分析和…

js将当前时间转换成标准的年月日

直接上代码了: /*** * param e 转换成标准的年月日进行拆分* returns */changeCreationtime(e:any) {let year e.getFullYear(),month (e.getMonth() 1) > 9 ? (e.getMonth() 1) : 0 (e.getMonth() 1),day e.getDate() > 9 ? e.getDate() : 0 e.get…

__block的深入研究

__block可以用于解决block内部无法修改auto变量值的问题 __block不能修饰全局变量、静态变量(static) 编译器会将__block变量包装成一个对象 调用的是,从__Block_byref_a_0的指针找到 a所在的内存,然后修改值 第一层拷贝&…

VLAN介绍

目录 VLAN的特点: VLAN的好处: VLAN的实现原理 VLAN标签 VLAN的划分方式 接口划分VLAN--接口类型 Access接口 Trunk接口 Hybrid接口 实现VLAN之间通信 使用路由器物理接口 使用子接口 使用三层交换机的VLANIF接口 配置 VLANIF的转发流程 三层交换机参与下的三层…

【图解】Mask R-CNN 架构

Mask R-CNN 是一种自顶向下(top-down)的姿态估计模型,它是在 Faster R-CNN [44] 这个目标检测框架的基础上扩展而来的。目标检测是指从图像中检测出不同类别的物体,并且输出它们的边界框(bounding box)。 …

exp/imp选项说明

1、exp选项 2、imp选项 3、举例 (1)、imp system/manager filetank logtank fromuser(seapark,amy) touser(seapark1, amy1);(2)、imp system/manager file(paycheck_1,paycheck_2,paycheck_3,paycheck_4) logpaycheck.log filesize1G fully;(3)、imp system/manager fileseap…

【css】解决元素浮动溢出问题

如果一个元素比包含它的元素高&#xff0c;并且它是浮动的&#xff0c;它将“溢出”到其容器之外&#xff1a;然后可以向包含元素添加 overflow: auto;&#xff0c;来解决此问题&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html> <head> <style>…

如何克服学习和工作中的焦虑和迷茫

如何克服学习和工作中的焦虑和迷茫 &#x1f607;博主简介&#xff1a;我是一名正在攻读研究生学位的人工智能专业学生&#xff0c;我可以为计算机、人工智能相关本科生和研究生提供排忧解惑的服务。如果您有任何问题或困惑&#xff0c;欢迎随时来交流哦&#xff01;&#x1f6…

落实《中国人民银行业务领域数据安全管理办法》,极盾科技是怎么做的?

“软标准”变成“硬规范”&#xff01; 近日&#xff0c;央行发布《中国人民银行业务领域数据安全管理办法》征求意见稿&#xff08;以下称《管理办法》&#xff09;&#xff0c;以部门规范性文件的方式&#xff0c;全面衔接《数据安全法》&#xff0c;细化明确中国人民银行业…

村田授权代理:共模扼流线圈针对汽车专用设备高频噪声的降噪对策

车载市场正不断扩充ADAS、自动驾驶、V2X、车载信息系统等的应用。由于此类应用要处理庞大的信息&#xff0c;因此为了执行处理&#xff0c;内部处理信号的处理速度亦不断高速化。另一方面&#xff0c;由于部件数量增多&#xff0c;安装密度增大&#xff0c;因此要求部件小型化。…

364 · 接雨水 II

链接&#xff1a;九章算法 - 帮助更多程序员找到好工作&#xff0c;硅谷顶尖IT企业工程师实时在线授课为你传授面试技巧 题解&#xff1a; 九章算法 - 帮助更多程序员找到好工作&#xff0c;硅谷顶尖IT企业工程师实时在线授课为你传授面试技巧

OpenAI的提供的Model简要介绍

OpenAI提供的model 通过OpenAI的接口可以查看所有支持的模型(目前的账号无GPT4的权限&#xff0c;所以没有列举GPT4相关的模型)。 import os import openai import pandas as pd from IPython.display import displayopenai.api_key os.getenv("OPENAI_API_KEY")…

记录一下点亮过的技能点

一年级 软件工程导论也就是 计算机导论&#xff0c;主要介绍计算机的发展历程概况&#xff0c;对计算机有个大体的了解。 编程语言学习 C语言&#xff0c;基础语法会用&#xff0c;其实现在忘得有点多了&#xff0c;需要多查询文档才行。 二年级 计算机组成原理&#xff0c;…

【LeetCode每日一题】——807.保持城市天际线

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 矩阵 二【题目难度】 中等 三【题目编号】 1572.矩阵对角线元素的和 四【题目描述】 给你一…