实现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%’这样来进行对屏幕大小的动态适应。