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