欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+G6圖形化實現(xiàn)功能示例

 更新時間：2023年07月03日 11:49:52   作者：忘れられたくない  
這篇文章主要為大家介紹了vue+G6圖形化實現(xiàn)功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

g6安裝 

g6安裝

 npm install --save @antv/g6

初始化畫布

plugins：存儲的為插件容器
container：String | HTMLElement，必須，在 Step 1 中創(chuàng)建的容器 id 或容器本身
width：圖的寬度
height：圖的高度
fitView：視圖居中
defaultNode：默認(rèn)元素樣式
defaultEdge：默認(rèn)線樣式（設(shè)置透明度為0.2，防止線太多，看著錯亂）

this.graph = new G6.Graph({
    plugins: ['tooltip'], // 配置  插件
    container: "g-container", // String | HTMLElement，必須，在 Step 1 中創(chuàng)建的容器 id 或容器本身
    width: 800, // Number，必須，圖的寬度
    height: 500, // Number，必須，圖的高度
    fitView: true,
    defaultNode: {
      size: [34, 34],
      style: {
        fill: "#ffffff",
        stroke: "rgba(0,0,0,.35)",
        lineWidth: 2,
        cursor: "pointer",
        radius: [2, 2],
        opacity: 0.2,
      },
      labelCfg: {
        style: {
          fontSize: 14,
        },
        position: "bottom",
        offset: 5,
      },
    },
    defaultEdge: {
      type: "line",
      color: "#999999",
      style: {
        opacity:0.2,
        cursor: "pointer",
        endArrow: {
          path: G6.Arrow.vee(6, 5, 0),
          d: 0,
          fill: "red",
          cursor: "pointer",
          lineDash: [0],
        },
      },
      labelCfg: {
        autoRotate: true,
        style: {
          background: {
            fill: "#ffffff",
            stroke: "#000000",
            padding: [2, 2, 2, 2],
            radius: 2,
            cursor: "pointer",
          },
        },
      },
    },
    },
    modes: {
      default: [
        {
          type: "zoom-canvas",
          enableOptimize: true,
          optimizeZoom: 0.9,
        },
        {
          type: "drag-canvas",
          enableOptimize: true,
        },
        "drag-node",
        "brush-select",
        "click-select",
      ],
    },
  });

讀取 Step 2 中的數(shù)據(jù)源到圖上

this.graph.data(this.data); // 讀取 Step 2 中的數(shù)據(jù)源到圖上

渲染圖

this.graph.render(); // 渲染圖

氣泡懸浮提示(插件)

// 提示
  const tooltip = new G6.Tooltip({
    offsetX: 10,
    offsetY: 40,
    getContent: (e) => {
      const outDiv = document.createElement("div");
      outDiv.style.width = "fit-content";
      outDiv.style.height = "fit-content";
      const model = e.item.getModel();
      if (e.item.getType() === "node") {//判斷是元素還是關(guān)系線
        outDiv.innerHTML = `${model.id}`;
      } else {
        const source = e.item.getSource();
        const target = e.item.getTarget();
        outDiv.innerHTML = `來源：${source.getModel().id}<br/>去向：${
          target.getModel().id
        }`;
      }
      return outDiv;
    },
  });

自定義元素

