堆砌合计选择图例动态排名ECharts Gallery

20:11:45图表已生成
代码
var getname = ['数据学院', '测试学院', '联奕学院', 'BI学院', '旺旺学院']; //数据点名称
var getvalue = [20, 96, 55, 65, 36]; //科研项目
var getvalue1 = [27, 56, 95, 57, 38]; //专利成果
var getvalue2 = [73, 56, 33, 70, 60]; //获奖成果
var getvalue3 = [57, 76, 55, 57, 88]; //论文成果
var getvalue4 = [37, 56, 35, 77, 68]; //著作成果
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;
}

let obj = {
    "data0": getname,
    "data1": [getvalue, getvalue1, getvalue2, getvalue3, getvalue4],
    "data2": [getvalue, getvalue1, getvalue2, getvalue3, getvalue4]
};

let multi_obj = multi_bubbleSort(obj);

option = {
    backgroundColor: '#000',
    grid: {
        top: '15',
        right: '60',
        left: '100',
        bottom: '15'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'none'
        },
    },
    legend: {
        type: "scroll",
        icon: 'circle',
        right: '10',
        top: '0',
        data: ['科研项目', '专利成果', '获奖成果', '论文成果', '著作成果'],
        itemGap: 20,
        itemWidth: 11,
        itemHeight: 11,
        textStyle: {
            fontSize: '13',
            color: '#A9C1E5',
        },

    },
    yAxis: [{
        show: true,
        inverse: true,
        data: multi_obj.data0,
        axisLabel: {
            color: '#C5DCFF',
            textStyle: {
                fontSize: 14,
            },
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
    }],
    xAxis: [{
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: false
        }
    }],
    //animation: false,
    series: [{
        type: 'bar',
        name: '科研项目',
        data: multi_obj.data2[0],
        barWidth: '10px',
        stack: '科研分析',
        label: {
            show: false,
            position: 'right',
            color: '#FFFFFF',
            fontSize: 15,
            offset: [5, 0]
        },
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 0,
                    color: '#065ADA' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#22CFF5' // 100% 处的颜色
                }], false),
                barBorderRadius: 5,
            }
        },
        z: 50,
    }, {
        type: 'bar',
        name: '专利成果',
        data: multi_obj.data2[1],
        barWidth: '10px',
        stack: '科研分析',
        label: {
            show: false,
            position: 'right',
            color: '#FFFFFF',
            fontSize: 15,
            offset: [5, 0]
        },
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: '#2CFFBA' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#1B856D' // 100% 处的颜色
                }], false),
                barBorderRadius: 5,
                shadowBlur: [0, 0, 0, 5],
                shadowColor: '#2CFFBA',
                shadowOffsetX: -5,
            }
        },
        z: 40,
    }, {
        type: 'bar',
        name: '获奖成果',
        data: multi_obj.data2[2],
        barWidth: '10px',
        stack: '科研分析',
        label: {
            show: false,
            position: 'right',
            color: '#FFFFFF',
            fontSize: 15,
            offset: [5, 0]
        },
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: '#FF7E7C' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#FF6061' // 100% 处的颜色
                }], false),
                barBorderRadius: 5,
                shadowBlur: [0, 0, 0, 5],
                shadowColor: '#FF7E7C',
                shadowOffsetX: -5,
            }
        },
        z: 30,
    }, {
        type: 'bar',
        name: '论文成果',
        data: multi_obj.data2[3],
        barWidth: '10px',
        stack: '科研分析',
        label: {
            show: false,
            position: 'right',
            color: '#FFFFFF',
            fontSize: 15,
            offset: [5, 0]
        },
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: '#27F8F6' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#209ECD' // 100% 处的颜色
                }], false),
                barBorderRadius: 5,
                shadowBlur: [0, 0, 0, 5],
                shadowColor: '#27F8F6',
                shadowOffsetX: -5,
            }
        },
        z: 20,
    }, {
        type: 'bar',
        name: '著作成果',
        data: multi_obj.data2[4],
        barWidth: '10px',
        stack: '科研分析',
        label: {
            show: false,
            position: 'right',
            color: '#FFFFFF',
            fontSize: 15,
            offset: [5, 0]
        },
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: '#9F9BFF' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#826CFF' // 100% 处的颜色
                }], false),
                barBorderRadius: 5,
                shadowBlur: [0, 0, 0, 5],
                shadowColor: '#9F9BFF',
                shadowOffsetX: -5,
            }
        },
        z: 10,
    }]
};
var series = option["series"];
var fun = function(params) {
    var datavalue = 0;
    for (var i = 0; i < series.length; i++) {
        datavalue += series[i].data[params.dataIndex]
    }
    return datavalue;
}

if (series[series.length - 1]) {
    series[series.length - 1]["label"]["show"] = true;
    series[series.length - 1]["label"]["formatter"] = fun;
}

myChart.on("legendselectchanged", function(object) {
    let one = object.selected.科研项目;
    let two = object.selected.专利成果;
    let three = object.selected.获奖成果;
    let four = object.selected.论文成果;
    let five = object.selected.著作成果;

    //获取option对象
    let option1 = this.getOption();
    //清空需要重新渲染的数据
    option1.yAxis[0].data = [];
    option1.series[0].data = [];
    option1.series[1].data = [];
    option1.series[2].data = [];
    option1.series[3].data = [];
    option1.series[4].data = [];

    //定义一个对象，data0：X轴坐标数组；data1：二维数组，存legend为true的series数组；data2：二维数组，存储所有的series数组
    let obj = {
        "data0": getname,
        "data1": [],
        "data2": [getvalue, getvalue1, getvalue2, getvalue3, getvalue4]
    };
    //判断legend图例是否为true，是就给对象obj的data1追加相应的series数组
    if (one) {
        obj.data1.push(getvalue);
    }
    if (two) {
        obj.data1.push(getvalue1);
    }
    if (three) {
        obj.data1.push(getvalue2);
    }
    if (four) {
        obj.data1.push(getvalue3);
    }
    if (five) {
        obj.data1.push(getvalue4);
    }
    //调用排序方法，返回排序好的对象
    let multi_obj = multi_bubbleSort(obj);
    //给上面清空的数据添加值
    option1.yAxis[0].data = multi_obj.data0;
    option1.series[0].data = multi_obj.data2[0];
    option1.series[1].data = multi_obj.data2[1];
    option1.series[2].data = multi_obj.data2[2];
    option1.series[3].data = multi_obj.data2[3];
    option1.series[4].data = multi_obj.data2[4];
    var b = object.selected, //图例的选中情况，key是图例的name，value是true或false
        d = []; //选中的series的index列表
    for (var key in b) {
        if (b[key]) { //选中的图例
            for (var i = 0; i < series.length; i++) {
                var changename = series[i]["name"];
                if (changename == key) {
                    d.push(i); //选中的series的index列表
                }
            }
        }
    }

    var fn = function(params) {
        var datavalue = 0;
        for (var i = 0; i < d.length; i++) {
            for (var j = 0; j < series.length; j++) {
                if (d[i] == j) {
                    datavalue += series[j].data[params.dataIndex];
                }
            }
        }

        return datavalue;
    }

    for (var j = 0; j < series.length; j++) {
        series[j]["label"]["show"] = false;
    }

    var l_s = series[d[d.length - 1]]; //选中的series的最后一个
    if (l_s != null && l_s != "" && l_s != undefined) {
        l_s["label"]["show"] = true; //显示label
        l_s["label"]["formatter"] = fn; //绑定formatter
    }
    myChart.setOption(option)
})
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
