1.返回的数据
this.subDevice = [{
"id": "873736ed2b860ad256f2e105d2fb2865",
"name": "设备1",
"online": 0
},
{
"id": "663b4d95d94bc782fcd3a55b3bf119cc",
"name": "设备2",
"online": 0
},
{
"id": "aaa3f9205d1850adb18ea763545855bf",
"name": "设备3",
"online": 0
}]
2.因为没有位置返回,所以需要自己计算,就是两种情况,一个返回设备,和多个返回设备,设备从属网关都是一个。
html及琐碎
<div :style="{ height: cellHeight, width: '100%' }" id="Topology"></div>
myChart: null,
chartData: {},
cellHeight: '300px',
getwayimg: "图片地址",
subdeviceimg: 图片地址",
closeimg: 图片地址"
this.cellHeight = document.body.offsetHeight - 300 + 'px'
数据处理画图
draw() {
this.chartData = [
{
type: 'scatter',
symbolSize: 35, //大小
zlevel: 20,
symbol: 'image://' + this.getwayimg, //图标
data: [
{
name: this.gateway.name, //名称
value: [0, 50] //位置
}
],
itemStyle: {
opacity: 1
},
label: {
show: true,
formatter: '{b}',
offset: [0, 40],
color: '#333333'
}
}
]
if (this.subDevice.length === 1) {
let tempLine = {
type: 'lines', // 连接线
coordinateSystem: 'cartesian2d',
zlevel: 1,
polyline: true,
lineStyle: {
width: 1,
type: 'dotted',
color:
this.subDevice[0].online !== 1
? '#ff0000'
: '#12A7FF',
opacity: 1
},
data: [