data中定义需要用到的字段
data() {
return {
legendData: [],//原始数组
oneData: [],//第一行
twoData: [],//第二行
}
},
将数组分为两个相等的部分
使用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
}
}
],
显示效果