# Sorting of stacked histogram in Echarts

The sorting of Echarts stacked histogram is based on the column height of stacked histogram from large to small (or from small to large), which is convenient to check the coordinates. The following is my own research and development method. If there is something wrong, please understand. You are welcome to give me advice at any time.

The sorting effect is as follows:

(1) sorting function, which is a simple bubble sorting. First, calculate the sum of the columns in the abscissa, and then carry out a simple bubble sorting (because of the tight time). You can choose other sorting methods with higher efficiency. The principle is the same.

```/**
* Echarts Stacked histogram sorting
* @Author
* @Date 2019/2/25
* @Version 1.0
* @param obj
* @returns {*}
*
*/
function multi_bubbleSort(obj) {
let data0 = obj.data0;//Abscissa array
let data = new Array(data0.length).fill(0);//Define a set of arrays of the same size as the abscissa array, all of which are 0, to store the sum of stacked histogram
let len = obj.data0.length;//Abscissa array 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]);//Sum, for sorting
}
}
//Simple sorting
for (let i = 0; i < len; i++) {
for (let j = 0; j < len - 1 - i; j++) {
if (Number(data[j]) < Number(data[j + 1])) { //Comparison of two adjacent elements
let temp = data[j + 1]; //Element exchange
data[j + 1] = data[j];
data[j] = temp;

//Exchange abscissa elements
let te = obj.data0[j + 1]; //Element exchange
obj.data0[j + 1] = obj.data0[j];
obj.data0[j] = te;

//Exchange of stacked histogram elements
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;
}
}
}
}
return obj;
}```

(2) the core click event. First, get the legend icon to click, true: no clicking; false: click; secondly, empty the data that needs to be rendered again, then call the sorting function above, and finally add data to the empty value and render the chart again.

```//Echarts legend Click event and data rendering of
tzjcChart.on('legendselectchanged', function (object) {
//Obtain legend Click each legend or not, true It is not clicked, false For clicking;
let one = object.selected.One category;
let two = object.selected.Two category;
let three = object.selected.three classes of initials;
let four = object.selected.Four category;
let five = object.selected.Five category;

//Obtain option object
let option = this.getOption();
//Clear data to be re rendered
option.xAxis[0].data = [];
option.series[0].data = [];
option.series[1].data = [];
option.series[2].data = [];
option.series[3].data = [];
option.series[4].data = [];

//Define an object, data0: X Axis coordinate array; data1: Two dimensional array legend by true Of series Array; data2: Two dimensional array, storing all series array
let obj = {
"data0": tzjcdata0,
"data1": [],
"data2": [tzjcdata1, tzjcdata2, tzjcdata3, tzjcdata4, tzjcdata5]
};
//judge legend Is the legend true，Yes, for the object obj Of data1 Add corresponding series array
if (one) {
obj.data1.push(tzjcdata1);
}
if (two) {
obj.data1.push(tzjcdata2);
}
if (three) {
obj.data1.push(tzjcdata3);
}
if (four) {
obj.data1.push(tzjcdata4);
}
if (five) {
obj.data1.push(tzjcdata5);
}
//Call the sorting method to return the sorted object
let multi_obj = multi_bubbleSort(obj);
//Add value to data cleared above
option.xAxis[0].data = multi_obj.data0;
option.series[0].data = multi_obj.data2[0];
option.series[1].data = multi_obj.data2[1];
option.series[2].data = multi_obj.data2[2];
option.series[3].data = multi_obj.data2[3];
option.series[4].data = multi_obj.data2[4];
//call setOption Method, re render stacked histogram
this.setOption(option);
});```

Tags: Javascript

Posted on Sat, 30 Nov 2019 08:20:45 -0800 by binarynomad