Echarts 环形图图例内容+数据+换行

news2024/11/24 17:32:03

在这里插入图片描述

由于legen.formatter return的数据并不支持直接换行所以只能用/n进行换行。但是使用\n后的内容并不能很好的进行对齐,刚开始也是困扰了我很久,毕竟UI图已经定稿只能硬着头皮上了。

说一下我的方法:

1.使用formatter 先拿到想要的数据然后用\n进行换行

   formatter: function (name) {
        var target;
        for (var j = 0; j < legenddata.length; j++) {
            if (legenddata[j].name === name) {
            target = legenddata[j].value
            }
        }
        return "{a|"+[name]+"}"+'\n'+"{b|"+'总金额'+[target]+"}"
    },

2.\n换行后用rich进行控制

textStyle:{
              rich:{
                  a:{
                      align:'center',
                      color:'#222222',
                      padding:[25,0,10,0],//主要是通过padding来控制位置
                      fontSize:14,
                      fontWeight:400
                  },
                  // 控制
                  b:{
                      align:'center',
                      color:'#999999',
                      position:'absolute',
                      padding:[0,0,0,-40],//主要是通过padding来控制位置
                      fontSize:12,
                      fontWeight:400
                  }
              }
       }

最后给大家贴一段示例代码

var legenddata = [
    {value: 1048, name: '搜索引擎'},
    {value: 735, name: '直接访问'},
    {value: 580, name: '邮件营销'},
    {value: 484, name: '联盟广告'},
    {value: 300, name: '视频广告'}
    ]
option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}\n{c}元({d}%)'
    },
    legend: {
    	  top: '1%',
          left: '1%', 
          orient: 'vertical', 
        formatter: function (name) {
            var target;
            for (var j = 0; j < legenddata.length; j++) {
                if (legenddata[j].name === name) {
                target = legenddata[j].value
                }
            }
            return "{a|"+[name]+"}"+'\n'+"{b|"+'总金额'+[target]+"}"
        },
        textStyle:{
              rich:{
                  a:{
                      align:'center',
                      color:'#222222',
                      padding:[25,0,10,0],
                      fontSize:14,
                      fontWeight:400
                  },
                  b:{
                      align:'center',
                      color:'#999999',
                      position:'absolute',
                      padding:[0,0,0,-40],
                      fontSize:12,
                      fontWeight:400
                  }
              }
       }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '20%'],
            center: ['50%', '40%'],
            labelLine: {
                length: 100,
            },
            label: {
                formatter: '{d}%',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                    a: {
                        color: '#6E7079',
                        lineHeight: 22,
                        align: 'center'
                    },
                    hr: {
                        borderColor: '#8C8D8E',
                        width: '100%',
                        borderWidth: 1,
                        height: 0
                    },
                    b: {
                        color: '#4C5058',
                        fontSize: 14,
                        fontWeight: 'bold',
                        lineHeight: 33
                    },
                    per: {
                        color: '#fff',
                        backgroundColor: '#4C5058',
                        padding: [3, 4],
                        borderRadius: 4
                    }
                }
            },
            data: legenddata
        }
    ]
};

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

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

相关文章

2023年07月编程语言流行度排名

点击查看最新编程语言流行度排名&#xff08;每月更新&#xff09; 2023年07月编程语言流行度排名 编程语言流行度排名是通过分析在谷歌上搜索语言教程的频率而创建的 一门语言教程被搜索的次数越多&#xff0c;大家就会认为该语言越受欢迎。这是一个领先指标。原始数据来自…

SAP 销售订单状态修改

FM: I_CHANGE_STATUS 代码样例&#xff1a; FUNCTION zjkdms003. *"---------------------------------------------------------------------- *"*"本地接口&#xff1a; *" IMPORTING *" VALUE(I_VBELN) TYPE VBELN_VA OPTIONAL *" EX…

初中数学知识点-约数倍数

1、约数&#xff08;因数&#xff09;、倍数 整数a除以整数b(b≠0) 除得的商正好是整数而没有余数&#xff0c;我们就说a能被b整除&#xff0c;或b能整除a。 a称为b的倍数&#xff0c;b称为a的约数。约数&#xff0c;又称因数。 2、公约数、最大公约数 几个数公有的约数,叫…

Spark(10):RDD依赖关系

目录 0. 相关文章链接 1. RDD 血缘关系 2. RDD依赖关系 3. RDD窄依赖 6. RDD宽依赖 7. RDD阶段划分 8. RDD阶段划分源码 9. RDD任务划分 0. 相关文章链接 Spark文章汇总 1. RDD 血缘关系 RDD 只支持粗粒度转换&#xff0c;即在大量记录上执行的单个操作。将创建 RDD …

HDLBits刷题笔记7:Circuits.Combinational Logic.Karnaugh Map to Circuit

Karnaugh Map to Circuit 3-variable 实现如下卡诺图&#xff0c;用sop和pos两种方式 化简&#xff1a; module top_module(input a,input b,input c,output out ); // sop和pos相同assign out a | b | c; endmodule4-variable 实现如下卡诺图&#xff0c;用sop和pos两种方…

【RabbitMQ】

一、概念 MQ&#xff08;消息队列&#xff09;&#xff1a;是指在消息传送过程中保存消息的容器&#xff0c;用于分布式系统之间的通信 生产者&#xff1a;是发送消息的用户应用程序。 队列&#xff1a;是存储消息的缓冲区。 消费者&#xff1a;是接收消息的用户应用程序。 1…

前端开发在公司中的位置以及日常工作内容

