【echarts】legend长度过长,内容过多导致换行怎么办?

通过设置翻页即可解决该问题
在这里插入图片描述

关键代码:

	  type: 'scroll',// pageFormatter: '', // 隐藏翻页的数字pageButtonItemGap: 2, // 翻页按钮的两个之间的间距pageIconColor: '#6495ed', // 翻页下一页的三角按钮颜色pageIconInactiveColor: '#aaa', // 翻页(即翻页到头时)pageIconSize: 7, // 翻页按钮大小pageButtonGap: 10, // 翻页按钮与图例的间距

完整示例代码:

legend: {data: data?.map((item) => item.companyName),selectedMode: true, // 当selectedMode为false时,tooltip不生效!!!【巨坑】icon: 'path://M42,8.5 C42.8284271,8.5 43.5,9.17157288 43.5,10 C43.5,10.8284271 42.8284271,11.5 42,11.5 C35.8883895,11.5 32.0936192,12.8449819 29.7619812,15.3885869 C28.0373078,17.2700488 27.2535726,19.2375848 26.0644683,23.9296711 L25.7304159,25.2507287 C24.4779324,30.1177632 23.5588794,32.3374253 21.4494812,34.6385869 C18.4873692,37.8699819 13.8883895,39.5 7,39.5 C6.17157288,39.5 5.5,38.8284271 5.5,38 C5.5,37.1715729 6.17157288,36.5 7,36.5 C13.1116105,36.5 16.9063808,35.1550181 19.2380188,32.6114131 C20.9626922,30.7299512 21.7464274,28.7624152 22.9355317,24.0703289 L23.2695841,22.7492713 C24.5220676,17.8822368 25.4411206,15.6625747 27.5505188,13.3614131 C30.5126308,10.1300181 35.1116105,8.5 42,8.5 Z',itemWidth: 30,itemHeight: 30,left: 0,type: 'scroll',// pageFormatter: '', // 隐藏翻页的数字pageButtonItemGap: 2, // 翻页按钮的两个之间的间距pageIconColor: '#6495ed', // 翻页下一页的三角按钮颜色pageIconInactiveColor: '#aaa', // 翻页(即翻页到头时)pageIconSize: 7, // 翻页按钮大小pageButtonGap: 10, // 翻页按钮与图例的间距orient: 'horizontal',pageIcons: {horizontal: ['path://M58.9668995833333 84.5129995833333L112.2976925 125.5366866666667C121.4175704166667 132.55197725 134.4977091666667 130.8458722083333 141.5129995833334 121.7259941666667C144.3144195833334 118.0841483333333 145.8333333333334 113.6183570833333 145.8333333333334 109.0236866666667L145.8333333333334 26.9763133333333C145.8333333333334 15.4703808333333 136.5059320833334 6.14298 125 6.14298C120.4053295833334 6.14298 115.9395383333334 7.66189375 112.2976925 10.4633133333333L58.9668995833333 51.4870004166667C49.8470216666667 58.5022908333333 48.1409166666667 71.5824295833333 55.1562075 80.7023075C56.2560975 82.1321645833333 57.5370425 83.4131095833333 58.9668995833333 84.5129995833333z','path://M137.7581054166667 85.1290041666667L86.85854125 120.36716375C77.3984533333333 126.91645525 64.4202875 124.55678875 57.8709958333333 115.0967008333333C55.4589158333333 111.612585 54.1666666666667 107.4757525 54.1666666666667 103.2381595833333L54.1666666666667 32.7618404166666C54.1666666666667 21.2559079166667 63.4940679166667 11.9285070833333 75 11.9285070833333C79.2375929166667 11.9285070833333 83.3744254166667 13.22075625 86.85854125 15.63283625L137.7581054166667 50.8709958333333C147.2181929166667 57.4202875 149.5778595833334 70.3984533333333 143.0285679166667 79.85854125C141.60285625 81.9179029166667 139.8174670833333 83.7032920833333 137.7581054166667 85.1290041666667z',],},formatter(name) {// 超过指定字符省略显示return name.length > 6 ? `${name.substr(0, 6)}...` : name;},tooltip: {show: true,},},

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

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

相关文章

vue三个点…运算符时报错 Syntax Error: Unexpected token

出现以下问题报错: 解决: 在项目根目录新建一个名为.babelrc的文件 {"presets": ["stage-2"] }

docker 部署 node.js(express) 服务

1、在 express 项目根目录下新增 Dockerfile 文件,内容如下: 创建服务容器的方法,可以根据自己的情况选择: 1、以下示例为宿主机没有安装 node 环境的写法; 2、先在本地构建包含 node 和 express 的基础镜像&#xff0…

视频监控/安防监控/AI视频分析/边缘计算/TSINGSEE青犀AI算法智慧仓储解决方案

随着全球经济与科学技术的双重推动,我国的仓储管理已经进入了高速发展时期,物流仓储也由简单的储藏仓库向智能化仓储转变。TSINGSEE青犀AI智慧仓储解决方案是利用先进的信息技术和物联网技术来提高仓储管理效率、降低成本的一种仓储管理模式。 方案功能 …

【Linux学习笔记】基础命令2

1. rmdir指令 && rm指令1.1. 基础概念1.2. 命令用法1.2.1. rmdir命令1.2.2. rm命令1.2.3. rm命令的注意事项 2. man命令3. cp指令3.1. cp指令基础概念3.2. cp命令的用法 4. mv命令5. cat命令6. more命令 && less命令6.1. more命令6.2. less命令 7. head命令和t…

基于springboot+vue的大学社团管理系统(前后端分离)

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容:毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

【算法】反悔贪心

文章目录 反悔贪心力扣题目列表630. 课程表 III871. 最低加油次数LCP 30. 魔塔游戏2813. 子序列最大优雅度 洛谷题目列表P2949 [USACO09OPEN] Work Scheduling GP1209 [USACO1.3] 修理牛棚 Barn RepairP2123 皇后游戏(🚹省选/NOI− TODO) 相关…

哪里可以了解轻量的工作流引擎?

如果想要实现高效率的办公,可以使用轻量的工作流引擎低代码技术平台。随着工作量日益繁重起来,传统的办公制作方式已经无法满足现实需要的,采用轻量级的表格制作工具,就能在无形中缓解办公压力,创造更高效、灵活、优质…

【Java】线程池八股文一

日常工作中有用到线程池吗?什么是线程池?为什么要使用线程池? 作为 JUC 包下的门面担当,线程池是名副其实的 JUC 一哥,不了解线程池,那说明你对 JUC 包其他工具也了解的不咋样吧,对 JUC 没深入…

成绩定级脚本(Python)

成绩评定脚本 写一个成绩评定的python脚本,实现用户输入成绩,由脚本来为成绩评级: #成绩评定脚本.pyscoreinput("please input your score:") if int(score)> 90:print("A") elif int(score)> 80:print("B&…

error:03000086:digital envelope routines::initialization error

项目背景 前端vue项目启动突然报错error:03000086:digital envelope routines::initialization error 我用的开发工具是vscode,node版本是v18.17.0 前端项目版本如下↓ 具体报错如下↓ 报错原因 node版本过高 解决方法 1输入命令 $env:NODE_OPTIONS"--op…

【Redis】Lua脚本在Redis中的基本使用及其原子性保证原理

文章目录 背景一、Eval二、EvalSHA三、Redis 对 Lua 脚本的管理3.1 script flush3.2 script exists3.3 script load3.4 script kill 四、Lua在Redis中原子性执行的原理 背景 Lua 本身是一种轻量小巧的脚本语言,在Redis2.6版本开始引入了对Lua脚本的支持。通过在服务…

社群团购对接,【概率思维】可以增加你做项目的成功率!

社群团购对接,【概率思维】可以增加你做项目的成功率! 今天来聊一个关于概率的问题,我们不管去做社群团购项目、做流量,还是做销售,我们都要有概率思维,有了这个思维以后,就可以增加你的成功率…

QT 完成登陆界面跳转到聊天室+完成学生管理系统的查找和删除功能

一、完成登陆界面跳转到聊天室 1> 项目结构 2> 源码 ① .pro ②main #include "mywnd.h" #include"chatCli.h" #include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);MyWnd w;w.show();Form f;QObject::co…

Spring-MVC的文件上传下载,及插件的使用(让项目开发更节省时间)

目录 一、概述 ( 1 ) 介绍 ( 2 ) 讲述 二、上传 三、下载 四、jrebel的使用 五、多文件上传 给我们带来什么收获 一、概述 ( 1 ) 介绍 Spring MVC的文件上传下载是指在Spring MVC框架中实现文件的上传和下载功能。文件上传是指将本地计算机上的文件上传到服务器端…

vue+antd——实现table表格的打印——分页换行,每页都有表头——基础积累

这里写目录标题 场景效果图功能实现1&#xff1a;html代码功能实现2&#xff1a;css样式功能实现3&#xff1a;js代码补充内容page-break-inside 属性page-break-after属性page-break-before 属性 场景 最近在写后台管理系统时&#xff0c;遇到一个需求&#xff0c;就是要实现…

电池电动汽车的健康状态 SOH 和充电状态 SOC 估计

微❤关注“电气仔推送”获得资料 主要内容&#xff1a; 健康状态 SOH采用平均加权最小二乘法&#xff08;AWTLS&#xff09;进行估计&#xff0c;并对比了加权最小二乘 &#xff08;WLS&#xff09;、总最小二乘法&#xff08;TLS&#xff09;以及加权总最小二乘法&#xff0…

Python基于Flask的高校舆情分析,舆情监控可视化系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 运行效果图 基于Python的微博大数据舆情分析&#xff0c;舆论情感分析可视化系统 系统介绍 微博舆情分析系…

小白备战大厂算法笔试(五)——树

文章目录 二叉树常用术语初始化插入与删除常见类型满二叉树完全二叉树完满二叉树平衡二叉树 二叉树退化二叉树遍历层序遍历前序、中序、后序遍历 数组表示二叉树表示完美二叉树表示任意二叉树 二叉搜索树查找节点插入节点删除节点遍历有序搜索效率常见应用 AVL树常见术语节点高…

(高频面试1)Redis缓存穿透、缓存击穿、缓存雪崩

目录 一&#xff1a;缓存数据 1.1 应用场景 1.2&#xff1a;缓存数据出现的问题 1.2.1 缓存穿透 1.2.2 解决办法 1.2.3 缓存击穿 1.2.4 解决办法 1.2.5 缓存雪崩 1.2.6 解决办法 一&#xff1a;缓存数据 1.1 应用场景 数据库查询结果缓存是一种常见的缓存应用场景&a…

性能测试度量指标

1-响应时间 响应时间指从用户或事务在客户端发起一个请求开始&#xff0c;到客户端接收到从服务器端返回的响应结束&#xff0c;这整个过程所消耗的时间 在性能测试实践中&#xff0c;为了使响应时间更具代表性&#xff0c;响应时间通常是指事务的平均响应时间ART 在实践中要…