v-charts legend设置排列对齐的方法

1、如下手机端的图表，可以看到legend排列不齐

 

2、通过设置v-charts的extend属性

    html代码如下：

    js代码如下：

        chartExtend: {
          series: {},
          tooltip: {},
          grid: {
            right: '20%',
          },
          legend: {
            icon: 'rect',
            itemWidth: 12,
            itemHeight: 12,
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}℃'
            }
          }
        },

3、查看e-charts的配置项legend，可以使用数组形式为每一个图例图标项单独配置，具体如下

legend: [{
        icon: 'rect',
        top: 50,
        data:['视频广告','直接访问','搜索引擎']
    },{
        data:['邮件营销','联盟广告']
    }],

4、此时修改v-charts中的legend属性为数组形式，发现配置并没有生效，图例变成了默认样式

        chartExtend: {
          series: {},
          tooltip: {},
          grid: {
            right: '20%',
          },
          legend: [{
            icon: 'rect',
            itemWidth: 12,
            itemHeight: 12,
            data: ['那什么的系统环境温度', '那什么的当前温度']
          },{
            icon: 'rect',
            itemWidth: 12,
            itemHeight: 12,
            data: ['不知道进水温度', '知道出水温度']
          }],
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}℃'
            }
          }
        },

5、那么，仍然需要v-charts的图例对齐，该怎么做？ 此处我的做法是将图例的标签文字长度修改成一样的，具体做法就是定好图例标签长度，过长的去掉尾部，短的在后面补空格，此时需要注意修改的地方还有data中的参数

chartData: {
          columns: ['时间', '那什么的系统环境温度', '那什么的当前温度   ', '不知道进水温度         ', '知道出水温度     '],
          rows: [{
              '时间': '2019/1/1',
              '那什么的系统环境温度': 13,
              '那什么的当前温度   ': 10,
              '不知道进水温度         ': 32,
              '知道出水温度     ': 4
            },
            {
              '时间': '2019/1/2',
              '那什么的系统环境温度': 35,
              '那什么的当前温度   ': 32,
              '不知道进水温度         ': 6,
              '知道出水温度     ': 4
            },
            {
              '时间': '2019/1/3',
              '那什么的系统环境温度': 29,
              '那什么的当前温度   ': 26,
              '不知道进水温度         ': 16,
              '知道出水温度     ': 4
            },
            {
              '时间': '2019/1/4',
              '那什么的系统环境温度': 17,
              '那什么的当前温度   ': 14,
              '不知道进水温度         ': 19,
              '知道出水温度     ': 4
            }
          ]
        },

6、此方法并不是很好的解决办法，欢迎各位提出更好的解决方案。