16 changed files with 115 additions and 333 deletions
@ -1,6 +1,7 @@
@@ -1,6 +1,7 @@
|
||||
<template> |
||||
<div class="device-data-chart"> |
||||
<v-chart class="chart" :option="chartOption" :autoresize="autoresize" :loading-options="loadingOpt" |
||||
<v-chart class="chart" :option="chartOption" :autoresize="autoresize" |
||||
:loading-options="loadingOpt" |
||||
:loading="loading" ref="chartRef" @legendselectchanged="changeLegend"/> |
||||
</div> |
||||
</template> |
||||
@ -1,72 +0,0 @@
@@ -1,72 +0,0 @@
|
||||
import { Graph, register, Rect, ExtensionCategory } from '@antv/g6'; |
||||
import { DeviceType, NODE_SIZE } from "./index"; |
||||
|
||||
|
||||
// const typeToIconMap = Object.entries(DeviceType).filter(([key, value]) => typeof value === 'number')
|
||||
// console.log(typeToIconMap)
|
||||
|
||||
export default class UserCardNode extends Rect { |
||||
get nodeData() { |
||||
return this.context.graph.getNodeData(this.id); |
||||
} |
||||
|
||||
get data() { |
||||
return this.nodeData.data || {}; |
||||
} |
||||
|
||||
// 用户名样式
|
||||
|
||||
|
||||
drawNameShape(attributes: any, container: any) { |
||||
if (!this.data.name) return; |
||||
const getUsernameStyle = (attributes: any) => { |
||||
return { |
||||
x: -14, |
||||
text: this.data.name || '', |
||||
// fontSize: 12,
|
||||
width: 20, |
||||
fill: '#262626', |
||||
fontWeight: 'bold', |
||||
textAlign: 'left', |
||||
textBaseline: 'middle', |
||||
maxWidth: 80, // 限制最大宽度
|
||||
ellipsis: true, // 超出显示 ...
|
||||
}; |
||||
} |
||||
|
||||
const usernameStyle = getUsernameStyle(attributes); |
||||
this.upsert('username', 'text', usernameStyle, container); |
||||
} |
||||
|
||||
|
||||
// 头像样式
|
||||
getAvatarStyle(attributes: any) { |
||||
const [width, height] = this.getSize(attributes); |
||||
const type = this!.data!.type |
||||
return { |
||||
x: -width / 2 + 4, |
||||
y: -height / 2 + 6, |
||||
width: 24, |
||||
height: 24, |
||||
src: typeToIconMap[type as keyof typeof type] || '', |
||||
}; |
||||
} |
||||
|
||||
drawAvatarShape(attributes: any, container: any) { |
||||
if (!this.data.typeString) return; |
||||
|
||||
const avatarStyle = this.getAvatarStyle(attributes); |
||||
this.upsert('avatar', 'image', avatarStyle, container); |
||||
} |
||||
|
||||
|
||||
render(attributes: any, container: any) { |
||||
// 渲染基础矩形
|
||||
super.render(attributes, container); |
||||
|
||||
this.drawAvatarShape(attributes, container); |
||||
this.drawNameShape(attributes, container); |
||||
} |
||||
} |
||||
|
||||
|
||||
Loading…
Reference in new issue