echarts - legend设置宽度不生效

如图,想要这样的设计,文字和百分比都各自垂直对齐。
在这里插入图片描述
本来想要设置 legend.width ,但是设置了不生效,后来找到了原因。

orient=“horizontal” 的时候,只有width会起作用,height为auto;orient=“vertical” 的时候只有height会起作用,width为auto。

所以可以换种角度,用富文本实现。注意,rich 参数只有指定了 formatter 后才有效


      legend: {
        formatter: function (data) {
          const { name, percent } = data;
          return `{a|${name}}` + `{b|${percent}}`;
        },
        textStyle: {
          rich: {
            a: {
              width: 120,
              fontSize: 14,
              fontWeight: 400,
            },
            b: {
              fontSize: 16,
              fontWeight: 700,
            },
          },
        },
      },

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

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

相关文章

深入了解鸿鹄工程项目管理系统源码:功能清单与项目模块的深度解析

工程项目管理软件是现代项目管理中不可或缺的工具,它能够帮助项目团队更高效地组织和协调工作。本文将介绍一款功能强大的工程项目管理软件,该软件采用先进的Vue、Uniapp、Layui等技术框架,涵盖了项目策划决策、规划设计、施工建设到竣工交付…

GO语言笔记2-变量与基本数据类型

变量使用步骤 声明赋值使用 package main import "fmt" func main(){var age int //声明一个 int类型的变量叫ageage 18 //给变量用 赋值fmt.Println(age) //使用变量 输出变量的值 } 编译运行输出变量值 变量的四种使用方式 package main import "fmt&q…

vue3 +TS 安装使用router路由模块

一.安装 1.下载安装依赖 npm install vue-routernextnpm install types/vue-router2.router目录创建 在src 目录下 创建 /src/router文件夹 包含两个文件 route.ts import { RouteRecordRaw } from vue-routerconst routes: Array<RouteRecordRaw> [{path: /,name:…

代码随想录算法训练营Day19 | 77.组合、216.组合总和|||、17.电话号码的字母组合

回溯问题的模板 public static void backtracking(参数列表){if(终止条件){存放结果return;}for(选择&#xff1a;本层集合中元素&#xff08;树中节点孩子的数量就是集合的大小&#xff09;){处理节点;backtracking(路径&#xff0c;选择列表); // 递归回溯&#xff0c;撤销处…

3D的兔子=2D的lena?

大家好&#xff0c;今天分享一个资源&#xff0c;免费。 斯坦福兔子是3D初学者绕不开的一张图吧&#xff1f; 今天我简单用pcl读一下&#xff0c;并且把pcd文件分享一下&#xff0c;大家有需要自取。 #include <pcl/io/pcd_io.h> #include <pcl/visualization/cloud…

java⽇志体系

⽇志体系 1.体系概述2.日志的使用1.上古时代的sout2.开创先驱的log4j3.搞事情的JUL4.应运⽽⽣的JCL5.再起波澜的logback6.再度⻘春的log4j2 本篇在jdk21下测试通过 1.体系概述 1.日志接口 JCL&#xff1a;Apache基⾦会所属的项⽬&#xff0c;是⼀套Java⽇志接⼝&#xff0c;之…

python基础练习之—Series

Series介绍&#xff1a; Pandas Series 类似表格中的一个列&#xff08;column&#xff09;&#xff0c;类似于一维数组&#xff0c;可以保存任何数据类型。Series 由索引&#xff08;index&#xff09;和列组成&#xff0c;可以通过列表&#xff0c;元组&#xff0c;数组&…

qss设置某一个widget下的Checkbox的样式

#ObjectName 控件名称{属性&#xff1a;值&#xff1b;属性1&#xff1a;值1} 如下&#xff1a; 效果&#xff1a;

【QT-UI】

1.使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 #include "mainwindow.h" #include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), …

K2P路由器刷OpenWrt官方最新版本固件OpenWrt 23.05.2方法 其他型号的智能路由器OpenWrt固件刷入方法也基本上适用

最近路由器在开机时总出问题,于是就那他来开刀,直接刷一个OpenWrt官方最新版本的固件, 刷其他第三方的固件总是觉得不安全, 而且很多第三方固件都带了些小工具,始终会有安全隐患, 而且占用内存空间太多,本来这个东西就没有多少内存,于是就干脆刷一个官方的原始固件(才6.3M, 相…

分析一个项目(微信小程序篇)一

分析一个项目讲究的是如何进行对项目的解析分解&#xff0c;进一步了解项目的整体结构&#xff0c;熟悉项目的结构&#xff0c;能够知道每个组件所处在哪个位置&#xff0c;发挥什么作用。 本次所介绍的是微信小程序项目&#xff08;甑选商场&#xff09;&#xff1a; 其首页…

论文阅读 BERT GPT - transformer在NLP领域的延伸

文章目录 不会写的很详细&#xff0c;只是为了帮助我理解在CV领域transformer的拓展1 摘要1.1 BERT - 核心1.2 GPT - 核心 2 模型架构2.1 概览 3 区别3.1 finetune和prompt 3.2 transformer及训练总结 不会写的很详细&#xff0c;只是为了帮助我理解在CV领域transformer的拓展 …

js(JavaScript)数据结构之数组(Array)

什么是数据结构&#xff1f; 下面是维基百科的解释&#xff1a; 数据结构是计算机存储、组织数据的方式。数据结构意味着接口或封装&#xff1a;一个数据结构可被视为两个函数之间的接口&#xff0c;或者是由数据类型联合组成的存储内容的访问方法封装。 我们每天的编码中都会…

Qt QLabel标签控件

文章目录 1 属性和方法1.1 文本1.2 对齐方式1.3 换行1.4 图像 2. 实例2.1 布局2.2 为标签添加背景色2.3 为标签添加图片2.4 代码实现 QLabeI是Qt中的标签类&#xff0c;通常用于显示提示性的文本&#xff0c;也可以显示图像 1 属性和方法 QLabel有很多属性&#xff0c;完整的可…

鸿鹄电子招投标系统源码实现与立项流程:基于Spring Boot、Mybatis、Redis和Layui的企业电子招采平台

随着企业的快速发展&#xff0c;招采管理逐渐成为企业运营中的重要环节。为了满足公司对内部招采管理提升的要求&#xff0c;建立一个公平、公开、公正的采购环境至关重要。在这个背景下&#xff0c;我们开发了一款电子招标采购软件&#xff0c;以最大限度地控制采购成本&#…

Spring MVC学习之——入门

Spring MVC 介绍 Spring MVC 是Spring框架的一个模块&#xff0c;是一个基于 MVC 设计模式的轻量级 Web 开发框架&#xff0c;本质上相当于 Servlet。 SpringMVC 是 Spring 为表示层开发提供的一整套完备的解决方案。在表述层框架历经 Strust、WebWork、Strust2 等诸多产品的…

作业--day43

使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数&#xff0c;将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c…

图像分割实战-系列教程12:deeplab系列算法概述

&#x1f341;&#x1f341;&#x1f341;图像分割实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 1、空洞卷积 图像分割中的传统做法&#xff1a;为了增大感受野&#xff0c;通常都会选择pooling操…

centos7 yum添加源或换源

yum添加源或换源 一般来说yum源是我们需要下载的软件的远程仓库地址(当然也可以配置本地源)&#xff0c;centos系统带有几个官方源&#xff0c;默认启用的仅有base,updates和extras三个。有时我们需要的软件在官方源中没有&#xff0c;这时我们就需要添加第三方源或换默认源。…

Halcon根据灰度特征值选择区域select_gray

Halcon根据灰度特征值选择区域 与select_shape算子类似&#xff0c;灰度值图像也可以快捷地根据特征值选择符合设定条件的区域。select_gray算子用于实现这一功能&#xff0c;该算子能接受一组区域作为输入&#xff0c;然后根据选定的特征计算其是否满足特定的条件。当所有区域…