echarts的图例换行并对齐

已于 2024-05-30 16:51:35 修改
阅读量418 收藏
点赞数 2
分类专栏： echarts 文章标签： echarts 前端
于 2024-05-30 16:13:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42255789/article/details/139326991
版权

现状：
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/1cfe8a2c77234a29ac940c4469ba5c3c.png

期望：
在这里插入图片描述

实现方式：
通过对legend的formatter和textStyle组合设置宽度来实现，代码如下
在这里插入图片描述
这里会出现一个问题，发现设置了width没有效果，刚开始以为是宽度给的不够，然后发现并不是，经过多方查找发现一定要设置lineHeight才有效，真真是折磨人，所以正确完整的设置如下图在这里插入图片描述

人鱼小姐ww
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts中的图例换行并对齐
qq_44271127的博客
11-14 1万+
通过练习，我总结了三种方式，方式一和方式二只能实现换行，方式三不仅可实现换行，还可以实现对齐。 方式一： legend: { x: 'right', bottom: '30', data: ['行业大类1', '行业大类2', '行业大类3', '\n','邮件营销', '联盟广告', '视频广告', '\n','百度', '谷歌', '必应'], }, 此种方法比较简单，在data中添加’\n’，可实现换行，但不会对齐，效果如下： 方式二： legend: [ { x: 'left',
ECharts图例换行及对齐问题解决方法
weixin_48911357的博客
05-23 1万+
ECharts图例换行及对齐问题解决方法
Echarts—自定义图例布局样式和图例换行的实现
前端探险家的博客
06-13 7437
之前做过各种各样需求的Echarts图表，通过查找博客和查看官网配置项api，都能实现，但是很久不用的话，再去做某些一样功能需求的图表，有些配置项还是需要反复查看，或者去搜索，所以我特意开了一个可视化专栏，去把使用过的可视化记录下来，也方便日后自己复用或者为他人提供便利！这次就记录一下自定义图例布局样式和图例换行的实现，我会把整个图表实现的代码都带出来，如果日后项目中用到类似的需求，也可以直接拿去！案例实现如下图；legend : {
Echarts 图例legend遇到的细节问题
u011558902的专栏
08-08 7355
1.图例手动换行 答：修改Legend.data 手动添加一个字符串 '' 就能实现手动换行 2.改变图例legend距离容器底部的距离，为了使在图例太多的情况下，出现重叠之类的问题 答：grid : { top : 40, //距离容器上边界40像素                  bottom: 30 //距离容器下边界30像素                 }  ...
echarts的legend(图例)中图例文本过长换行
qq_32538087的博客
10-25 8330
图例文本过长，空间太小放不下，想换行。 做之前我看了很多关于这个问题的解决方法，但是个人觉得不是很完美，因为有些需要给data中加\n等等，但是如果data是传过来的呢？这就不行了。 简单的逻辑写在注释里了 legend: { orient: 'vertical', right: 0, top: 30, itemWidth...
【已解决】Echarts报表表头过多情况下，图例与图表线条重叠显示
doleria的专栏
09-11 2万+
github地址：Data Visualization---------------------------------------------------------------------------------------------------------------------------------------当Echarts报表表头过多时，虽然Echarts会做自适应，但是由于图例文...
echarts2 饼图实例一则 自定义数据标签
风在身后的专栏
03-29 2万+
最近有网友想通过echarts2实现如下效果 该图的难点在于 图例和数据标签不一致，拿到这个需求之后我第一时间想的是转换成如下的效果 但是网友表示不能接受，所以我只要在去查阅echarts2的帮助文档，终于让我找到了方法，就是利于自定义itemStyle.label.formatter来实现，下面直接给出代码: option = { title : {
Echarts 饼图标题文字换行问题
热门推荐
卡卡goto
10-19 4万+
Echarts 饼图标题文字换行问题 var option = { title : { text: '数据来源', x:'center' }, tooltip : { trigger: 'item', formatter: "{b} : {c} ({d}%)" }, legend: { o
echarts 图例换行
weixin_43885687的博客
03-27 1万+
echarts 图例换行 以饼图为例 图例换行 在legend中，legend.data是显示图例的数组，如果没有则是用了默认的，官方文档有说明 let legendsData = ["银时", "银时5", "王二小", "猹", "ink", "i123nk", "321", "qqq", "oso", "V"]; //直接将数组放入legend中 图标换行 在所需换行的地方插入空的字符串...
echarts 图例 两行展示
rebooting_now的博客
09-30 3万+
昨天我们公司产品提了一个需求，一定要把折线图的图例做两行展示，而却还让两行图例对齐。如图：  我看了一下官网的API还真有关于这个的设置。那么咱们就看一下关于echarts的图例的API吧。 legend.type (图例的类型)  plain  （普通图例，缺省就为普通图例 。scroll  可滚动翻页的图例。当图例数量较多时可以使用。） legend.zlevel  :zlevel用...
ECharts多行文字两端对齐饼图.zip
09-03
一种常见的方法是使用HTML的` `标签进行换行，并结合CSS的`text-align`属性实现两端对齐。例如： ```javascript formatter: function (params) { let name = params.name; let value = params.value; // 将...
echarts图例集合（1）.zip
04-08
在图例配置中，可以设置`legend`对象，包含如`data`（图例项列表）、`show`（是否显示图例）、`type`（图例类型）、`align`（对齐方式）等属性。例如： ```javascript option = { legend: { show: true, orient:...
在echarts中图例legend和坐标系grid实现左右布局实例
09-16
主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Echarts图例控制Y轴.html
09-27
因为需求是要点击echarts自身的图例控制y轴的隐藏，而echarts官方文档中是点击图例隐藏y轴上的数据，可有时候业务上需要的y轴可能很多，所以这时候需要控制显示最初显示哪些y轴，并且可以根据图例控制需要展示的Y轴...
echarts设置图例颜色和地图底色的方法实例
12-09
要改变图例颜色，你需要在对应系列的配置中添加`itemStyle.normal.color`属性，并赋予所需的颜色值。例如： ```javascript { // ...其他配置项 series: [{ name: '系列名称', type: 'map', mapType: 'china', ...
echarts饼图图例换行
最新发布
m0_48353529的博客
03-19 826
【代码】echarts饼图图例换行。
axlegend:创建底部居中的图例并重新对齐图形轴。-matlab开发
05-30
您需要在图形的底部中心放置一个图例吗？ 可能会发生位于 Southoutside 的 LEGEND 会与您的图形轴重叠。 为了克服这个问题，我使用 AXLEGEND。 增强可以应用于具有单个绘图或一组子绘图的图形。 查阅 hlp 部分和...
Echarts 地图图表示例
11-10
1. `series`：这是ECharts中数据的主要载体，对于地图图表，我们需要设置`type`为`'map'`，并指定地图类型，如`'china'`或`'baidu'`。 2. `mapType`：设置地图的类型，如果是Baidu地图，应设为`'baidu'`。 3. `...
ECharts图例换行及对齐问题
04-27
ECharts图例的换行和对齐可以通过调整图例的排列方式来实现。具体的方法如下： 1. 使用legend.type属性指定图例的排列方式，可以使用'plain', 'scroll'或者'plain' + 'scroll'，其中'plain'表示图例排列在一行或一列中，'scroll'表示图例可以通过滚动查看，'plain' + 'scroll'表示图例先按照一行或一列排列，当不足时自动换行或换列。 2. 使用legend.orient属性指定图例的方向，可以使用'horizontal'表示水平方向，'vertical'表示垂直方向。 3. 使用legend.width属性指定图例的宽度，可以使用像素值或百分比。 4. 使用legend.itemGap属性指定图例项之间的间距，可以使用像素值或百分比。 通过以上方法可以实现ECharts图例的换行和对齐。具体的示例代码如下： ```javascript option = { legend: { type: 'scroll', orient: 'horizontal', width: '80%', itemGap: 10, data: ['图例1', '图例2', '图例3', '图例4', '图例5', '图例6', '图例7', '图例8', '图例9', '图例10', '图例11', '图例12'] }, series: [ { name: '系列1', type: 'pie', radius: '55%', data: [ {value: 335, name: '图例1'}, {value: 310, name: '图例2'}, {value: 234, name: '图例3'}, {value: 135, name: '图例4'}, {value: 1548, name: '图例5'}, {value: 1548, name: '图例6'}, {value: 1548, name: '图例7'}, {value: 1548, name: '图例8'}, {value: 1548, name: '图例9'}, {value: 1548, name: '图例10'}, {value: 1548, name: '图例11'}, {value: 1548, name: '图例12'} ] } ] }; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值