【echarts】自定义legend样式 echarts图例与⽂字对齐问题

news2025/1/7 10:24:41

较完整的使用介绍参考:https://blog.csdn.net/changyana/article/details/126281275

起因

今天使⽤echarts时发现官⽹⽰例图例部分并没有进⾏对齐,⼀上⼀下逼死强迫。。。
在这里插入图片描述

解决办法

textStyle: {	// 添加
          	height: 10, // 关键在这个height设置
            rich: {
              a: {
              	// ...
              },
              b: {
				// ...
              },
              c: {
                // ...
              }
            }
legend: {
          orient: 'vertical',
          right: 10,
          y: 'center',
          icon: 'circle',			// 添加
          itemWidth: 10,
          itemHeight: 10,
          formatter: function(name) {	// 添加
            let total = 0
            let target
            for (let i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name === name) {
                target = data[i].value
              }
            }
            var arr = [
              '{a|' + name + '}',
              '{b|' + ((target / total) * 100).toFixed(2) + '%}',
              '{c|' + target + '}'
            ]
            return arr.join('  ')
          },
          textStyle: {	// 添加
          	height: 10,
            padding: [8, 0, 0, 0],
            rich: {
              a: {
                fontSize: 15,
                width: 110
              },
              b: {
                fontSize: 15,
                width: 70,
                color: '#c1c1c1'
              },
              c: {
                fontSize: 15
              }
            }
          }
},

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

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

相关文章

前端开发-异常问题记录

Q1&#xff1a;Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示&#xff1b; 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决 Q2&#xff1a;浏览器跨域问题&#xff08;通过配置浏览器解决&#xff09; 将chrome浏览器复制一个进行修改&#xff…

CRM如何帮助企业提高工作效率?

企业管理者在创建团队时&#xff0c;除了要凝聚人心&#xff0c;更注重效率&#xff0c;企业团队的工作效率直接决定了企业的生产力&#xff0c;生产力决定战斗力&#xff0c;使用CRM系统可以帮助企业提高工作效率。 前言 企业管理者在创建企业团队时&#xff0c;除了要凝聚人…

IOS开发基础 · SwiftUI · StanfordCS193p Lecture3-4

IOS开发Lecture3MVVMVarieties of Typesstruct & classdont care - genericsFunctionClosuresprivate(set)for函数作为参数传给函数初始化顺序Lecture4修改代码View界面预览代码修改构建View-ViewMode点击事件让bool值反转internal external nameprint("\( )")st…

NeurIPS 2022: S3GC 可扩展图聚类

talk 文章的创新性不大&#xff0c;meta-review是给了 如果还可接收&#xff0c;再考虑。 但是 本文确实是 可扩展图聚类的重要一步。已有的方法 或多或少只在 小的数据集上 进行聚类。 存在一些非聚类的通用gnn方法进行采样。本文就是利用采样降低复杂度&#xff0c;并进行大…

基于FPGA的UDP 通信(四)

引言 前文链接&#xff1a; 基于FPGA的UDP 通信&#xff08;一&#xff09; 基于FPGA的UDP 通信&#xff08;二&#xff09; 基于FPGA的UDP 通信&#xff08;三&#xff09; 本文基于FPGA与MATLAB作千兆以太网通信模块UDP数据接收实验板级验证&#xff1a;FPGA接收上位机数…

大前端 TOB 0.5 WordPress模板 漂亮大气自适应多终端多功能

tob主题基于WordPress程序&#xff0c;响应式布局支持电脑、平板和手机的完美展示。tob适用于各种图片展示网站、新闻站、电影站、美图站、资源站等等&#xff0c;扁平化设计、公众号展示、打赏功能、列表无限加载、相册功能。tob是基于WordPress程序的主题&#xff0c;由theme…

多线程与高并发(五)

【ReentrantLock源码】&#xff1a; 【AQS源码】&#xff1a; 【公平与非公平】&#xff1a; 【公平】&#xff1a; 线程想要获得一把锁&#xff0c;乖乖的去这把锁的等待队列里排队————公平。 【非公平】&#xff1a; 线程想要获得一把锁&#xff0c;不去排队&#xff0c…

嵌入式实时操作系统的设计与开发(九)

同步机制 aCoral信号量机制不仅可以实现临界资源互斥访问&#xff0c;控制系统中临界资源多个实例的使用&#xff0c;还可以用于维护线程之间、线程和中断之间的同步。 当信号量用来实现同步时&#xff0c;起始值为0&#xff0c;如一个线程正在等待某个I/O操作&#xff0c;当…

【外贸小知识】通过whatsapp获取流量的几种小方法

