各专业转入转出情况echarts sankey配置项内容和展示
配置项如下
let majorArr = [
['经贸学院','金融学','经济学','注册会计'],
['教育学院','应用心理','思想政治','学前教育'],
['电信学院','电子科技','机电应用'],
['法学院','国际政治','马克思','法学','国际法学'],
['管理学院','工商管理'],
['外国语学院','同声传译','日语'],
['传播学院','新闻学','新媒体'],
['药学院','中医学'],
['医学院','口腔医学']
]
let dataArr = [
['金融学','rgba(45, 154, 255, 1)',false],
['经济学','rgba(45, 154, 255, 1)',false],
['注册会计','rgba(45, 154, 255, 1)',false],
['应用心理','rgba(150, 137, 244, 1)',false],
['思想政治','rgba(150, 137, 244, 1)',false],
['学前教育','rgba(150, 137, 244, 1)',false],
['电子科技','rgba(72, 213, 157, 1)',false],
['机电应用','rgba(72, 213, 157, 1)',false],
['国际政治','rgba(255, 155, 75, 1)',false],
['马克思','rgba(255, 155, 75, 1)',false],
['法学','rgba(255, 155, 75, 1)',false],
['国际法学','rgba(255, 155, 75, 1)',false],
['工商管理','rgba(45, 213, 255, 1)',true],
['同声传译','rgba(85, 173, 255, 1)',true],
['日语','rgba(85, 173, 255, 1)',true],
['新闻学','rgba(107, 230, 17, 1)',true],
['新媒体','rgba(107, 230, 17, 1)',true],
['中医学','rgba(255, 98, 142, 1)',true],
['口腔医学','rgba(255, 98, 142, 1)',true],
]
let linkArr = [
['金融学', '工商管理', 5,
{
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(45, 154, 2550, 1)'
}, {
offset: 1,
color: 'rgba(45, 213, 2550, 1)'
}]
}
],
['金融学', '同声传译', 5,
{
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(45, 154, 2550, 1)'
}, {
offset: 1,
color: 'rgba(85, 213, 2550, 1)'
}]
}
],
['金融学', '新闻学', 5,
{
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(45, 154, 2550, 1)'
}, {
offset: 1,
color: 'rgba(107, 213, 2550, 1)'
}]
}
],
['经济学', '日语', 5,
{
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(45, 154, 2550, 1)'
}, {
offset: 1,
color: 'rgba(85, 173, 2550, 1)'
}]
}
],
['注册会计', '新媒体', 5, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(45, 154, 2550, 1)'
}, {
offset: 1,
color: 'rgba(107, 230, 170, 1)'
}]
}],
['应用心理', '工商管理', 24, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(150, 137, 2440, 1)'
}, {
offset: 1,
color: 'rgba(45, 213, 2550, 1)'
}]
}],
['思想政治', '中医学', 5, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(150, 137, 2440, 1)'
}, {
offset: 1,
color: 'rgba(255, 98, 1420, 1)'
}]
}],
['学前教育', '口腔医学', 5, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(150, 137, 2440, 1)'
}, {
offset: 1,
color: 'rgba(255, 98, 1420, 1)'
}]
}],
['学前教育', '中医学', 5, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(150, 137, 2440, 1)'
}, {
offset: 1,
color: 'rgba(255, 98, 1420, 1)'
}]
}],
['机电应用', '新媒体', 5, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(72, 213, 1570, 1)'
}, {
offset: 1,
color: 'rgba(107, 230, 170, 1)'
}]
}],
['电子科技', '新闻学', 5, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(72, 213, 1570, 1)'
}, {
offset: 1,
color: 'rgba(107, 230, 170, 1)'
}]
}],
['机电应用', '中医学', 5, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(72, 213, 1570, 1)'
}, {
offset: 1,
color: 'rgba(255, 98, 1420, 1)'
}]
}],
['机电应用', '同声传译', 5, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(72, 213, 1570, 1)'
}, {
offset: 1,
color: 'rgba(45, 213, 2550, 1)'
}]
}],
['机电应用', '工商管理', 5, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(72, 213, 1570, 1)'
}, {
offset: 1,
color: 'rgba(45, 213, 2550, 1)'
}]
}],
['国际政治', '工商管理', 5, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(255, 155, 750, 1)'
}, {
offset: 1,
color: 'rgba(45, 213, 2550, 1)'
}]
}],
['马克思', '工商管理', 5, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(255, 155, 750, 1)'
}, {
offset: 1,
color: 'rgba(45, 213, 2550, 1)'
}]
}],
['法学', '工商管理', 5, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(255, 155, 750, 1)'
}, {
offset: 1,
color: 'rgba(45, 213, 2550, 1)'
}]
}],
['国际法学', '工商管理', 5, {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(255, 155, 750, 1)'
}, {
offset: 1,
color: 'rgba(45, 213, 2550, 1)'
}]
}]
]
let links = linkArr.map(item=>{
return {
source:item[0],
target:item[1],
value:item[2],
lineStyle:{
color:item[3]
}
}
})
let majorValue = {}
let majorLeft = {}
links.map(item => {
majorLeft[item.source] = true;
majorValue[item.source] = majorValue[item.source] ? majorValue[item.source] + item.value : item.value;
majorValue[item.target] = majorValue[item.target] ? majorValue[item.target] + item.value : item.value;
})
let data = dataArr.map(item=>{
return {
name:item[0],
itemStyle:{
color:item[1]
},
label:{
position:item[2]?'right':'left',
textStyle:{
fontSize:13,
fontFamily: 'SourceHanSansCN-Regular',
color:'#666666'
}
},
value:majorValue[item[0]]//兼容低版本Echarts不赋值无法在tooltip上获取value
}
})
let majorList = majorArr.map(item=>{
let newArr = [...item];
let collegeName = newArr.shift();
return {
name:collegeName,
revert:!majorLeft[newArr[0]],
majorList: newArr.map(item=>{
return {
name:item,
value:majorValue[item]
}
})
}
})
let preName = []
let preLink = []
majorList.map(item => {
preName.push({
name: item.name,
label: {
position: item.revert ? 'right' : 'left',
color: 'rgba(136, 136, 136, 1)'
},
itemStyle: {
color: 'transparent'
}
})
item.majorList.map(major => {
preLink.push({
source: item.revert ? major.name : item.name,
target: item.revert ? item.name : major.name,
value: major.value,
lineStyle: {
color: 'transparent'
},
emphasis: {
lineStyle: {
color: 'transparent'
}
}
})
})
})
let links2 = links.map(item => {
return {
...item,
lineStyle: {
color: 'transparent'
}
}
})
let data2 = data.map(item => {
return {
...item,
itemStyle: {
color: 'transparent'
},
label: {
color: 'transparent'
}
}
})
option = {
title: {
text: '各专业转入转出情况',
left: '0'
},
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
formatter: params => {
if (params.dataType == 'edge') {
return `<span style="color:rgba(0, 255, 252, 1)">${params.data.source}</span>
转
<span style="color:rgba(0, 255, 252, 1)">${params.data.target}</span>
<br/>
<span style="color:rgba(0, 255, 252, 1)">${params.data.value}人</span>`
} else {
return `<span style="color:rgba(0, 255, 252, 1)">${params.data.name}</span>
<br/>
${params.data.label.position == 'left' ? '共转出':'共转入'}
<span style="color:rgba(0, 255, 252, 1)">${params.value}人</span>
`
}
},
rich: {
textOther: {
color: 'rgba(0, 255, 252, 1)'
}
},
extraCssText: 'padding:20px;background:rgba(21, 64, 92, 1);width:123px;height:40px;fontSize:15px'
},
xAxis: {
data: ['转出专业', '转入专业'],
boundaryGap: false,
axisLabel: {
color: 'rgba(136, 136, 136, 1)',
fontSize: 13
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
yAxis: {
show: false,
},
grid: {
left: 200,
right: 200,
top: 0,
height: 80,
containLabel: true
},
series: [{
left: 200,
right: 200,
top: 100,
layoutIterations: 0,
type: 'sankey',
focusNodeAdjacency: 'allEdges',
itemStyle: {
borderWidth: 0,
borderColor: '#aaa'
},
lineStyle: {
color: 'source',
curveness: 0.5
},
nodeGap: 1,
data: data,
links: links,
},
{
left: 100,
right: 100,
top: 100,
layoutIterations: 0,
type: 'sankey',
focusNodeAdjacency: 'allEdges',
itemStyle: {
borderWidth: 0,
borderColor: '#aaa',
},
lineStyle: {
color: 'source',
curveness: 0.5,
},
silent: true,
nodeGap: 1,
data: [...preName, ...data2],
links: [...preLink, ...links2],
}
]
};
截图如下
