散点图实现拓扑图

 

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: [