echarts 自定義按鈕實現正序排序、倒序排序、還原

//按照某個屬性進行排序(示例:按照對象的total屬性進行排序)
function sortByNumber(a,b) {
    return parseInt(b.total,10) - parseInt(a.total,10);
}
var allDataForOrder = null;//排序重新加載時需要的列表數據
var allTotalForOrder = null;//排序重新加載時需要的總量數據
var myChartForPie = null;
var labelTop = {
    normal : {
        label : {
            show : true,
            position : "center",
            formatter : "{b}",
            textStyle: {
                baseline : "bottom"
            }
        },
        labelLine : {
            show : false
        }
    }
};
var labelBottom = {
    normal : {
        color: "#ccc",
        label : {
            show : true,
            position : "center"
        },
        labelLine : {
            show : false
        }
    },
    emphasis: {
        color: "rgba(0,0,0,0)"
    }
};
var radius = [40, 55];
var labelFromatter = {
    normal : {
        label : {
            formatter : function (params){
                return 100 - params.value + "%";
            },
            textStyle: {
                baseline : "top"
            }
        }
    }
};


var secondOption = {
    title : {
        text: "The App World",//主標題
        subtext: "from global web index",//副標題
        x: "center"
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: true},
            myAsc:{
                show:true,
                title: "正序",
                icon: 'image://'+ ctx + "/images/dataAnalysis/ascending .png",
                onclick:function () {
                    //克隆對象
                    var tem = JSON.parse(JSON.stringify(allDataForOrder));
                    tem.sort(sortByNumber).reverse();
                    myChartForPie.setOption(editOption(tem,allTotalForOrder));
                }
            },
            myDesc:{
                show:true,
                title: "逆序",
                icon: 'image://'+ ctx + "/images/dataAnalysis/descending.png",
                onclick:function () {
                    var tem = JSON.parse(JSON.stringify(allDataForOrder));
                    tem.sort(sortByNumber);
                    myChartForPie.setOption(editOption(tem,allTotalForOrder));
                }
            },
            myRestore : {
                show: true,
                title: "還原",
                icon: 'image://'+ ctx + "/images/dataAnalysis/order.png",
                onclick:function () {
                  myChartForPie.setOption(editOption(allDataForOrder,allTotalForOrder));
                }
            },
            saveAsImage : {show: true}
        }
    },
    series : []
};
//循環修改option的值
function editOption(data) {
    var thirdOption = {};
    var series = [];
    var legend = [];
    for(var i = 0; i < data.length; i ++){
        var tempLegend = {
               //省略
        };
        var tempSeries =
        {
           //省略
        };
        series.push(tempSeries);
        legend.push(tempLegend);
    }
    thirdOption.legend = legend;
    thirdOption.series = series;
    return thirdOption;
}
//調用渲染方法
function showPie(data) {
            myChartForPie = echarts.init(document.getElementById("domId"));
            myChartForPie.setOption(secondOption);
            allDataForOrder = data;
            myChartForPie.setOption(editOption(data));
        }
    }
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章