Antv G6 节点的iconfont设置

嘻嘻啦啦啵

已于 2023-10-13 10:10:13 修改

阅读量952

点赞数 2

文章标签： vue.js 前端前端框架 react.js 低代码

于 2023-09-05 16:10:12 首次发布

本文链接：https://blog.csdn.net/weixin_38647954/article/details/132694429

版权

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>