echarts多个不同系列的图例分开显示

620 阅读1分钟

image.png

如图:图中有两个饼图,对应不同的图例。现在图例混到了一起,显然不方便观察。现在想让这两类图例分开显示,以给客户更好的体验。

当只有一个系列的图例时,legend是一个对象:

legend: {
  type:'plain',// 图例的类型,plain:普通图例,scroll:可翻页。图例较多时使用。缺省就是'plain'
  orient:'horizontal', // 图例列表的布局朝向, horizontal:水平 vertical:垂直。缺省就是'horizontal'
  data:['省公司','市公司','县公司'] // 图例的数据数组,如果缺省,会取series.name
}

多个系列图例时,legend可以是一个数组:

legend:[
  // 可以不同系列的图例设置不同的属性
  {
    data:['省公司','市公司','县公司']
  },
  {
    data:['纪委书记','纪委委员','纪检委员'],
    y:'30' // 偏移量
  }
]

这样就把图例分开了,如下图:

image.png

虽然分开了,但还是不太直观。我们再来改造一下。让图例以垂直方向显示在饼图的侧边。

legend:[
  // 可以让不同系列的图例设置不同的属性
  {
    orient: 'vertical',
    data:['省公司','市公司','县公司'],
    x: '15%', // 使用百分比可自动根据屏幕大小自适应
    y: 50
  },
  {
    orient: 'vertical',
    data:['纪委书记','纪委委员','纪检委员'],
    x: '75%',
    y: 50 // 偏移量
  }
]

image.png