导读 俗话说的好&#xff0c;不谋全局者不足谋一域。 上一篇文章我们介绍了计算机相关的各种不同方向&#xff0c;相信大家心里也有自己所喜欢的职业&#xff0c;那么今天我们继续讲讲在一个公司中前端开发处于什么样的地位&#xff0c;以及前端的一天都干些什么 普通公司的…

太卷了,阿里一面试官把多年总结的Java八股文完全开源了.......

Java越来越卷了&#xff0c;都快卷成韭菜花了&#xff0c;最近又赶上跳槽的高峰期&#xff0c;好多粉丝&#xff0c;都问我要有没有最新面试题&#xff0c;索性&#xff0c;前一阵子偶然得到一份阿里面试官整理的Java八股文&#xff0c;答案都整理好&#xff0c;整理的《互联网…

【Java基础教程】(二)入门介绍篇 · 下:从JDK下载安装到第一个“Hello World!”程序,解析PATH和CLASSPATH环境变量的妙用~

Java基础教程之入门介绍 下 本节学习目标1️⃣ JDK安装与配置2️⃣ 第一个Java程序&#xff1a;“Hello World!”3️⃣ 环境变量 CLASSPATH&#x1f33e; 总结 本节学习目标 JDK 安装与配置&#xff1b;理解环境变量PATH和CLASSPATH的主要作用&#xff1b;运行第一个Java程序…

Spark(11):RDD持久化

目录 0. 相关文章链接 1. RDD Cache 缓存 2. RDD CheckPoint 检查点 3. 缓存和检查点区别 0. 相关文章链接 Spark文章汇总 1. RDD Cache 缓存 RDD 通过 Cache 或者 Persist 方法将前面的计算结果缓存&#xff0c;默认情况下会把数据以缓存在 JVM 的堆内存中。但是并不是这…

关于Spring Boot的若干个重要问题

Spring Boot 1.什么是springboot 用来简化spring应用的初始搭建以及开发过程 使用特定的方式来进行配置&#xff08;properties或yml文件&#xff09; 创建独立的spring引用程序 main方法运行 嵌入的Tomcat 无需部署war文件 简化maven配置 自动配置spring添加对应功能starter…

nodejs-pm2管理js并发/自动重启/恢复等

目录 一、nodejs安装二、启动运行js三、实用功能1-pm2对进程名起别名四、实用功能2-pm2启动多个进程五、实用功能3-pm2内存限制自动重启六、实用功能4-服务器宕机前保存记录恢复进程 一、nodejs安装 nodejs安装使用nohup后台启动项目&#xff0c;倒是解决了控制台问题&#xf…

用Python从文件中读取学生成绩,并计算最高分/最低分/平均分

目录标题 前言环境使用:涉及知识点代码展示尾语 前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 今天咱们试试用Python从文件中读取学生成绩&#xff0c;并计算最高分/最低分/平均分。 环境使用: Python 3.8 解释器 Pycharm 编辑器 涉及知识点 文件读写 基础语法 字…

QQ邮箱第三方POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务授权码

参考QQ邮箱&#xff1a; 什么是授权码&#xff0c;它又是如何设置&#xff1f; 设置入口&#xff1a; 选择 账户 下拉找到POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务就好了。我这边已经开通&#xff0c;开通流程挺简单的&#xff0c;手机号绑定然后输入验证码就好了。

华安联大:基于北斗RTK+蓝牙AOA、UWB定位技术为智慧港口提供多元化解决方案

深圳华安联大创新科技有限公司的商场室内导航系统方案&#xff0c;解决传统购物中心用户体验差的缺点&#xff0c;可实现3大类功能应用: (1)实现顾客在商场内自主导航&#xff0c;室内位置实时分享&#xff0c;目的地商铺自主导航&#xff0c;路径规划等功能: (2)停车场反向寻…

CISA在三星和D-Link设备中发现8个被积极利用的漏洞

美国网络安全和基础设施安全局&#xff08;CISA&#xff09;根据已有的证据&#xff0c;将8个被积极利用的漏洞列入已知的漏洞&#xff08;KEV&#xff09;目录中。 这8个被积极利用的漏洞包括影响三星智能手机的六个漏洞和影响D-Link设备的两个漏洞。以下是这八个漏洞&#x…

Java jsp 实战

1.JSP执行过程&#xff08;原理&#xff09; 步骤1&#xff1a;翻译&#xff08;jsp-->java&#xff09; 步骤2&#xff1a;编译&#xff08;java-->class文件&#xff09; 步骤3&#xff1a;执行&#xff08;执行class(字节码)文件&#xff09; 2.JSP实战 步骤1&…

UE4中创建的瞄准偏移或者混合空间无法拖入动画

UE4系列文章目录 文章目录 UE4系列文章目录前言一、解决办法 前言 UE4 AimOffset(瞄准偏移)动画融合时&#xff0c;AimOffse动画拖入不了融合框的解决办法&#xff0c;你会发现动画无法拖入到融合框&#xff0c;ue4编辑器提示“Invalid Additive animation Type”&#xff0c;…

Android Studio最新好用的插件----Gson转Java实体类/Kotlin Data

1.Java 安装好插件之后&#xff0c;把Gson/Json数据复制一下&#xff0c;eg: { "Chrome": "UA-66061856-6", "ChromePro": "UA-66061856-9", "Opera": "UA-66061856-7", "Edge": "UA-66061856-8&q…

K8s 为什么要弃用 Docker

K8s 为什么要弃用 Docker 最近在学习容器技术的过程中&#xff0c;看到有关于Kubernetes“弃用 Docker”的事情&#xff0c;担心现在学 Docker 是否还有价值&#xff0c;是否现在就应该切换到 containerd 或者是其他 runtime。 随着深入了解&#xff0c;这些疑虑的确是有些道理…