相信做外贸的小伙伴们对于是whatsap比较熟悉的&#xff0c;都想通过whatsapp来获取更多流量&#xff0c;更多用户。今天我们花漾灵动小编就给大家汇总了通过whatsapp获取流量的几种小方法&#xff0c;希望能对新手小白有点作用哦&#xff01;通过whatsapp获取流量的几种小方法1…

【PyTorch深度学习实践】07_Dataset和Dataloader

文章目录1. Epoch&#xff0c;Iteration&#xff0c;Batch-Size2. Dataset 和 Dataloader2.1 Dataset2.2 Dataloader2.2.1 例子2.2.2 enumerate函数3. 完整代码1. Epoch&#xff0c;Iteration&#xff0c;Batch-Size 参考博客 2. Dataset 和 Dataloader 参考博客 功能概览 2…

2023年浙江建筑八大员(标准员)精选真题题库及答案

百分百题库提供建筑八大员&#xff08;标准员&#xff09;考试试题、建筑八大员&#xff08;标准员&#xff09;考试真题、建筑八大员&#xff08;标准员&#xff09;证考试题库等,提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 14.根据《施工现场临…

Electron Vue之间的通讯 自定义标题栏实现最小化全屏关闭功能

方便以后定制化使用&#xff0c;学习记录一下。 话不多说&#xff0c;先看看效果吧。 效果 版本 electron ^13.0.0 知识点 Vue 相互通讯 Electron 标题栏主要逻辑代码 新建public\preload.js文件&#xff0c;用于前端全局发送和监听消息。 const { contextBridge, ipcRen…

【Linux】Linux权限的理解

文章目录&#x1f3aa; Linux权限的理解&#x1f680;1.shell命令及其运行原理&#x1f680;2.Linux权限概念⭐2.1 用户与root身份切换⭐2.2 用户与用户身份切换⭐2.3 单条指令提权&#x1f680;3.Linux文件权限⭐3.1 文件属性(第一个字符)⭐3.2 文件角色划分与文件属性⭐3.3 文…

线性代数第四章 向量组的线性相关性

向量组及其线性组合一.向量、向量组1.向量n个有次序的数a1,a2,...,an所组成的数组称为n维向量&#xff0c;这n个数称为该向量的n个分量&#xff0c;第i个数ai称为第i个分量n维向量可以写成一行&#xff0c;也可以写成一列&#xff0c;在没有指明是行向量还是列向量时&#xff0…

Authing 入选长城战略咨询《2022中国潜在独角兽企业研究报告》

12 月 23 日&#xff0c;长城战略咨询&#xff08;GEI&#xff09;发布《2022 中国潜在独角兽企业研究报告》&#xff08;下称《报告》&#xff09;。作为身份云行业领先的代表企业&#xff0c; Authing 凭借着过硬的技术实力和突出的创新能力&#xff0c;首次入选中国潜在独角…

软件测试工程师为什么要写测试用例?

软件测试工程师为什么要写测试用例&#xff1f;相信从事软件测试行业的从业者来讲&#xff0c;测试用例并不陌生。因为测试用例不仅仅是一组简单的文档&#xff0c;它包含前提条件、输入、执行条件和预期结果等等重要内容&#xff0c;并且能够完成一定的测试目的和需求。下面本…

深度学习(20)—— ConvNext 使用

深度学习&#xff08;20&#xff09;—— ConvNext 使用 本篇主要使用convnext做分类任务&#xff0c;其中使用convnext-tiny&#xff0c;其主要有5块 stage0stage1stage2stage3head 文章目录深度学习&#xff08;20&#xff09;—— ConvNext 使用Part 1 ModelPart 2 Traini…

【数据结构】一篇博客带你实现双向带头循环链表!!!(零基础小白也可以看懂)

目录 0.前言 1. 简述双向带头链表 2.双向带头循环链表的实现 2.1 设计双向带头循环链表结构体 2.2双向带头循环链表的初始化 2.3双向带头循环链表的尾插 2.4双向带头循环链表的尾删 2.5双向带头循环链表的头插 2.6双向带头循环链表的头删 2.7双向带头循环链表的插入 …

【面试题】notify() 和 notifyAll()方法的使用和区别

【面试题】notify() 和 notifyAll()方法的使用和区别 Java中notify和notifyAll的区别 何时在Java中使用notify和notifyAll&#xff1f; 【问】为什么wait()一定要放在循环中&#xff1f; Java中通知和notifyAll方法的示例 Java中通知和notify方法的示例 Java中notify和no…

22年我在CSDN做到了名利兼收

写在前面 hi朋友&#xff0c;我是几何心凉&#xff0c;感谢你能够点开这篇文章&#xff0c;看到这里我觉得我们是有缘分的&#xff0c;因着这份缘分&#xff0c;我希望你能够看完我的分享&#xff0c;因为下面的分享就是要汇报给你听的&#xff0c;这篇文章是在 2022 年 12 月 …