先看效果图:
结构:
<div ref="table12" id="table12" style="width: 100%;height:7.5rem;"></div>
script中的方法:
init_table13(){
// 连线数据
var links =
[{id: "0", name: null, source: "1", target: "0", lineStyle: {color:'#BDA29A'}}
,{id: "1", name: null, source: "2", target: "0", lineStyle: {color:'#BDA29A'}}
,{id: "2", name: null, source: "3", target: "0", lineStyle: {color:'#BDA29A'}}
,{id: "3", name: null, source: "4", target: "0", lineStyle: {color:'#BDA29A'}}
,{id: "4", name: null, source: "5", target: "0", lineStyle: {color:'#BDA29A'}}
,{id: "5", name: null, source: "6", target: "0", lineStyle: {color:'#BDA29A'}}
,{id: "6", name: null, source: "7", target: "0", lineStyle: {color:'#BDA29A'}}
,{id: "7", name: null, source: "16", target: "3", lineStyle: {color:'#619FA7'}}
,{id: "8", name: null, source: "17", target: "3", lineStyle: {color:'#619FA7'}}
,{id: "9", name: null, source: "18", target: "3", lineStyle: {color:'#619FA7'}}
,{id: "10", name: null, source: "19", target: "3", lineStyle: {color:'#619FA7'}}
,{id: "11", name: null, source: "20", target: "4", lineStyle: {color:'#D38164'}}
,{id: "12", name: null, source: "21", target: "5", lineStyle: {color:'#90C5AC'}}
,{id: "13", name: null, source: "22", target: "6", lineStyle: {color:'#739E82'}}
,{id: "14", name: null, source: "23", target: "7", lineStyle: {color:'#C58221'}}
,{id: "15", name: null, source: "8", target: "1", lineStyle: {color:'#C23531'}}
,{id: "16", name: null, source: "9", target: "8", lineStyle: {color:'#C23531'}}
,{id: "17", name: null, source: "10", target: "8", lineStyle: {color:'#C23531'}}
,{id: "18", name: null, source: "11", target: "8", lineStyle: {color:'#C23531'}}
,{id: "19", name: null, source: "12", target: "8", lineStyle: {color:'#C23531'}}
,{id: "20", name: null, source: "13", target: "8", lineStyle: {color:'#C23531'}}
,{id: "21", name: null, source: "14", target: "2", lineStyle: {color:'#2F4554'}}
,{id: "22", name: null, source: "15", target: "14", lineStyle: {color:'#2F4554'}}
]
// 节点
var nodes =
[{id: "0",category:7, name: "2020年", label: {show:true,position:'inside'}, itemStyle: null, symbolSize: 100, x: -200,y: -100 }
,{id: "1",category:0, name: "银座", itemStyle: null, symbolSize: 50, x: -300, y: -300}
,{id: "2",category:1, name: "家家乐", itemStyle: null, symbolSize: 50, x: -300, y: 0}
,{id: "3",category:2, name: "信誉楼", itemStyle: null, symbolSize: 25, x: 100, y: -300}
,{id: "4",category:3, name: "新百", itemStyle: null, symbolSize: 25, x: 100, y: -200}
,{id: "5",category:4, name: "农家乐", itemStyle: null, symbolSize: 25, x: 100, y: -100}
,{id: "6",category:5, name: "新年华", itemStyle: null, symbolSize: 25, x: 100, y: 0}
,{id: "7",category:6, name: "新百伦", itemStyle: null, symbolSize: 25, x: 100, y: 100}
,{id: "8",category:0, name: "张三", itemStyle: null, symbolSize: 45, x: -500, y: -300}
,{id: "9",category:0, name: "李四", itemStyle: null, symbolSize: 20, x: -600, y: -350}
,{id: "10",category:0, name: "王五", itemStyle: null, symbolSize: 20, x: -600, y: -300}
,{id: "11",category:0, name: "李留", itemStyle: null, symbolSize: 24, x: -600, y: -250}
,{id: "12",category:0, name: "陈琦", itemStyle: null, symbolSize: 35, x: -550, y: -200}
,{id: "13",category:0, name: "周八", itemStyle: null, symbolSize: 30, x: -450, y: -200}
,{id: "14",category:1, name: "洋酒", itemStyle: null, symbolSize: 45, x: -400, y: 0}
,{id: "15",category:1, name: "十八号", itemStyle: null, symbolSize: 35, x: -500, y: 0}
,{id: "16",category:2, name: "黄十三", itemStyle: null, symbolSize: 15, x: 100, y: -400}
,{id: "17",category:2, name: "蓝十四", itemStyle: null, symbolSize: 15, x: 200, y: -380}
,{id: "18",category:2, name: "曾失误", itemStyle: null, symbolSize: 15, x: 250, y: -330}
,{id: "19",category:2, name: "王时期", itemStyle: null, symbolSize: 15, x: 250, y: -250}
,{id: "20",category:3, name: "梅而是", itemStyle: null, symbolSize: 15, x: 250, y: -200}
,{id: "21",category:4, name: "黄二十一", itemStyle: null, symbolSize: 15, x: 250, y: -100}
,{id: "22",category:5, name: "杨二十二", itemStyle: null, symbolSize: 15, x: 250, y: 0}
,{id: "23",category:6, name: "吕二十三", itemStyle: null, symbolSize: 30, x: 250, y: 100}
]
let categories = [
{name:'银座'},
{name:'家家乐'},
{name:'信誉楼'},
{name:'新百'},
{name:'农家乐'},
{name:'新年华'},
{name:'新百伦'},
{name:'2020年'},
]
let myChart = this.$echarts.init(document.getElementById("table12"));
let option = {
title: {
text: 'Les Miserables',
subtext: 'Default layout',
top: 'bottom',
left: 'right'
},
tooltip: {},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a) {
return a.name;
})
}],
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
series : [
{
name: 'Les Miserables',
type: 'graph',
layout: 'none',
data: nodes,
links: links,
categories: categories,
roam: true,
focusNodeAdjacency: true,
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
},
label: {
show:true,
position: 'right',
formatter: '{b}'
},
lineStyle: {
color: 'source',
curveness: 0.3
},
emphasis: {
lineStyle: {
width: 10
}
}
}
]
};
myChart.setOption(option);
},