昨天,我们公司提出了一个产品需求。我们必须用两行显示折线图的图例,但要让两行图例对齐。如图所示:
我看了官网的API,真的设置好了。然后让我们来看看Echarts传说的API。
(图例类型)纯平(普通图例,默认为普通图例。滚动可以滚动页面的图例。当图例的数量可以使用。)
Zlevel用于画布分层。具有不同Zlevel值的图形放置在不同的画布中。画布分层是一种常用的优化方法。我们可以将一些图形变化频繁的组件(如动画)设置为单独的zLevel。需要注意的是,画布过多会造成内存开销增加,在手机上使用要谨慎,以防死机。
图例组件与容器左侧的距离
图例组件与容器上侧的距离
图例组件到容器右侧的距离
图例组件与容器底面的距离
图例组件的宽度。默认自适应。注意,此时它不是图例的宽度。此宽度是图例组件的总宽度。它可以控制图例的总宽度。我们可以使用此属性使图例显示的宽度超过两行的固定宽度,但不能设置某个图例文本的宽度。
图例列表的布局方向。
图例标记和文本的对齐。默认值是自动的,基于组件的位置和方向,当组件的左值为“右”和垂直布局(方向为“垂直”)和“右”时,右对齐。
图例内部页边距,单位px,默认所有方向内页边距为5,接受数组设置上、右、下、左页边距。
图例的每一项之间的间隔。水平布局水平间隔垂直分布
当地时间为纵向间隔
图例标记的图形宽度。注意,此属性用于设置图例标记的宽度:与itemWidth相同
用于格式化图例文本,支持字符串模板和回调函数。
:图例选择模式,控制是否可以通过单击图例来更改系列的显示状态。图例选择在默认情况下是打开的,可以设置为false以关闭。
图例关闭时的颜色。
图例选定状态表。
[i]:图例的数据数组
这次焦点来了
图例的常用文本样式
您可以在API中看到此属性。有一个属性中设置了图例文本宽度,即。但是要使用此属性,必须使用此属性。否则,此属性将不生效。事实也是如此。
这时有些人会发现,根据API编写代码并没有达到你想要的效果。显示两条线并垂直对齐。那是因为使用这个属性需要另一个属性的配合,这就是。
您需要定义一个
格式化程序中的{a样式名}将自动匹配自定义富通管道字符中的{a样式名}的样式,此时您可以设置图例文本的宽度。这样我们就能得到我们想要的效果
这是我们想要的款式