前端JS也可以連點成線詳解(Vue中運用AntVG6)

更新時間：2023年01月11日 15:48:10 作者：幾何心涼

這篇文章主要給大家介紹了關于前端JS連點成線(Vue中運用?AntVG6)的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

前言

什么是 G6？G6 是一個圖可視化引擎。它提供了圖的繪制、布局、分析、交互、動畫等圖可視化的基礎能力。旨在讓關系變得透明，簡單。讓用戶獲得關系數(shù)據(jù)的 Insight。其實說白了就是我們前端中的繪圖工具；基于 G6，用戶可以快速搭建自己的圖分析或圖編輯應用。

這里博主也是接到了需求，項目中需要根據(jù)坐標畫出標志物；這里博主采用的就是我們的 AntG6 技術(shù)，下面讓我們先來通過一下小的 demo 感受一下 G6 的功能吧！

快速上手

因為博主參與的就是 Vue 項目，所以這里呢就以我們的 Vue 項目為例來進行演示；跟其他的組件相同我們第一步就是安裝和引用；安裝命令很簡單

npm install --save @antv/g6

//安裝成功后在需要使用的文件中進行引用
//當然如果項目中我們大量頁面需要用到 G6 也可在 main 文件中引入掛載原型中

import G6 from '@antv/g6';

當然除了上面我們通過 npm 去安裝外，也可以通過CDN的方式去引入；引入方式如下：

// version <= 3.2
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>

// version >= 3.3
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/{$version}/dist/g6.min.js"></script>

// version >= 4.0
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>

我們完成上面的安裝引入后，下面我們就可以完成一個簡易版的小圖形了；

其實很簡單，有點類似于我們運用 Echarts 大概的步驟就是

1、創(chuàng)建一個 DOM 來渲染圖形；

2、獲取固定格式的數(shù)據(jù)，按照我們 G6 所要求的數(shù)據(jù)格式造出數(shù)據(jù)；

3、實例化 DOM 的配置；

4、根據(jù)數(shù)據(jù)渲染圖形；

跟著我來做一下上面的四個步驟吧！

創(chuàng)建容器

需要在 HTML 中創(chuàng)建一個用于容納 G6 繪制的圖的容器，通常為 div 標簽。G6 在繪制時會在該容器下追加 canvas 標簽，然后將圖繪制在其中。

<div id="zssBox"></div>

數(shù)據(jù)準備

G6 接收的數(shù)據(jù)源為 JSON 格式的對象。該對象中需要有節(jié)點（nodes）和邊（edges）字段，分別用數(shù)組表示：

G6Obj: {
        nodes: [
          // 點集
          {
            id: "node1", // String，該節(jié)點存在則必須，節(jié)點的唯一標識
            x: 100, // Number，可選，節(jié)點位置的 x 值
            y: 200, // Number，可選，節(jié)點位置的 y 值
          },
          {
            id: "node2", // String，該節(jié)點存在則必須，節(jié)點的唯一標識
            x: 300, // Number，可選，節(jié)點位置的 x 值
            y: 200, // Number，可選，節(jié)點位置的 y 值
          },
        ],

        edges: [
          // 邊集
          {
            source: "node1", // String，必須，起始點 id
            target: "node2", // String，必須，目標點 id
          },
        ],
      },

注意：

nodes 數(shù)組中包含節(jié)點對象。每個節(jié)點對象中唯一的、必要的 id 以標識不同的節(jié)點，x、 y 指定該節(jié)點的位置；edges 數(shù)組中包含邊對象。source 和 target 是每條邊的必要屬性，分別代表了該邊的起始點 id 與目標點 id。

當然關于 nodes 和 edges 數(shù)組中各對象的屬性不僅僅上面羅列的這些；上面這些僅僅是必須項目，等后面會給大家介紹更多的屬性，下面我們繼續(xù)完成我們的圖形渲染

創(chuàng)建關系圖

創(chuàng)建關系圖（實例化）時，至少需要為圖設置容器、寬和高。

mounted() {
    const graph = new G6.Graph({
      container: "zssBox", // 必須，這是我們第一步中創(chuàng)建的DOM的id
      width: 800, // Number，必須，圖的寬度
      height: 500, // Number，必須，圖的高度
    });
  },

配置數(shù)據(jù)源，渲染

graph.data(this.G6Obj); //讀取第二步中的數(shù)據(jù)源到圖上
graph.render(); // 渲染圖

代碼寫到這里我們就可以在頁面中看到我們的效果啦！目前呢我們數(shù)據(jù)中只有兩項。兩個點一個線；那么大家可以自己嘗試一下模擬更多的數(shù)據(jù)比如如何實現(xiàn)一個三角形，如何實現(xiàn)一個長方形，相信并不難哈！完整代碼也給大家放到下面

<template>
  <div class="counter vantG6">
    <p>VantG6 演示區(qū)</p>

    <div id="zssBox"></div>
  </div>
</template>

<script>
import G6 from "@antv/g6";
export default {
  name: "vantG6",
  data() {
    return {
      G6Obj: {
        nodes: [
          // 點集
          {
            id: "node1", // String，該節(jié)點存在則必須，節(jié)點的唯一標識
            x: 100, // Number，可選，節(jié)點位置的 x 值
            y: 200, // Number，可選，節(jié)點位置的 y 值
          },
          {
            id: "node2", // String，該節(jié)點存在則必須，節(jié)點的唯一標識
            x: 300, // Number，可選，節(jié)點位置的 x 值
            y: 200, // Number，可選，節(jié)點位置的 y 值
          },
        ],

        edges: [
          // 邊集
          {
            source: "node1", // String，必須，起始點 id
            target: "node2", // String，必須，目標點 id
          },
        ],
      },
    };
  },
  methods: {},
  mounted() {
    const graph = new G6.Graph({
      container: "zssBox", // String | HTMLElement，必須，在 Step 1 中創(chuàng)建的容器 id 或容器本身
      width: 800, // Number，必須，圖的寬度
      height: 500, // Number，必須，圖的高度
    });

    graph.data(this.G6Obj); // 讀取 Step 2 中的數(shù)據(jù)源到圖上
    graph.render(); // 渲染圖
  },
};
</script>

<style>
.vantG6 {
  background-color: rgb(221, 188, 68) !important;
}
.vantG6 p {
  margin: 0 auto;
}
</style>