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>