EChartslegend分两行显示

1. data中定义需要用到的字段

1.  
   data() {
2.  
   return {
3.  
   legendData: [],//原始数组
4.  
   oneData: [],//第一行
5.  
   twoData: [],//第二行
6.  
   }
7.  
   },

2. 将数组分为两个相等的部分

使用length/2和Math.ceil()方法找到数组的中间索引

使用中间索引和Array.splice()或者Array.slice()方法获得数组等分的部分

Math.ceil() 函数返回大于或等于一个给定数字的最小整数。

有时我们并不希望改变原始数组，这个可以配合 Array.slice() 来解决这个问题：

1.  
   const middleIndex = Math.ceil(this.legendData.length / 2) //获取数组中间下标
2.  
   this.oneData = this.legendData.slice(0, middleIndex)
3.  
   this.twoData = this.legendData.slice(-middleIndex)

会有重复的可能，建议加一步去重操作

1.  
   let list = this.twoData.filter(items => {
2.  
   if (!this.oneData.includes(items)) return items
3.  
   })
4.  
   this.twoData = list

3.设置ECharts legend属性

1.  
   legend: [
2.  
   {
3.  
   data: this.oneData,
4.  
   // icon: 'roundRect',
5.  
   x: 'center',
6.  
   y: '2%',
7.  
   textStyle: {
8.  
   color: '#B2D9FF',
9.  
   fontSize: 14
10.  
    }
11.  
    },
12.  
    {
13.  
    data: this.twoData,
14.  
    // icon: 'roundRect',
15.  
    x: 'center',
16.  
    y: '6.5%',
17.  
    textStyle: {
18.  
    color: '#B2D9FF',
19.  
    fontSize: 14
20.  
    }
21.  
    }
22.  
    ],

显示效果