GraphVis图可视化分析组件库 GraphVis图可视化分析组件库
  • 基础介绍
  • 基础功能
  • 交互功能
  • 全局统一配置
  • 标准数据格式定义
  • 组件接口导航
  • 应用开发介绍

    • 快速上手
    • 应用开发步骤
    • VUE框架中应用
    • 业务应用基础流程
  • 事件注册

    • 节点事件
    • 连线事件
    • 场景事件
  • 右键菜单

    • 右键菜单的定义
  • 图布局算法应用

    • 布局算法类型
    • 布局参数说明
    • 布局参数默认配置
  • 图分析算法应用

    • 图的路径分析
    • 节点中心性分析
    • 聚类分析
  • 关系扩线

    • 关系扩线
  • 节点模板配置

    • 自定义节点模板
    • 使用字体图标
  • 关系图类型

    • 层级关系图
    • 流程图
    • 弧线关系图
    • Sankey桑基图
  • 树图类型

    • 径向辐射树图
    • 紧凑树图
    • 缩进树图
    • 打包树图
    • 组织结构图
    • 类思维脑图
应用案例
商用授权
在线示例 (opens new window)
  • 基础介绍
  • 基础功能
  • 交互功能
  • 全局统一配置
  • 标准数据格式定义
  • 组件接口导航
  • 应用开发介绍

    • 快速上手
    • 应用开发步骤
    • VUE框架中应用
    • 业务应用基础流程
  • 事件注册

    • 节点事件
    • 连线事件
    • 场景事件
  • 右键菜单

    • 右键菜单的定义
  • 图布局算法应用

    • 布局算法类型
    • 布局参数说明
    • 布局参数默认配置
  • 图分析算法应用

    • 图的路径分析
    • 节点中心性分析
    • 聚类分析
  • 关系扩线

    • 关系扩线
  • 节点模板配置

    • 自定义节点模板
    • 使用字体图标
  • 关系图类型

    • 层级关系图
    • 流程图
    • 弧线关系图
    • Sankey桑基图
  • 树图类型

    • 径向辐射树图
    • 紧凑树图
    • 缩进树图
    • 打包树图
    • 组织结构图
    • 类思维脑图
应用案例
商用授权
在线示例 (opens new window)
  • 事件注册

    • 节点事件
    • 连线事件
    • 场景事件
  • 右键菜单

    • 右键菜单定义
  • 图布局算法应用

    • 布局算法类型
    • 布局参数说明
    • 布局算法参数配置
  • 图分析算法应用

    • 路径分析
    • 中心性分析
    • 聚类分析
  • 关系扩线

    • 关系扩线
  • 节点模板配置

    • 节点模板配置
    • 使用字体图标
      • 字体图标的使用
        • 如何注册字体图标
        • 应用示例
      • 字体图标的使用效果图
  • 应用开发
  • 节点模板配置
dubaopeng
2023-07-11
目录

使用字体图标

# 字体图标的使用

提示

字体图标做为一种复杂字体,在绘图的过程中十分消耗性能,所以组件采用了一种新的方式,使用字体图标,可有效提高绘图性能。 在绘图中使用字体图标,首先需要将自己要使用的字体图标库引入对应界面,然后整理图谱中需要使用的图标,注册进组件,再做使用。

# 如何注册字体图标

  • 首先整理字体图标的名称,内容(Unicode),图标要显示的颜色。
  • 调用接口将整理好的图标列表,注册进入组件。
  • 添加数据时,数据的style属性中增加icon属性,指定对应的字体图标名称。

# 应用示例

const uicons=[
	{name:'猪妹',content:'\ue148',color:`red`},
	{name:'提莫',content:'\ue149',color:`yellow`},
	{name:'光辉',content:'\ue14a',color:`green`},
	{name:'奶妈',content:'\ue14b',color:`blue`}
];

//注册字体图标 参数1:图标的定义  参数2:字体的大小  参数3:字体famliy 参数4:字体默认颜色
graphVis.registIconFonts(uicons,400,'fc-icon-lol','#fff'); 

graphVis.addNodes([{
    id:'node1',
    label: '字体图标',
    style:{
        shape:'circle',
        size: 100,
        icon : '猪妹',   //字体图标的名称
        imageOffsetX : 0, //图标的横向偏移
        imageOffsetY : -3 //图标的纵向偏移
    }
}]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 字体图标的使用效果图

  • 去看字体图标的示例 (opens new window)

实例效果1 实例效果2

节点模板配置

← 节点模板配置

Theme by Vdoing | Copyright © 2020-2023 www.graphvis.cn. All rights reserved.
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式