[apache/echarts]图例是否可以定宽

2024-07-04 423 views
6
问题简述 (One-line summary)

尝试了配置项 itemWidth发现好像做不到这种图例定宽的效果,使不同文字长度的图例对齐

image

版本及环境 (Version & Environment)
  • ECharts 版本 (ECharts version): latest
  • 浏览器类型和版本 (Browser version): chrome
  • 操作系统类型和版本 (OS Version): mac os
重现步骤 (Steps to reproduce)

1. 2.

期望结果 (Expected behaviour)

请问是否有办法达到这种效果?

可能哪里有问题 (What went wrong) ECharts配置项 (ECharts option)
option = {

}
其他信息 (Other comments)

回答

9

width 属性

3

width 是对整个图例组件设置宽度,没办法使每项图例都定宽

0

@ruoqianfengshao 这种情况你可以设置itemGap

5

@MrChanLi2013 不行的,itemGap是设置间隔,我希望能让字数不同的图例对齐?

0

@MrChanLi2013 哦我懂你的意思了,是对每个图例判断字数然后设置itemGap吗?貌似逻辑可行,但是itemGap不是可以针对每个data item设置的。。一个图例组件只能有一个itemGap

4

@ruoqianfengshao 只有换种方式,我说的这个可以的,试一试吧

9

@MrChanLi2013 尝试了一下itemGap还是没搞定,没啥思路。。。能提示一下吗,谢谢啦 想到了两个方法大概可行

  1. 建立多个legend,然后对legend做排列
  2. 对文本做空格填充,把字少的文本补满到最长字数

不过都比较折腾,而且很多场景可能会有问题

8

@100pah 神奇,我研究一下,thx

0

mark @100pah 的方法需要对 legend.data 进行转制,可行是可行,就是有点麻烦。如果 echarts 直接支持 legend item 等宽就好了