// 自定義一個名為 quadrilateral 的節(jié)點，通過數(shù)據(jù)type來判斷元素
      G6.registerNode(
        "quadrilateral",
        {
          draw(cfg, group) {
            const size = this.getSize(cfg); // 轉(zhuǎn)換成 [width, height] 的模式
            const color = cfg.color;
            const width = size[0];
            const height = size[1];
            //  / 1 \
            // 4     2
            //  \ 3 /
            const path = [
              ["M", -width / 4, 0 - height / 1.5], // 上部頂點
              ["L", width / 2, 0 - height / 1.5], // 右側(cè)頂點
              ["L", width / 4, 0], // 下部頂點
              ["L", -width / 2, 0], // 左側(cè)頂點
              ["Z"], // 封閉
            ];
            const style = { path: path, stroke: color, ...cfg.style };
            // 增加一個 path 圖形作為 keyShape
            const keyShape = group.addShape("path", {
              attrs: {
                ...style,
              },
              draggable: true,
              name: "diamond-keyShape", // 在 G6 3.3 及之后的版本中，必須指定 name，可以是任意字符串，但需要在同一個自定義元素類型中保持唯一性
            });
            // 返回 keyShape
            return keyShape;
          },
          afterDraw(cfg, group) {
            const size = this.getSize(cfg); // 轉(zhuǎn)換成 [width, height] 的模式
            const color = cfg.color;
            const width = size[0];
            const height = size[1];
            //  / 1 \
            // 4     2
            //  \ 3 /
            const path = [
              ["M", -width / 4, 0 - height / 1.5], // 上部頂點
              ["L", width / 2, 0 - height / 1.5], // 右側(cè)頂點
              ["L", width / 4, 0], // 下部頂點
              ["L", -width / 2, 0], // 左側(cè)頂點
              ["Z"], // 封閉
            ];
            const style = { path: path, stroke: color, ...cfg.style };
            // 增加一個 path 圖形作為 keyShape
            const keyShape = group.addShape("path", {
              attrs: {
                ...style,
              },
              draggable: true,
              name: "diamond-keyShape", // 在 G6 3.3 及之后的版本中，必須指定 name，可以是任意字符串，但需要在同一個自定義元素類型中保持唯一性
            });
            // 返回 keyShape
            return keyShape;
          },
        },
        // 注意這里繼承了 'single-node'
        "rect"
      );

新增、編輯、刪除

新增

從外部拖拽到畫布上，先獲取畫布的位置坐標(biāo)

point = this.graph.getPointByClient(e.clientX, e.clientY)

新增元素(rect為正方形)

this.graph.addItem("node", {
  x: point.x,//x坐標(biāo)
  y: point.y,//y坐標(biāo)
  label: "name",
  type: "rect",
  id:'123',
  size: [100, 100],//大小
  style: {//樣式
    lineWidth: 2,
    stroke: "#00BBEF",
    fill: "#DAF3FF",
  },
  nodeStateStyles: {//狀態(tài)樣式
    selected: {//選中樣式
      lineWidth: 1,
      stroke: "#00BBEF",
    },
    hover: {//懸浮樣式
      lineWidth: 1,
      stroke: "#00BBEF",
    },
  },
 });

設(shè)置選中狀態(tài)

this.graph.setItemState(item, "selected", true);

取消選中狀態(tài)

this.graph.setItemState(item, "selected", false);

設(shè)置懸浮狀態(tài)

this.graph.setItemState(item, "hover", true);

取消懸浮狀態(tài)

this.graph.setItemState(item, "hover", false);

編輯更新元素

this.graph.updateItem("123", //id
{
  x: point.x,//x坐標(biāo)
  y: point.y,//y坐標(biāo)
  label: "name",
  type: "rect",
  id:'123',
  size: [100, 100],//大小
  style: {//樣式
    lineWidth: 2,
    stroke: "#00BBEF",
    fill: "#DAF3FF",
  },
  nodeStateStyles: {//狀態(tài)樣式
    selected: {//選中樣式
      lineWidth: 1,
      stroke: "#00BBEF",
    },
    hover: {//懸浮樣式
      lineWidth: 1,
      stroke: "#00BBEF",
    },
  },
 });

刪除

this.graph.removeItem('123')

關(guān)系線新增、編輯、刪除

新增

this.graph.addItem("edge", {
  label: "name",
  type: "line",
  id:'edge123',
  target:'node1',//源
  source:'node2',//目標(biāo)
  style: {//樣式
    lineWidth: 2,
    lineDash:[8]//虛線
  },
  nodeStateStyles: {//狀態(tài)樣式
    selected: {//選中樣式
      lineWidth: 1,
      stroke: "#00BBEF",
    },
    hover: {//懸浮樣式
      lineWidth: 1,
      stroke: "#00BBEF",
    },
  },
 });

