Echarts堆積柱狀圖排序問題

Echarts堆積柱狀圖排序是按照堆積柱狀圖的柱子高度進行從大到小（或者從小到大）進行排序，方便查閱各座標情況。以下是我自己研發的方法，有不對的地方敬請諒解，隨時歡迎指教。

排序後效果如下圖：

（1）排序函數，這是一個簡單的冒泡排序，首先計算橫座標各柱子的和，然後進行簡單的冒泡排序（因爲時間緊），可以選擇其它效率更高的排序方法，原理都是一樣的。

/**
 * Echarts堆積柱狀圖排序
 * @Author 
 * @Date 2019/2/25
 * @Version 1.0
 * @param obj
 * @returns {*}
 *
 */
function 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]);//求和，用來排序
        }
    }
//簡單排序
    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;
                }
            }
        }
    }
    return obj;
}

（2）核心點擊事件，首先獲取各legend圖標是否點擊，true：未點擊；false：點擊；其次清空需要重新渲染的數據，然後調用上面的排序函數，最後給清空的值添加數據，重新渲染圖表。

//Echarts legend的點擊事件以及數據渲染
tzjcChart.on('legendselectchanged', function (object) {
//獲取legend各圖例點擊與否，true爲未點擊，false爲點擊；
    let one = object.selected.一類;
    let two = object.selected.二類;
    let three = object.selected.三類;
    let four = object.selected.四類;
    let five = object.selected.五類;

//獲取option對象
    let option = this.getOption();
//清空需要重新渲染的數據
    option.xAxis[0].data = [];
    option.series[0].data = [];
    option.series[1].data = [];
    option.series[2].data = [];
    option.series[3].data = [];
    option.series[4].data = [];

//定義一個對象，data0：X軸座標數組；data1：二維數組，存legend爲true的series數組；data2：二維數組，存儲所有的series數組
    let obj = {
        "data0": tzjcdata0,
        "data1": [],
        "data2": [tzjcdata1, tzjcdata2, tzjcdata3, tzjcdata4, tzjcdata5]
    };
//判斷legend圖例是否爲true，是就給對象obj的data1追加相應的series數組
    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);
    }
//調用排序方法，返回排序好的對象
    let multi_obj = multi_bubbleSort(obj);
//給上面清空的數據添加值
    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];
//調用setOption方法，重新渲染堆積柱狀圖
    this.setOption(option);
});

 

原文出處：https://www.cnblogs.com/zhangxiangguo/p/10437385.html