使用html快速基于antv G6实现可视化

最新推荐文章于 2024-06-25 19:01:03 发布

达分柒

最新推荐文章于 2024-06-25 19:01:03 发布

阅读量1.1k

点赞数

文章标签： html 前端 javascript vue.js vue

本文链接：https://blog.csdn.net/WCR777/article/details/126414952

版权

本文提供了一个Antv G6在Vue环境下的基础使用模板，包括HTML、CSS和JS代码示例。示例展示了如何创建一个Radial布局的图，并通过更新配置动态改变布局效果。适合初学者参考，实现数据可视化。

摘要由CSDN通过智能技术生成

因为Antv G6涉及到组件挂载，其可视化实现需要基于Vue或React等前端框架，无法在纯html上使用。

而网上能够迅速实现Antv G6的代码参考太少，因此在这里留一个模板供大家快速实现可视化。

注：
需要本地存在@antv依赖包，vue可以用线上依赖链接

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Antv G6 模板html</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
  </head>
  <body>
    <div id="app">
      {{message}}
    </div>
    <div id="container" style="height: 1000px;"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
    <script src="G6依赖路径\@antv\g6\dist\g6.min.js"></script>
    <script>
    var app = new Vue({
      el:"#app",

      data:{
        message:"Radial辐射图"
      },

      created(){
        console.log("created完成");
      },
      mounted(){
        console.log("mounted进行");

      // 后续代码可直接从Antv G6样例中cv
        const data = {
          nodes: [
            {
              id: '0',
              label: '0',
            },
            {
              id: '2',
              label: '2',
            },
            {
              id: '3',
              label: '3',
            },
            {
              id: '4',
              label: '4',
            },
            {
              id: '5',
              label: '5',
            },
            {
              id: '6',
              label: '6',
            },
            {
              id: '9',
              label: '9',
            },
            {
              id: '10',
              label: '10',
            },
          ],
          edges: [
            {
              source: '0',
              target: '2',
            },
            {
              source: '0',
              target: '3',
            },
            {
              source: '0',
              target: '4',
            },
            {
              source: '0',
              target: '5',
            },
            {
              source: '0',
              target: '9',
            },
            {
              source: '0',
              target: '10',
            },
            {
              source: '2',
              target: '3',
            },
            {
              source: '4',
              target: '5',
            },
            {
              source: '6',
              target: '4',
            },
            {
              source: '5',
              target: '6',
            },
            {
              source: '9',
              target: '10',
            },
          ],
        };

        const descriptionDiv = document.createElement('div');
        descriptionDiv.innerHTML =
          'Radial layout, focusNode =  = 0, unitRadius = 50, preventOverlap: false';
        const container = document.getElementById('container');
        container.appendChild(descriptionDiv);

        const width = container.scrollWidth;
        const height = (container.scrollHeight || 500) - 20;

        const graph = new G6.Graph({
          container: 'container',
          width,
          height,
          modes: {
            default: ['drag-canvas', 'drag-node'],
          },
          layout: {
            type: 'radial',
            unitRadius: 50,
          },
          animate: true,
          defaultNode: {
            size: 20,
          },
          defaultEdge: {
            style: {
              endArrow: {
                path: 'M 0,0 L 8,4 L 8,-4 Z',
                fill: '#e2e2e2',
              },
            },
          },
        });
        graph.data(data);
        graph.render();

        if (typeof window !== 'undefined')
          window.onresize = () => {
            if (!graph || graph.get('destroyed')) return;
            if (!container || !container.scrollWidth || !container.scrollHeight) return;
            graph.changeSize(container.scrollWidth, container.scrollHeight - 20);
          };

        layoutConfigTranslation();

        setInterval(function () {
          layoutConfigTranslation();
        }, 7000);

        function layoutConfigTranslation() {
          setTimeout(function () {
            descriptionDiv.innerHTML =
              'Radial layout, focusNode =  = 0, unitRadius = 50, preventOverlap: true';
            graph.updateLayout({
              preventOverlap: true,
              nodeSize: 20,
            });
          }, 1000);

          setTimeout(function () {
            descriptionDiv.innerHTML =
              'Radial layout, focusNode =  = 0, unitRadius = 80, preventOverlap: true';
            graph.updateLayout({
              unitRadius: 80,
            });
          }, 2500);

          setTimeout(function () {
            descriptionDiv.innerHTML =
              'Radial layout, focusNode =  = 10, unitRadius = 80, preventOverlap: true';
            graph.updateLayout({
              focusNode: '10',
            });
          }, 4000);

          setTimeout(function () {
            descriptionDiv.innerHTML =
              'Radial layout, focusNode =  = 20, unitRadius = 80, preventOverlap: true';
            graph.updateLayout({
              focusNode: '20',
            });
          }, 5500);

          setTimeout(function () {
            descriptionDiv.innerHTML =
              'Radial layout, focusNode =  = 0, unitRadius = 50, preventOverlap: false';
            graph.updateLayout({
              focusNode: '0',
              preventOverlap: false,
              unitRadius: 50,
            });
          }, 5500);
        }
      }
    })  
    </script>
  </body>
</html>