legend

legend博客

官方文档

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

反选之后

图例显示的方向

  legend: {
    orient: 'horizontal',
  },

orient：vertical或者horizontal

图例的位置

left：在水平位置的位置，left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

top：在竖直方向的位置，top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。

数据的默认是否显示

设置图例的某个选项的数据默认是显示还是隐藏。 false: 隐藏属性值：对象，属性值内容：图例上的数据与boolean构成键值对 如果某选项设置为false，那么图标上的数据也会默认不显示，而图例会以灰色样式显示

legend: {
        orient: 'horizontal',
        x:'center',
        y:'top',
        selected:{
          '搜索引擎': false,
          '联盟广告': false
        }
    }

需要显示的数据项

图例上显示的文字信息，如果不设置该项，默认会以series设置的信息作为图例信息。如果设置该项，必须与series设置的信息一致，才会生效。 而该属性的作用：可以单独对图例中某个选项进行单独设置样式 比如：

legend: {
        orient: 'horizontal',
        x:'center',
        y:'top',
        data:[
            {
             name: '搜索引擎',
             icon: 'circle', 
             textStyle: {
                 fontWeight: 'bold', 
                 color: 'orange'
             }
        },
        '直接访问','邮件营销','联盟广告','视频广告']
    }

grid

tooltip

触发时机trigger

tooltip: {
  trigger: 'item'
}

如果把item改为axis:

tooltip: {
  trigger: 'axis'
}

触发条件triggerOn

比如设置鼠标点击时候才触发

tooltip: {
  trigger: 'item',
  triggerOn: 'click'
}

提示内容格式化formatter

tooltip: {
  trigger: 'item',
  formatter: '{b} --> {c}'
}

也可以使用回调函数：

tooltip: {
  trigger: 'item',
  triggerOn: 'click',
  formatter: function(arg) {
    console.log(arg)
    return 'xxx'
  }
}

toolbox