echarts 生成简易关系图
var nodes = [{
x: 500,
y: 1000,
nodeName: '收入户\n80%',
symbolSize: 10
}, {
x: 100,
y: 800,
nodeName: '销售服务户\n8%'
},
{
x: 350,
y: 800,
nodeName: '产品户\n67.5%'
},
{
x: 700,
y: 800,
nodeName: '综合户\n0.5%'
},
{
x: 950,
y: 800,
nodeName: '利润户\n>=1.8%'
},
{
x: 50,
y: 600,
nodeName: '内勤\n3%'
},
{
x: 150,
y: 600,
nodeName: '4S店\n5%'
},
{
x: 250,
y: 600,
nodeName: '管理费用\n2.2%'
},
{
x: 450,
y: 600,
nodeName: '生产成本\n67.5%'
},
{
x: 650,
y: 600,
nodeName: '费用及其他\n0.17%'
},
{
x: 750,
y: 600,
nodeName: '薪资\n0.33%'
},
{
x: 10,
y: 400,
nodeName: '薪酬\n0.87%'
},
{
x: 50,
y: 400,
nodeName: '费用\n0.36%'
},
{
x: 90,
y: 400,
nodeName: '销售激励\n1.77%'
},
{
x: 200,
y: 400,
nodeName: '薪资\n1.05%'
},
{
x: 250,
y: 400,
nodeName: '费用\n0.15%'
},
{
x: 300,
y: 400,
nodeName: '产值激励\n1%'
},
{
x: 400,
y: 400,
nodeName: 'PC\n21%'
},
{
x: 450,
y: 400,
nodeName: '供应链\n21.5%'
},
{
x: 500,
y: 400,
nodeName: '物流中心\n4%'
},
{
x: 550,
y: 400,
nodeName: '施工服务\n21%'
},
];
var charts = {
nodes: [],
lines: [{
coords: [
[500, 1000], //节点坐标
[500, 900] //子节点起点(没有子节点，则不需要)
]
}, {
coords: [
[500, 900], //连接父节点起点
[100, 900], //节点衔接点（折线拐点）
[100, 850], //节点坐标
[100, 700] //子节点起点
]
}, {
coords: [
[500, 900],
[350, 900],
[350, 800],
[350, 700]
]
}, {
coords: [
[500, 900],
[700, 900],
[700, 800],
[700, 700]
]
},{
coords: [
[500, 900],
[950, 900],
[950, 800]
]
},
{
coords: [
[100, 700],
[50, 700],
[50, 600],
[50, 500]
]
},
{
coords: [
[100, 700],
[150, 700],
[150, 600]
]
},
{
coords: [
[350, 700],
[250, 700],
[250, 600],
[250, 500]
]
},
{
coords: [
[350, 700],
[450, 700],
[450, 600],
[450, 500]
]
},
{
coords: [
[700, 700],
[650, 700],
[650, 600]
]
},
{
coords: [
[700, 700],
[750, 700],
[750, 600]
]
},
{
coords: [
[50, 500],
[10, 500],
[10, 400]
]
},
{
coords: [
[50, 500],
[50, 500],
[50, 400]
]
},
{
coords: [
[50, 500],
[90, 500],
[90, 400]
]
} ,
{
coords: [
[250, 500],
[200, 500],
[200, 400]
]
},
{
coords: [
[250, 500],
[250, 500],
[250, 400]
]
},
{
coords: [
[250, 500],
[300, 500],
[300, 400]
]
},
{
coords: [
[450, 500],
[400, 500],
[400, 400]
]
},
{
coords: [
[450, 500],
[450, 500],
[450, 400]
]
},
{
coords: [
[450, 500],
[500, 500],
[500, 400]
]
},
{
coords: [
[450, 500],
[550, 500],
[550, 400]
]
}
]
};
for (var j = 0; j < nodes.length; j++) {
const {
x,
y,
nodeName,
symbolSize
} = nodes[j];
var node = {
nodeName,
value: [x, y],
symbolSize: symbolSize || 5
}
charts.nodes.push(node)
};
function SetChart() {
var myChart = echarts.init(document.getElementById('myChart'));
option = {
backgroundColor: "#f2f2f2",
xAxis: {
min: 0,
max: 1000,
show: false,
type: 'value'
},
yAxis: {
min: 0,
max: 1000,
show: false,
type: 'value'
},
series: [{
type: 'graph',
coordinateSystem: 'cartesian2d',
label: {
normal: {
show: true,
position: 'bottom',
color: '#04FDB8'
}
, textStyle: {
color: '#04FDB8'
}
},
itemStyle: {
normal: {
label: {
show: true,
color: '#04FDB8',
formatter: function (item) {
return item.data.nodeName
}
},
color: '#5b5b5b'
}
},
data: charts.nodes,
},
{
type: 'lines',
polyline: true,
coordinateSystem: 'cartesian2d',
lineStyle: {
normal: {
type: 'dashed',
width: 1,
curveness: 0.2,
color: '#956FD4'
}
},
//动画
effect: {
show: true,
trailLength: 0.1,
symbol: 'arrow',
color: '#FFA12F',
symbolSize: 8
},
data: charts.lines
}]
};
myChart.setOption(option);
};
<div id="myChart" style="width:100%;min-height: 500px;"></div>
效果：
引用echarts.js：
<script src="../js/echarts/echarts.js"></script>
