AntV学习笔记

文章目录

G6 图可视化引擎

G6 是一个简单、易用、完备的图可视化引擎,它在高定制能力的基础上,提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。

简单上手

  1. 安装@antv/g6
javascript 复制代码
npm install @antv/g6  
# 或者  
yarn add @antv/g6
  1. 创建容器
javascript 复制代码
<div id="mountNode" ref="mountNode"></div>
  1. 数据准备
javascript 复制代码
      const data = {  
        nodes: [  
          { id: 'node1', x: 100, y: 200, label: 'Node 1' },  
          { id: 'node2', x: 300, y: 200, label: 'Node 2' },  
        ],  
        edges: [  
          { source: 'node1', target: 'node2' },  
        ],  
      }; 
  1. 创建关系图
javascript 复制代码
      const graph = new G6.Graph({  
        container: this.$refs.graphContainer,  
        width: 600,  
        height: 400,  
        modes: {  
          default: ['drag-canvas', 'zoom-canvas', 'click-select'],  
        },  
        layout: {  
          type: 'random',  
        },  
        defaultNode: {  
          size: 30,  
        },  
      });  
  1. 配置数据源,渲染
javascript 复制代码
graph.data(data); // 读取 Step 2 中的数据源到图上 //高版本使用setData
graph.render(); // 渲染图

复杂一点的案例

javascript 复制代码
      demoData: {
        nodes: [{ id: 'startNode1', x: 50, y: 200, label: '', clazz: 'start', },
          { id: 'startNode2', x: 50, y: 320, label: '', clazz: 'timerStart', },
          { id: 'taskNode1', x: 200, y: 200, label: '主任审批', clazz: 'userTask',  },
          { id: 'taskNode2', x: 400, y: 200, label: '经理审批', clazz: 'scriptTask',  },
          { id: 'gatewayNode', x: 400, y: 320, label: '金额大于1000', clazz: 'inclusiveGateway',  },
          { id: 'taskNode3', x: 400, y: 450, label: '董事长审批', clazz: 'receiveTask', },
          { id: 'catchNode1', x: 600, y: 200, label: '等待结束', clazz: 'signalCatch', },
          { id: 'endNode', x: 600, y: 320, label: '', clazz: 'end', }],
        edges: [{ source: 'startNode1', target: 'taskNode1', sourceAnchor:1, targetAnchor:3, clazz: 'flow' },
          { source: 'startNode2', target: 'gatewayNode', sourceAnchor:1, targetAnchor:3, clazz: 'flow' },
          { source: 'taskNode1', target: 'catchNode1', sourceAnchor:0, targetAnchor:0, clazz: 'flow' },
          { source: 'taskNode1', target: 'taskNode2', sourceAnchor:1, targetAnchor:3, clazz: 'flow' },
          { source: 'taskNode2', target: 'gatewayNode', sourceAnchor:1, targetAnchor:0, clazz: 'flow' },
          { source: 'taskNode2', target: 'taskNode1', sourceAnchor:2, targetAnchor:2, clazz: 'flow' },
          { source: 'gatewayNode', target: 'taskNode3', sourceAnchor:2, targetAnchor:0, clazz: 'flow' },
          { source: 'gatewayNode', target: 'endNode', sourceAnchor:1, targetAnchor:2, clazz: 'flow'},
          { source: 'taskNode3', target: 'endNode', sourceAnchor:1, targetAnchor:1, clazz: 'flow' },
          { source: 'catchNode1', target: 'endNode', sourceAnchor:1, targetAnchor:0, clazz: 'flow' }]
      },

S2 多维交叉分析表格

S2 是一个面向可视分析领域的数据驱动的表可视化引擎。S 取自于 SpreadSheet 的两个 S,2 代表了透视表中的行列两个维度。旨在提供美观、易用、高性能、易扩展的多维表格。

简单的一个vue3使用S2的例子

  1. 安装依赖
