代码如下
<template>
<div id="app">
<!--antv G6 demo -->
<div id="container"></div>
<p>{{ msg }}</p>
</div>
</template>
<script>
import G6 from '@antv/g6'
import data from '@/plugins/antv'
export default {
name: 'gpolyline',
data() {
return {
msg: '',
}
},
created() {},
mounted() {
this.$socket.connect()
this.getInit(data)
},
sockets: {
disconnect() {
console.log('连接断开')
},
connect_failed() {
console.log('连接失败')
},
connect() {
console.log('连接成功')
},
kline(msg) {
console.log('msg', msg)
this.msg = msg
},
},
methods: {
getInit(data) {
const graph = new G6.Graph({
container: 'container',
width: 1000,
height: 700,
modes: {
default: ['drag-canvas', 'zoom-canvas'], //'click-select'
},
// 节点类型及样式
defaultNode: {
type: 'rect',
size: [150, 50],
style: {
fill: '#fff',
stroke: '#f00',
lineWidth: 2,
},
},
// 连线类型及样式
defaultEdge: {
type: 'polyline',
style: {
stroke: '#f00',
offset: 25,
endArrow: false,
lineWidth: 2,
},
},
})
graph.data(data)
graph.render()
},
},
beforeRouteLeave(to, from, next) {
this.$socket.disconnect()
next()
},
}
</script>
<style>
#container {
width: 100%;
height: 100%;
border: 1px saddlebrown solid;
}
</style>
页面首次加载出来:
初始化时data的数据
const data = {
nodes: [
{
id: "node1",
x: 700,
y: 100,
size: [60, 100],
label: "node1\n换行21",
anchorPoints: [
[0.5, 1],
[0, 0.5]
]
},
{
id: "node2",
x: 700,
y: 200,
label: "222",
anchorPoints: [
[0.5, 1],
[0.5, 1]
]
},
],
// 边集
edges: [
{
source: "node1",//源头
target: "node2",//目标
type: "line",
sourceAnchor: 0,
// 该边连入 target 点的第 0 个 anchorPoint,
targetAnchor: 0
},
]
};
export default data
webscoket 推送过来的数据在页面打印出来了 antv G6绘制的图,
在
kline(msg) {
console.log('msg', msg)
this.msg = msg
},
拿到了数据 如何实时更新,第一次使用antv G6 哪位熟练的大佬指点下 谢谢