import {onMounted} from "vue";
import G6 from '@antv/g6'
onMounted(()=>{
// 定义数据源
const data = {
// 点集
nodes: [
{
type:'circle',
id: 'node1',
icon: {
// 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
fontFamily: 'iconfont',
opacity:0.8,
fill:"red",
show: true,
text:'\ue671', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
width: 90,
height: 90,
cursor: 'pointer'
},
},
{
type:'circle',
id: 'node2',
icon: {
show: true,
text:'text',
width: 50,
height: 50,
cursor: 'pointer'
},
},
],
// 边集
edges: [
// 表示一条从 node1 节点连接到 node2 节点的边
{
source: 'node1',
target: 'node2',
},
],
};
// 创建 G6 图实例
const graph = new G6.Graph({
renderer:'svg',
container: 'mountNode', // 指定图画布的容器 id
// 画布宽高
width: 200,
height: 200,
});
// 读取数据
graph.data(data);
// 渲染图
graph.render();
})
</script>
Antv G6 节点的iconfont设置
于 2023-09-05 16:10:12 首次发布