javascript 复制代码
yarn add @antv/s2@next @antv/s2-vue@next ant-design-vue@3.x
  1. 创建数据
javascript 复制代码
const s2DataConfig = {
  fields: {
    rows: ['province', 'city'],
    columns: ['type'],
    values: ['price'],
  },
  data: [
    {
      province: "浙江",
      city: "杭州",
      type: "笔",
      price: "1",
    },
    {
      province: "浙江",
      city: "杭州",
      type: "纸张",
      price: "2",
    },
    {
      province: "浙江",
      city: "舟山",
      type: "笔",
      price: "17",
    },
    {
      province: "浙江",
      city: "舟山",
      type: "纸张",
      price: "6",
    },
    {
      province: "吉林",
      city: "长春",
      type: "笔",
      price: "8",
    },
    {
      province: "吉林",
      city: "白山",
      type: "笔",
      price: "12",
    },
    {
      province: "吉林",
      city: "长春",
      type: "纸张",
      price: "3",
    },
    {
      province: "吉林",
      city: "白山",
      type: "纸张",
      price: "25",
    },
    {
      province: "浙江",
      city: "杭州",
      type: "笔",
      cost: "0.5",
    },
    {
      province: "浙江",
      city: "杭州",
      type: "纸张",
      cost: "20",
    },
    {
      province: "浙江",
      city: "舟山",
      type: "笔",
      cost: "1.7",
    },
    {
      province: "浙江",
      city: "舟山",
      type: "纸张",
      cost: "0.12",
    },
    {
      province: "吉林",
      city: "长春",
      type: "笔",
      cost: "10",
    },
    {
      province: "吉林",
      city: "白山",
      type: "笔",
      cost: "9",
    },
    {
      province: "吉林",
      city: "长春",
      type: "纸张",
      cost: "3",
    },
    {
      province: "吉林",
      city: "白山",
      type: "纸张",
      cost: "1",
    }
  ]
};
const s2Options = {
  width: 600,
  height: 480
}
  1. 组件开发及渲染
javascript 复制代码
// App.vue
<script lang="ts">
import type { S2DataConfig, S2Options } from '@antv/s2';
import { SheetComponent } from '@antv/s2-vue';
import { defineComponent, onMounted, reactive, ref, shallowRef } from 'vue';
import "@antv/s2-vue/dist/style.min.css";

export default defineComponent({
  setup() {
    // dataCfg 数据字段较多,建议使用 shallow, 如果有数据更改直接替换整个对象
    const dataCfg = shallowRef(s2DataConfig);
    const options: S2Options = reactive(s2Options);

    return {
      dataCfg,
      options,
    };
  },

  components: {
    SheetComponent,
  },
});
</script>

<template>
  <SheetComponent :dataCfg="dataCfg" :options="options" />
</template>
相关推荐
DKPT3 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
巴伦是只猫5 小时前
【机器学习笔记Ⅰ】13 正则化代价函数
人工智能·笔记·机器学习
好好研究5 小时前
学习栈和队列的插入和删除操作
数据结构·学习
新中地GIS开发老师6 小时前
新发布:26考研院校和专业大纲
学习·考研·arcgis·大学生·遥感·gis开发·地理信息科学
SH11HF7 小时前
小菜狗的云计算之旅,学习了解rsync+sersync实现数据实时同步(详细操作步骤)
学习·云计算
Frank学习路上7 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
Chef_Chen9 小时前
从0开始学习计算机视觉--Day07--神经网络
神经网络·学习·计算机视觉
X_StarX10 小时前
【Unity笔记02】订阅事件-自动开门
笔记·学习·unity·游戏引擎·游戏开发·大学生
MingYue_SSS10 小时前
开关电源抄板学习
经验分享·笔记·嵌入式硬件·学习
巴伦是只猫11 小时前
【机器学习笔记 Ⅱ】1 神经网络
笔记·神经网络·机器学习