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 `${params.data.source} 转 ${params.data.target}
${params.data.value}人` } else { return `${params.data.name}
${params.data.label.position == 'left' ? '共转出':'共转入'} ${params.value}人 ` } }, 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], } ] };

Echarts在线免费图表