先上效果图:
js代码:
// 图标坐标,预先调好每个点的坐标
var nodes = [{
x: 100,
y: 950,
nodeName: '',
svgPath: './Images/tank.png',
symbolSize: 80,
position: 'inside'
}, {
x: 300,
y: 950,
nodeName: '',
svgPath: './Images/tank.png',
symbolSize: 80,
position: 'inside'
}, {
x: 500,
y: 950,
nodeName: '',
svgPath: './Images/tank.png',
symbolSize: 80,
position: 'inside'
}, {
x: 100,
y: 700,
nodeName: '',
svgPath: './Images/tank.png',
symbolSize: 80,
position: 'inside'
}, {
x: 250,
y: 700,
nodeName: '',
svgPath: './Images/tank.png',
symbolSize: 80,
position: 'inside'
}, {
x: 400,
y: 700,
nodeName: '',
svgPath: './Images/tank.png',
symbolSize: 80,
position: 'inside'
}, {
x: 550,
y: 700,
nodeName: '',
svgPath: './Images/tank.png',
symbolSize: 80,
position: 'inside'
}, {
x: 145,
y: 220,
nodeName: 'GV5006',
svgPath: './Images/tap-left.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 157,
y: 220,
nodeName: 'GV5003',
svgPath: './Images/tap-left.png',
symbolSize: [20, 20],
position: 'bottom'
}, {
x: 185,
y: 220,
nodeName: 'GV5005',
svgPath: './Images/tap-left.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 197,
y: 220,
nodeName: 'GV5002',
svgPath: './Images/tap-left.png',
symbolSize: [20, 20],
position: 'bottom'
}, {
x: 245,
y: 220,
nodeName: 'GV5004',
svgPath: './Images/tap-left.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 295,
y: 220,
nodeName: 'GV5001',
svgPath: './Images/tap-left.png',
symbolSize: [20, 20],
position: 'bottom'
}, {
x: 150,
y: 985,
nodeName: 'GV1012',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 130,
y: 955,
nodeName: 'GV1011',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'bottom'
}, {
x: 350,
y: 985,
nodeName: 'GV1032',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 330,
y: 955,
nodeName: 'GV1031',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'bottom'
}, {
x: 550,
y: 985,
nodeName: 'GV1042',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 530,
y: 955,
nodeName: 'GV1041',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'bottom'
}, {
x: 150,
y: 735,
nodeName: 'GV1022',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 130,
y: 705,
nodeName: 'GV1021',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'bottom'
}, {
x: 790,
y: 955,
nodeName: 'GV5502',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 790,
y: 875,
nodeName: 'GV5501',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 790,
y: 795,
nodeName: 'GV5403',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 790,
y: 775,
nodeName: 'GV5402',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'bottom'
}, {
x: 790,
y: 695,
nodeName: 'GV5401',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 790,
y: 595,
nodeName: 'GV5302',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 790,
y: 515,
nodeName: 'GV5301',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 790,
y: 415,
nodeName: 'GV5202',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 790,
y: 335,
nodeName: 'GV5201',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 790,
y: 235,
nodeName: 'GV5102',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'top'
}, {
x: 790,
y: 155,
nodeName: 'GV5101',
svgPath: './Images/tap.png',
symbolSize: [20, 20],
position: 'top'
},
{
x: 180,
y: 120,
nodeName: 'P-201',
svgPath: './Images/pump-normal.svg',
symbolSize: [20, 40],
position: 'right'
}, {
x: 280,
y: 120,
nodeName: 'P-202',
svgPath: './Images/pump-normal.svg',
symbolSize: [20, 40],
position: 'right'
}, {
x: 850,
y: 970,
nodeName: 'P-110',
svgPath: './Images/pump-normal.svg',
symbolSize: [20, 40],
position: 'right'
}, {
x: 850,
y: 890,
nodeName: 'P-109',
svgPath: './Images/pump-normal.svg',
symbolSize: [20, 40],
position: 'right'
}, {
x: 850,
y: 790,
nodeName: 'P-108',
svgPath: './Images/pump-normal.svg',
symbolSize: [20, 40],
position: 'right'
}, {
x: 850,
y: 710,
nodeName: 'P-107',
svgPath: './Images/pump-normal.svg',
symbolSize: [20, 40],
position: 'right'
}, {
x: 850,
y: 610,
nodeName: 'P-106',
svgPath: './Images/pump-normal.svg',
symbolSize: [20, 40],
position: 'right'
}, {
x: 850,
y: 530,
nodeName: 'P-105',
svgPath: './Images/pump-normal.svg',
symbolSize: [20, 40],
position: 'right'
}, {
x: 850,
y: 430,
nodeName: 'P-104',
svgPath: './Images/pump-normal.svg',
symbolSize: [20, 40],
position: 'right'
}, {
x: 850,
y: 350,
nodeName: 'P-103',
svgPath: './Images/pump-normal.svg',
symbolSize: [20, 40],
position: 'right'
}, {
x: 850,
y: 250,
nodeName: 'P-102',
svgPath: './Images/pump-normal.svg',
symbolSize: [20, 40],
position: 'right'
}, {
x: 850,
y: 170,
nodeName: 'P-101',
svgPath: './Images/pump-normal.svg',
symbolSize: [20, 40],
position: 'right'
},{
x: 910,
y: 970,
nodeName: '',
svgPath: './Images/truck.png',
symbolSize: [40, 50],
position: 'right'
}, {
x: 910,
y: 890,
nodeName: '',
svgPath: './Images/truck.png',
symbolSize: [40, 50],
position: 'right'
}, {
x: 910,
y: 790,
nodeName: '',
svgPath: './Images/truck.png',
symbolSize: [40, 50],
position: 'right'
}, {
x: 910,
y: 710,
nodeName: '',
svgPath: './Images/truck.png',
symbolSize: [40, 50],
position: 'right'
}, {
x: 910,
y: 610,
nodeName: '',
svgPath: './Images/truck.png',
symbolSize: [40, 50],
position: 'right'
}, {
x: 910,
y: 530,
nodeName: '',
svgPath: './Images/truck.png',
symbolSize: [40, 50],
position: 'right'
}, {
x: 910,
y: 430,
nodeName: '',
svgPath: './Images/truck.png',
symbolSize: [40, 50],
position: 'right'
}, {
x: 910,
y: 350,
nodeName: '',
svgPath: './Images/truck.png',
symbolSize: [40, 50],
position: 'right'
}, {
x: 910,
y: 250,
nodeName: '',
svgPath: './Images/truck.png',
symbolSize: [40, 50],
position: 'right'
}, {
x: 910,
y: 170,
nodeName: '',
svgPath: './Images/truck.png',
symbolSize: [40, 50],
position: 'right'
}, {
x: 143,
y: 920,
nodeName: '0V1013',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'bottom'
}, {
x: 163,
y: 920,
nodeName: '0V1011',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'top'
}, {
x: 183,
y: 920,
nodeName: '0V1012',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'bottom'
}, {
x: 203,
y: 920,
nodeName: '0V1014',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'right'
}, {
x: 343,
y: 920,
nodeName: '0V1033',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'bottom'
}, {
x: 363,
y: 920,
nodeName: '0V1031',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'top'
}, {
x: 383,
y: 920,
nodeName: '0V1032',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'bottom'
}, {
x: 403,
y: 920,
nodeName: '0V1034',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'right'
}, {
x: 563,
y: 920,
nodeName: '0V1041',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'bottom'
}, {
x: 583,
y: 920,
nodeName: '0V1042',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'right'
}, {
x: 163,
y: 670,
nodeName: '0V1021',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'bottom'
}, {
x: 183,
y: 670,
nodeName: '0V1022',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'top'
}, {
x: 290,
y: 733,
nodeName: 'E/HV2012',
svgPath: './Images/jiaqi/famen3.png',
symbolSize: [16, 16],
position: 'right'
}, {
x: 290,
y: 703,
nodeName: 'E/HV2011',
svgPath: './Images/jiaqi/famen3.png',
symbolSize: [16, 16],
position: 'right'
}, {
x: 313,
y: 670,
nodeName: '0V2011',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'bottom'
}, {
x: 333,
y: 670,
nodeName: '0V2012',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'top'
}, {
x: 440,
y: 733,
nodeName: 'E/HV2022',
svgPath: './Images/jiaqi/famen3.png',
symbolSize: [16, 16],
position: 'right'
}, {
x: 440,
y: 703,
nodeName: 'E/HV2021',
svgPath: './Images/jiaqi/famen3.png',
symbolSize: [16, 16],
position: 'right'
}, {
x: 463,
y: 670,
nodeName: '0V2021',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'bottom'
}, {
x: 483,
y: 670,
nodeName: '0V2022',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'top'
}, {
x: 590,
y: 733,
nodeName: 'E/HV2032',
svgPath: './Images/jiaqi/famen3.png',
symbolSize: [16, 16],
position: 'right'
}, {
x: 590,
y: 703,
nodeName: 'E/HV2031',
svgPath: './Images/jiaqi/famen3.png',
symbolSize: [16, 16],
position: 'right'
}, {
x: 613,
y: 670,
nodeName: '0V2031',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'bottom'
}, {
x: 633,
y: 670,
nodeName: '0V2032',
svgPath: './Images/jiaqi/famen2.png',
symbolSize: [16, 16],
position: 'right'
}
]
// 描线,根据一组的点来描线
var charts = {
nodes: [],
linesData: [
// T-101
{
coords: [
[100, 980],
[200, 980],
[200, 880]
]
},
{
coords: [
[180, 980],
[180, 820]
]
},
{
coords: [
[160, 840],
[160, 950],
[100, 950]
]
},
{
coords: [
[140, 860],
[140, 950]
]
},
// T-103
{
coords: [
[300, 980],
[400, 980],
[400, 880]
]
},
{
coords: [
[380, 980],
[380, 820]
]
},
{
coords: [
[360, 840],
[360, 950],
[300, 950]
]
},
{
coords: [
[340, 860],
[340, 950]
]
},
// T-104
{
coords: [
[500, 980],
[580, 980],
[580, 820]
]
},
{
coords: [
[560, 840],
[560, 950],
[500, 950]
]
},
// T-102
{
coords: [
[100, 730],
[180, 730],
[180, 630]
]
},
{
coords: [
[160, 610],
[160, 700],
[100, 700]
]
},
// T-201
{
coords: [
[250, 730],
[330, 730],
[330, 570]
]
},
{
coords: [
[310, 590],
[310, 700],
[250, 700]
]
},
// T-202
{
coords: [
[400, 730],
[480, 730],
[480, 570]
]
},
{
coords: [
[460, 590],
[460, 700],
[400, 700]
]
},
// T-203
{
coords: [
[550, 730],
[630, 730],
[630, 570]
]
},
{
coords: [
[610, 590],
[610, 700],
[550, 700]
]
},
// line1
{
coords: [
[20, 880],
[720, 880],
[720, 350],
[360, 350],
[360, 100]
]
},
// line2
{
coords: [
[350, 100],
[350, 370],
[710, 370],
[710, 860],
[20, 860]
]
},
// line3
{
coords: [
[100, 390],
[700, 390],
[700, 840],
[160, 840]
]
},
// line4
{
coords: [
[20, 820],
[690, 820],
[690, 410],
[100, 410]
]
},
{
coords: [
[150, 410],
[150, 330],
[770, 330],
[770, 1000]
]
},
{
coords: [
[770, 330],
[770, 50]
]
},
// line5
{
coords: [
[100, 630],
[680, 630],
[680, 430],
[100, 430]
]
},
{
coords: [
[160, 430],
[160, 310],
[760, 310],
[760, 1000]
]
},
{
coords: [
[760, 310],
[760, 50]
]
},
{
coords: [
[150, 330],
[150, 100],
[200, 100],
[200, 390]
]
},
{
coords: [
[160, 310],
[160, 200],
[150, 200]
]
},
{
coords: [
[200, 200],
[190, 200],
[190, 450]
]
},
// line6
{
coords: [
[100, 450],
[670, 450],
[670, 610],
[140, 610]
]
},
// line7
{
coords: [
[100, 470],
[660, 470],
[660, 590],
[290, 590]
]
},
// line8
{
coords: [
[230, 570],
[650, 570],
[650, 490],
[100, 490]
]
},
{
coords: [
[250, 490],
[250, 290],
[750, 290],
[750, 1000]
]
},
{
coords: [
[750, 290],
[750, 50]
]
},
{
coords: [
[250, 290],
[250, 100],
[300, 100],
[300, 470],
]
},
// 站场来油
{
coords: [
[0, 100],
[0, 840],
[160, 840]
]
},
{
coords: [
[10, 100],
[10, 610],
[160, 610]
]
},
{
coords: [
[20, 100],
[20, 590],
[310, 590]
]
},
// 汽油凝液管
{
coords: [
[740, 1000],
[740, 270],
[460, 270],
[460, 100]
]
},
{
coords: [
[740, 50],
[740, 270]
]
},
// 柴油凝液管
{
coords: [
[730, 1000],
[730, 250],
[560, 250],
[560, 100]
]
},
{
coords: [
[730, 50],
[730, 250]
]
},
// 鹤管
{
coords: [
[750, 950],
[900, 950]
]
},
{
coords: [
[750, 870],
[900, 870]
]
},
{
coords: [
[760, 790],
[810, 790],
[810, 770]
]
},
{
coords: [
[750, 770],
[900, 770]
]
},
{
coords: [
[750, 690],
[900, 690]
]
},
{
coords: [
[760, 590],
[900, 590]
]
},
{
coords: [
[760, 510],
[900, 510]
]
},
{
coords: [
[770, 410],
[900, 410]
]
},
{
coords: [
[770, 330],
[900, 330]
]
},
{
coords: [
[770, 230],
[900, 230]
]
},
{
coords: [
[770, 150],
[900, 150]
]
},
]
}
// 把描点加入charts数组里面
for (var j = 0; j < nodes.length; j++) {
const {
x,
y,
nodeName,
svgPath,
symbolSize,
position
} = nodes[j];
var node = {
nodeName,
value: [x, y],
symbolSize: symbolSize || 50,
symbol: 'image://' + svgPath,
itemStyle: {
color: '#b2b2b2',
},
label: {
position: position
}
}
charts.nodes.push(node)
}
// 加载图表
loadChart();
function loadChart() {
console.log(charts.nodes);
option = {
backgroundColor: "transparent",
xAxis: {
min: 0,
max: 1000,
show: false,
type: 'value'
},
yAxis: {
min: 0,
max: 1000,
show: false,
type: 'value'
},
series: [{
type: 'graph', // 描点
coordinateSystem: 'cartesian2d',
label: {
show: true,
// position: 'left',
color: '#79B6FF',
fontSize: 10,
formatter: function (item) {
return item.data.nodeName
}
},
data: charts.nodes,
silent: true
}, {
type: 'lines', // 描线
polyline: true,
coordinateSystem: 'cartesian2d',
lineStyle: {
type: 'solid',
width: 2,
color: '#2950F1',
curveness: 0.8
},
effect: {
show: true,
trailLength: 0.6,
symbol: 'arrow', // 箭头动画效果
color: '#ffffff',
period: 8,
symbolSize: 4,
constantSpeed: 50, // 固定速度
},
data: charts.linesData
}]
};
//使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//响应式图表
window.onresize = myChart.resize;
}