16 changed files with 115 additions and 333 deletions
@ -1,7 +1,8 @@ |
|||||||
<template> |
<template> |
||||||
<div class="device-data-chart"> |
<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="loading" ref="chartRef" @legendselectchanged="changeLegend" /> |
:loading-options="loadingOpt" |
||||||
|
:loading="loading" ref="chartRef" @legendselectchanged="changeLegend"/> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
@ -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