multi_bubbleSort(obj) {
let data0 = obj.data0;//横坐标数组
let data = new Array(data0.length).fill(0);//定义一组与横坐标数组相同大小的且全部为0的数组,用来存储堆积柱状图的和
let len = obj.data0.length;//横坐标数组长度
for (let k = 0; k < len; k++) {
for (let m = 0; m < obj.data1.length; m++) {
data[k] = Number(data[k]) + Number(obj.data1[m][k]);//求和,用来排序
}
}
console.log(555,obj,data0,data);
//简单排序
for (let i = 0; i < len; i++) {
for (let j = 0; j < len - 1 - i; j++) {
if (Number(data[j]) < Number(data[j + 1])) { //相邻元素两两对比
let temp = data[j + 1]; //元素交换
data[j + 1] = data[j];
data[j] = temp;
//交换横坐标元素
let te = obj.data0[j + 1]; //元素交换
obj.data0[j + 1] = obj.data0[j];
obj.data0[j] = te;
//交换各堆积柱状图元素
for (let m = 0; m < obj.data2.length; m++) {
let tem = obj.data2[m][j + 1];
obj.data2[m][j + 1] = obj.data2[m][j];
obj.data2[m][j] = tem;
}
}
}
}
// console.log(333333,obj);
return obj;
},
sortBy(that){
//Echarts legend的点击事件以及数据渲染
that.chart.off('legendselectchanged')
that.chart.on('legendselectchanged', function ({selected}) {
//获取option对象
let option = this.getOption()
//清空需要重新渲染的数据
option.xAxis[0].data = [];
option.series.forEach(item => {
item.data = []
})
//x轴对应数据
let xData = that.chartData.xAxisData
//y轴对应数据
let seriesData = that.chartData.seriesData
// console.log('seriesData',seriesData);
//定义一个对象,data0:X轴坐标数组;data1:二维数组,存legend为true的series数组;data2:二维数组,存储所有的series数组
let obj = {
"data0": xData,
"data1": [],
"data2": seriesData.map(i => i.data)
};
// console.log(obj,seriesData);
//获取legend各图例点击与否,true为未点击,false为点击;
let legendArr = Object.keys(selected)
// console.log(legendArr);
//判断legend图例是否为true,是就给对象obj的data1追加相应的series数组
legendArr.forEach((item,index) => {
if(selected[item]) {
obj.data1.push(seriesData[index].data)
}
})
//调用排序方法,返回排序好的对象
let multi_obj = that.multi_bubbleSort(obj)
//给上面清空的数据添加值
option.xAxis[0].data = multi_obj.data0;
option.series.forEach((item,index) => {
item.data = multi_obj.data2[index]
})
//调用setOption方法,重新渲染堆积柱状图
this.setOption(option)
})
}
echarts图表堆叠图点击legend排序
最新推荐文章于 2024-04-26 16:47:03 发布