Echarts中legend属性使用的方法详解

目录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属性使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

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

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

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

设置图例的朝向

属性值：

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

例子：

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

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

属性值为数值，不带单位

控制图例图形的高度

属性值为数字，不加单位

设置图例文字样式

属性值为一个对象

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

false: 隐藏

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

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

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

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

比如：

以上单独设置中

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

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

textStyle:：设置文本样式

这个可以修改，用自定义的图片就可以修改默认的legend形状

代码如下

legend: {

orient: 'horizontal', // 'vertical'

x: 'right', // 'center' | 'left' | {number},

y: 'top', // 'center' | 'bottom' | {number}

backgroundColor: '#eee',

borderColor: 'rgba(178,34,34,0.8)',

borderWidth: 4,

padding: 10,// [5, 10, 15, 20]

itemGap: 20,

textStyle: {color: 'red'},

selected: {

'降水量' : false

},

data: [

{

name:'蒸发量',

icon : 'image://../asset/ico/favicon.png',

textStyle:{fontWeight:'bold', color:'green'}

},

'降水量','最高气温', '最低气温'

]

}

主要看data属性里面

---