ECharts中legend分两行显示

​

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

data() {
    return {
      legendData: [],//原始数组
      oneData: [],//第一行
      twoData: [],//第二行
    }
  },

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

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

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

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

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

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

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

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

3.设置ECharts legend属性

 legend: [
          {
            data: this.oneData,
            // icon: 'roundRect',
            x: 'center',
            y: '2%',
            textStyle: {
              color: '#B2D9FF',
              fontSize: 14
            }
          },
          {
            data: this.twoData,
            // icon: 'roundRect',
            x: 'center',
            y: '6.5%',
            textStyle: {
              color: '#B2D9FF',
              fontSize: 14
            }
          }
        ],

显示效果

求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！ 求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！求点赞关注！！！！