echarts点击图例对叠加柱图排序由于项⽬需要，需要点击图例，对页⾯剩余叠加柱图排序，上代码
let devidearankOption_data = {
xdata: [
"农药制造",
"农林牧渔",
"⾦属⼯具",
"塑料制造",
"塑料薄膜",
"⾷品饮料",
"烟草"
],
ydata: [],
legend: ["TOP10", "TOP10-30", "TOP30-60", "TOP60-100", ">TOP100"],
selected: {
TOP10: true,
"TOP10-30": true,
"TOP30-60": true,
"TOP60-100": true,
">TOP100": true
},
seriesData: [
{
name: "TOP10",
type: "bar",
stack: "总量",
data: [
{ name: "农药制造", value: 1 },
{ name: "农林牧渔", value: 2 },
{ name: "⾦属⼯具", value: 3 },
{ name: "塑料制造", value: 4 },
{ name: "塑料薄膜", value: 5 },
{ name: "⾷品饮料", value: 6 },
{ name: "烟草", value: 7 }
]
},
{
name: "TOP10-30",
type: "bar",
stack: "总量",
data: [
{ name: "农药制造", value: 2 },
{ name: "农林牧渔", value: 4 },
{ name: "⾦属⼯具", value: 6 },
{ name: "塑料制造", value: 8 },
{ name: "塑料薄膜", value: 10 },
{ name: "⾷品饮料", value: 12 },
{ name: "烟草", value: 14 }
]
},
{
name: "TOP30-60",
type: "bar",
stack: "总量",
data: [
{ name: "农药制造", value: 1 },
{ name: "农林牧渔", value: 3 },
{ name: "⾦属⼯具", value: 5 },
{ name: "塑料制造", value: 7 },
{ name: "塑料薄膜", value: 9 },
{ name: "⾷品饮料", value: 11 },
{ name: "烟草", value: 13 }
]
},
{
name: "TOP60-100",
type: "bar",
stack: "总量",
data: [
{ name: "农药制造", value: 2 },
{ name: "农林牧渔", value: 3 },
{ name: "⾦属⼯具", value: 4 },
{ name: "塑料制造", value: 5 },
{ name: "塑料薄膜", value: 6 },
{ name: "⾷品饮料", value: 7 },
{ name: "烟草", value: 8 }
]
},
{
name: ">TOP100",
type: "bar",
stack: "总量",
data: [
{ name: "农药制造", value: 1 },
{ name: "农林牧渔", value: 4 },
{ name: "⾦属⼯具", value: 6 },
{ name: "塑料制造", value: 9 },
{ name: "塑料薄膜", value: 2 },
{ name: "⾷品饮料", value: 1 },
{ name: "烟草", value: 1 }
]
setoption
}
]
}
给图例添加点击事件，对数据进⾏处理
devidearankChart_.on("legendselectchanged", e => {
this.devidearankOption_data.ydata = new Array(
this.devidearankOption_data.xdata.length
).fill(0);
Object.values(e.selected).forEach((item, k) => {
if (item) {
this.devidearankOption_data.seriesData.forEach((skm, i) => {
if (skm.name === Object.keys(e.selected)[k]) {
for (let i = 0; i < skm.data.length; i++) {
this.devidearankOption_data.ydata[i] += skm.data[i].value;                }
}
});
}
});
this.sortElse(this.devidearankOption_data);
this.devidearankOption_data.seriesData.forEach(skm => {
const seriesOrder = [];
this.devidearankOption_data.xdata.forEach(k => {
skm.data.forEach(m => {
if (m.name == k) {
seriesOrder.push(m);
}
});
});
skm.data = seriesOrder;
});
option.legend.selected = e.selected;
option.yAxis.data = this.devidearankOption_data.ydata;
option.xAxis.data = this.devidearankOption_data.xdata;
option.series = this.devidearankOption_data.seriesData;
devidearankChart_.setOption(option, true);
});
sortElse(option_data) {
const alldata = option_data.ydata.map((ai, i) => {
return { x: ai, y: option_data.xdata[i] };
});
alldata.sort((a, b) => {
return b.x - a.x;
});
option_data.ydata = alldata.map((ab, i) => {
return ab.x;
});
option_data.xdata = alldata.map((ab, i) => {
return ab.y;
});
}