legend位置 pyecharts_实现echarts的legend属性设置详解以及没有显示问题

如上述例图所示，echarts的legend也有多种属性可以供我们调控。

首先是legend的type:

可能有的人不太懂，legend有哪些type，根据配置项文档可知：

type有以下两种：

plain\scroll

plain

scroll

简单普通样式

可滚动翻页，当图例数量较多时使用

滚动效果如下：

legend的显示问题：

legend: {

data: this.legend,

bottom:0,

left:'center',

textStyle:{

color:'#ffffff',

}

},

如上代码所示，legend的data进行赋值，一般data为数组。

当series的name和legend一一对应时，即可显示相应的legend。

series: [

{

name: this.legend[0],

type: 'bar',

stack: '故障类型分布',

label: {

normal: {

show: false,

}

legend显示效果：

如第一张图片显示，第一张图片的legend为一个长方形，同时，legend可以有多种类型，通过设置icon来设置显示的图形样式。

icon一般在data里面设置，位置关系如下：

icon的种类：

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

同样也可以选择图片，通过URL来进行设置，格式如下：

'image://http://xxx.xxx.xxx/a/b.png'

简单展示几个：

‘rect’:

‘triangle’:

icon样式设置：

大小：

legend: {

data: legendData,

textStyle: {

color: '#ccc'

},

icon:'rect',

itemWidth:20,

itemHeight:20,

},

通过itemWidth和itemHeight来修改icon的大小。

设置位置：

常常通过以上几个属性进行设置，灰色是默认属性。我一般如果中间的话就设置：

left:’center’,底部或首部就进行top:0,或者bottom:0来进行设置，同样，css的都可以，但是需要注意的是不能带单位。即top:20px在进行设置的时候为top:20,要进行vm，vh的设置的话可以通过百分比,top:’20%’这样来进行对屏幕大小的动态适应。

原文链接：https://blog.csdn.net/xxtnt/java/article/details/96114386