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)
})