編輯更新關(guān)系

this.graph.updateItem("edge123", //id
{
  label: "name",
  type: "line",
  id:'edge123',
  target:'node1',//源
  source:'node2',//目標(biāo)
  style: {//樣式
    lineWidth: 2,
    lineDash:[8]//虛線
  },
  nodeStateStyles: {//狀態(tài)樣式
    selected: {//選中樣式
      lineWidth: 1,
      stroke: "#00BBEF",
    },
    hover: {//懸浮樣式
      lineWidth: 1,
      stroke: "#00BBEF",
    },
  },
 });

刪除關(guān)系

this.graph.removeItem('edge123')

拖拽元素獲取位置

// 拖動node節(jié)點
  this.graph.on("node:dragend", (ev) =&gt; {
    console.log(ev);
    let{x,y} = ev.item.getModel()
  })

元素顯示與隱藏

//node為元素節(jié)點，123為元素的id
let node = this.graph.findById('123')
//隱藏
node.hide()
//顯示
node.show()

懸停關(guān)聯(lián)線高亮線兩邊元素

先監(jiān)聽關(guān)聯(lián)線鼠標(biāo)移入事件，再監(jiān)聽移除事件

鼠標(biāo)移入時，高亮線及兩邊元素

鼠標(biāo)移出時，取消線及兩邊元素高亮

//鼠標(biāo)懸停線，高亮相關(guān)元素
  this.graph.on("edge:mouseenter", (e) => {
    e.stopPropagation();
    const source = e.item.getSource();
    const target = e.item.getTarget();
    //高亮
    this.graph.setItemState(source, "hover", true);
    this.graph.setItemState(target, "hover", true);
    this.graph.setItemState(e.item, "hover", true);
    //設(shè)置層級最前顯示（防止被覆蓋）
    source.toFront()
    target.toFront()
    e.item.toFront()
    //因為初始化了線透明的為0.2，所有這里把透明度設(shè)置1，方便查看
    this.graph.updateItem(e.item,{
        style:{opacity:1}
    })
  });
//鼠標(biāo)懸停線，取消高亮相關(guān)元素
  this.graph.on("edge:mouseleave", (e) => {
    e.stopPropagation();
    const source = e.item.getSource();
    const target = e.item.getTarget();
    //取消高亮
    this.graph.setItemState(source, "hover", false);
    this.graph.setItemState(target, "hover", false);
    this.graph.setItemState(e.item, "hover", false);
    this.graph.updateItem(e.item,{
        style:{opacity:0.2}
    })
  });

選中元素高亮當(dāng)前元素及關(guān)系兄弟節(jié)點及線

1、設(shè)置所有元素透明度0.2

2、高亮當(dāng)時點擊元素，透明度為1

3、判斷線的源數(shù)據(jù)和目標(biāo)數(shù)據(jù)是否和當(dāng)前點擊的節(jié)點有關(guān)系，有則高亮，無則顯示暗度

this.graph.on("node:click",ev=>{
  if(!ev) return
  let {id} = ev.tem.getModel()
  this.graph.setItemState(id,'selected',true)
  ev.item.toFront();
  //用于存儲id，清除之前的狀態(tài)
  this.positionId = id
  //設(shè)置所有元素透明度0.2
  this.graph.getNodes().forEach(node=>{
    this.graph.updateItem(node,{style:{opacity:0.2}})
  })
  //高亮當(dāng)前點擊元素
  this.graph.updateItem(ev.item,{style:{opacity:1}})
  //元素居中
  this.graph.focusItem(ev.item)
  //高亮關(guān)聯(lián)線及節(jié)點
  this.graph.getEdges().forEach(edge=>{
    if(edge.getSouce() === ev.item){
      this.graph.updateItem(edge.getTarget(),{style:{opacity:1}})
      this.graph.updateItem(edge,{style:{opacity:1}})
      edge.toFront()
    }else if(edge.getTarget() === ev.item){
      this.graph.updateItem(edge.getSouce(),{style:{opacity:1}})
      this.graph.updateItem(edge,{style:{opacity:1}})
      edge.toFront()
    }else{
      this.graph.updateItem(edge,{style:{opacity:0.2}})
    }
  })
})

