Echarts legend属性使用

Echarts legend属性使用,第1张

Echarts的legend属性是对图例组件的相关配置

而legend就是Echarts图表中对图形的解释部分:

其中legend自身常用的配置属性如下:

设置图例的朝向

属性值:

设置图例在X轴方向上的位置以及在Y轴方向上的位置

例子:

注意:边框宽度和内边距属性值为数值,不加单位。

控制每一项的间距,也就是图例之间的距离

属性值为数值,不带单位

控制图例图形的高度

属性值为数字,不加单位

设置图例文字样式

属性值为一个对象

设置图例的某个选项的数据默认是显示还是隐藏。

false: 隐藏

属性值:对象,属性值内容:图例上的数据与boolean构成键值对

如果某选项设置为false,那么图标上的数据也会默认不显示,而图例会以灰色样式显示

图例上显示的文字信息,如果不设置该项,默认会以series设置的信息作为图例信息。如果设置该项, 必须与series设置的信息一致 ,才会生效。

而该属性的作用:可以单独对图例中某个选项进行单独设置样式

比如:

以上单独设置中

name:指定该项的名称,必填

icon:指定图例项的icon,可以为内置的图形7个图形,或者自定义图标的形式: 'image://url'

textStyle::设置文本样式

目录orientx/y(left/top)样式设置itemGapitemHeighttextStyleselecteddata补充:自定义legend属性总结Echarts的legend属性是对图例组...

Echarts的legend属性是对图例组件的相关配置

而legend就是Echarts图表中对图形的解释部分:

其中legend自身常用的配置属性如下:

设置图例的朝向

属性值:

设置图例在X轴方向上的位置以及在Y轴方向上的位置

例子:

注意:边框宽度和内边距属性值为数值,不加单位。

控制每一项的间距,也就是图例之间的距离属性值为数值,不带单位

控制图例图形的高度属性值为数字,不加单位

设置图例文字样式属性值为一个对象

设置图例的某个选项的数据默认是显示还是隐藏。

false: 隐藏

属性值:对象,属性值内容:图例上的数据与boolean构成键值对

如果某选项设置为false,那么图标上的数据也会默认不显示,而图例会以灰色样式显示

图例上显示的文字信息,如果不设置该项,默认会以series设置的信息作为图例信息。如果设置该项, 必须与series设置的信息一致 ,才会生效。

而该属性的作用:可以单独对图例中某个选项进行单独设置样式

比如:

以上单独设置中

name:指定该项的名称,必填

icon:指定图例项的icon,可以为内置的图形7个图形,或者自定义图标的形式: 'image://url'

textStyle::设置文本样式

实现效果

到此这篇关于Echarts中legend属性使用的文章就介绍到这了,更多相关Echarts legend属性使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

设置单位到左上方:

设置折线图中不一样的折线拐点.

设置图表中的标注

导入图例的个性图标

一个柱状图的左右两端都写字儿,用一个透明的 柱子铺到另一个柱子的上面,透明的在右边写字儿,不透明的写左边


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/tougao/7846415.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-10
下一篇2023-04-10

发表评论

登录后才能评论

评论列表(0条)

    保存