echarts中的图例换行并对齐

通过练习，我总结了三种方式，方式一和方式二只能实现换行，方式三不仅可实现换行，还可以实现对齐。

方式一：

legend: {
	x: 'right',
	bottom: '30',
	data: ['行业大类1', '行业大类2', '行业大类3', '\n','邮件营销', '联盟广告', '视频广告', '\n','百度', '谷歌', '必应'],
    },

此种方法比较简单，在data中添加’\n’，可实现换行，但不会对齐，效果如下：

在这里插入图片描述

方式二：

legend: [
{
	x: 'left',
	bottom: '50',
	data: ['行业大类1', '行业大类2', '行业大类3']
},{
	x: 'left',
	bottom: '30',
	data: ['邮件营销', '联盟广告', '视频广告','百度', '谷歌', '必应']
}],

方式二是将legend分成了两部分，写成了数组对象的形式，也可实现换行，但此种方式和方式一一样，不能实现对齐，效果如下：

在这里插入图片描述
方式三：

给legend设置textStyle和formatter：

legend.textStyle : 图例的公用文本样式；
按照echarts中的API来看，legend.textStyle 中有一个属性是设置图例文字宽的，那就是legend.textStyle.width。但是用这个属性是必须要用legend.textStyle.rich 这个属性。要不然legend.textStyle.width这个属性不会生效。同理legend.textStyle.height也是如此。
此时会发现按照API上去写代码，最后并没有达到你要的效果。那是因为用这个属性时还需要另一个属性的配合，这个属性就是legend.formatter 。代码如下：

legend: {
	left:'10',
	bottom: 20,
	width:300,//给整个图例组件这只宽度,如果不设置,图例将根据容器大小自适应
	data: ['行业大类1', '行业大类2', '行业大类3', '邮件营销', '联盟广告', '视频广告','百度', '谷歌', '必应'],
	formatter: [
		'{a|{name}}'
	].join('\n'),
	textStyle: {
		rich: {
			a: {
				width: 55,
				fontSize: 12,
				lineHeight: 12
			}
		},
	},
},

此种方式不仅可实现换行，还可实现对齐，效果如下：

在这里插入图片描述