點擊空白處，清除標(biāo)記狀態(tài)

this.graph.on("canvas:click",()=>{
  this.graph.getNodes().forEach(node=>{
    if(this.positionId){
      //設(shè)置所有元素透明度0.2
      this.graph.updateItem(node,{style:{opacity:0.2}})
      }
    this.graph.clearItemStatus(node)
  })
  this.graph.getEdges().forEach(edge=>{
    if(this.positionId){
      //關(guān)聯(lián)線0.2
      this.graph.updateItem(edge,{style:{opacity:0.2}})
      }
    this.graph.clearItemStatus(edge)
  })
})

以上就是vue+G6圖形化實現(xiàn)功能示例的詳細(xì)內(nèi)容，更多關(guān)于vue G6圖形化的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • vue+webpack中配置ESLint

    vue+webpack中配置ESLint

    這篇文章主要介紹了vue+webpack中配置ESLint，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • vue.js路由mode配置之去掉url上默認(rèn)的#方法

    vue.js路由mode配置之去掉url上默認(rèn)的#方法

    今天小編就為大家分享一篇vue.js路由mode配置之去掉url上默認(rèn)的#方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue實現(xiàn)無縫滾動的示例詳解

    vue實現(xiàn)無縫滾動的示例詳解

    這篇文章主要為大家詳細(xì)介紹了vue非組件如何實現(xiàn)列表的無縫滾動效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-09-09
  • Vue實現(xiàn)生成本地Json文件功能方式

    Vue實現(xiàn)生成本地Json文件功能方式

    這篇文章主要介紹了Vue實現(xiàn)生成本地Json文件功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • vue封裝el-upload批量上傳只請求一次接口

    vue封裝el-upload批量上傳只請求一次接口

    本文主要介紹了vue封裝el-upload批量上傳只請求一次接口，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02
  • vue之prop與$emit的用法說明

    vue之prop與$emit的用法說明

    這篇文章主要介紹了vue之prop與$emit的用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • vue3.2+ts實現(xiàn)在方法中可調(diào)用的擬態(tài)框彈窗(類el-MessageBox)

    vue3.2+ts實現(xiàn)在方法中可調(diào)用的擬態(tài)框彈窗(類el-MessageBox)

    這篇文章主要介紹了vue3.2+ts實現(xiàn)在方法中可調(diào)用的擬態(tài)框彈窗（類el-MessageBox）,這個需求最主要的是要通過方法去調(diào)用，為了像el-messagebox使用那樣方便，需要的朋友可以參考下
    2022-12-12
  • vue3封裝計時器組件的方法

    vue3封裝計時器組件的方法

    這篇文章主要為大家詳細(xì)介紹了vue3封裝計時器組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue3中實現(xiàn)網(wǎng)頁時鐘功能(顯示當(dāng)前時間并每秒更新一次)

    Vue3中實現(xiàn)網(wǎng)頁時鐘功能(顯示當(dāng)前時間并每秒更新一次)

    本文將詳細(xì)介紹如何在Vue3中實現(xiàn)一個每秒鐘自動更新的網(wǎng)頁時鐘,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-07-07
  • 關(guān)于vue中使用three.js報錯的解決方法

    關(guān)于vue中使用three.js報錯的解決方法

    最近因為three.js的項目要用Vue.js,下面這篇文章主要給大家介紹了關(guān)于vue中使用three.js報錯的解決方法,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-03-03

最新評論