使用antv/G6在vue项目中开发较复杂样式流程图

这篇具有很好参考价值的文章主要介绍了使用antv/G6在vue项目中开发较复杂样式流程图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

设计师提供了一版样式较复杂的流程图,我搜了一些常用的vue-super-flow和vue-x6-flow等都只支持简单的样式。之前自己写过纯展示流程图不涉及太多交互,感觉还是找一个成熟的插件开发更适合,也方便其他同事参考,所以最后选择了用antv/G6自己个性化开发,总结了使用antv/G6在vue项目中开发常见流程图的过程。

示例如下:

使用antv/G6在vue项目中开发较复杂样式流程图


一、什么是 G6?

G6官方文档链接 https://g6.antv.vision/zh/docs/manual/introduction
G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。

基于 G6,用户可以快速搭建自己的 图分析 或 图编辑 应用。

G6 作为一款专业的图可视化引擎,具有以下特性:
优秀的性能:支持大规模图数据的交互与探索;
丰富的元素:内置丰富的节点与边元素,自由配置,支持自定义;
可控的交互:内置 10+ 交互行为,支持自定义交互;
强大的布局:内置了 10+ 常用的图布局,支持自定义布局;
便捷的组件:优化内置组件功能及性能;
友好的体验:根据用户需求分层梳理文档,支持 TypeScript 类型推断。
除了默认好用、配置自由的内置功能,元素、交互、布局均具有高可扩展的自定义机制。

二、使用步骤

1.安装依赖并导入

npm install --save @antv/g6

import G6 from '@antv/g6';

2.初始化数据

常用的主要是两大类,一般图和树图。

一般图的数据结构是:

data:{
	//	节点
	nodes:[
	{
		id: 'XXX',
        label: 'XXX',
        key: 'XXX',
        text: 'XXX',
        img: require('XXX'),
	},
	...],
	// 连接线
	edges:[
	{
        source: '起始id',
       	target: '到达id',
	},
	...]
}

树图的数据结构是:

data:{
	id:'XXX',
	label: 'XXX',
  	children: [
    {
      	id: 'XXX',
      	label: 'XXX',
      	children: [
      	{
      		id: 'XXX',
      		label: 'XXX',
      		children: []
    	},
    	...]
    },
    ...],
}

我一开始选定了用树图实现,实现了样式以后发现没有办法满足产品要求的能够隐藏/显示不同层级并且重新渲染层级关系的功能,最后又更换成了一般图的布局方式。

3.树图实现

(1)首先配置自定义节点

 G6.registerNode(
          'icon-node', {
            options: {
              size: [90, 50], // 设置节点大小
              stroke: '#91d5ff', // 设置节点边框颜色
              fill: '#91d5ff', // 设置节点背景颜色
            },
            draw(cfg, group) {
              const styles = this.getShapeStyle(cfg);
              const {
                labelCfg = {}
              } = cfg;

              const w = styles.width;
              const h = styles.height;
              // 我的项目里需要区分多个节点显示不同的样式,我用key来区分
              if (cfg.key != "ACTION") {
                const keyShape = group.addShape('rect', {
                  attrs: {
                    ...styles,
                    x: -w / 2,
                    y: -h / 2,
                  },
                });
                /**
                 * leftIcon 格式如下:
                 *  {
                 *    style: ShapeStyle;
                 *    img: ''
                 *  }
                 */
                if (cfg.leftIcon) {
                  const {
                    style,
                    img
                  } = cfg.leftIcon;
                  // addShape是添加图形,可以添加不同的属性,具体配置可以看官方文档
                    group.addShape('rect', {
                      attrs: {
                        x: 1 - w / 2,
                        y: 1 - h / 2,
                        width: 38,
                        height: styles.height - 2,
                        fill: '#8c8c8c',
                        ...style,
                      },
                    });
                  group.addShape('image', {
                    attrs: {
                      x: 8 - w / 2,
                      y: 8 - h / 2,
                      width: 24,
                      height: 24,
                      img: img ||
                        'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
                    },
                    name: 'image-shape',
                  });
                }
                if (cfg.label) {
                  group.addShape('text', {
                    attrs: {
                      ...labelCfg.style,
                      text: cfg.label,
                      x: 50 - w / 2,
                      y: 28 - h / 2,
                    },
                  });
                }

                return keyShape;
              } else {
                var keyShape = group.addShape('image', {
                  attrs: {
                    x: 8 - w / 2,
                    y: 8 - h / 2,
                    width: 24,
                    height: 24,
                    img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
                  },
                  name: 'image-shape',
                });
                group.addShape('text', {
                  attrs: {
                    fill: '#2f6bff',
                    fontSize: 24,
                    text: cfg.label,
                    x: 8 - w / 2,
                    y: 8 - h / 2,
                  },
                });
                group.addShape('text', {
                  attrs: {
                    fill: '#333333',
                    fontSize: 14,
                    text: '项目',
                    x: 8 - w / 2,
                    y: h - 4,
                  },
                });
                group.addShape('image', {
                  attrs: {
                    x: 40 - w / 2,
                    y: h - 20,
                    width: 14,
                    height: 14,
                    img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
                  },
                });
                return keyShape;

              }


            },
            update: undefined,
            // 自定义锚点,方便连线
            getAnchorPoints: () => {
              return [
                [0, 0.5], // 左侧中间
                [1, 0.5], // 右侧中间
              ];
            },
          },
          'single-shape',
        );

(2)自定义带箭头的贝塞尔曲线(连接线)

   G6.registerEdge('flow-line', {
          draw(cfg, group) {
            const startPoint = cfg.startPoint;
            const endPoint = cfg.endPoint;

            const {
              style
            } = cfg;
            const shape = group.addShape('path', {
              attrs: {
                stroke: style.stroke,
                // endArrow: style.endArrow,  // 需要箭头可以自己配置箭头 有开始箭头和结束箭头
                path: [  // 用path路径配置带折点的连接线 M表示开始的坐标,L表示拐点的坐标
                  ['M', startPoint.x, startPoint.y],
                  ['L', (startPoint.x + endPoint.x) / 2, (startPoint.y)],
                  ['L', (startPoint.x + endPoint.x) / 2, endPoint.y],
                  ['L', endPoint.x, endPoint.y],
                ],
              },
            });
            return shape;
          },
          afterDraw(cfg, group) {
            const shape = group.get('children')[0];
            const startPoint = shape.getPoint(0);
            //创建节点之间的圆圈,并为每一个设置样式
            const circle = group.addShape('circle', {
              attrs: {
                x: startPoint.x + 92,
                y: startPoint.y,
                fill: '#cbdaff',
                r: 4, //圆圈大小
              },
              name: 'circle-shape',
            });
            // 实现动态效果,从线的开始滑到结束
            circle.animate(
              ratio => {
                const tmpPoint = shape.getPoint(ratio);
                return {
                  x: tmpPoint.x,
                  y: tmpPoint.y,

                };
              }, {
                repeat: 1, //动画是否重复
                duration: 3000, //一次动画持续时长
              },
            );
          },
        }, );

(3)设置默认样式

        // 设置默认开启状态样式
 		const defaultStateStyles = {
          hover: {
            stroke: '#2f6bff',
          },
        };
		// 设置默认节点样式
        const defaultNodeStyle = {
          fill: '#fff',
          stroke: '#cbdaff',
          radius: 5,
          shadowColor: '#cbdaff', // 阴影颜色
          shadowBlur: 10, // 阴影范围
          shadowOffsetX: 0, // 阴影偏移位置
          shadowOffsetY: 5,
          cursor: 'pointer', // 鼠标移动到节点上的样式
        };
		// 设置默认链接线样式
        const defaultEdgeStyle = {
          stroke: '#cbdaff',
          // 结尾箭头样式
          endArrow: {
            path: 'M 0,0 L 12, 6 L 9,0 L 12, -6 Z',
            fill: '#91d5ff',
            d: -60, // x轴上的偏移量
          },
        };
        // 设置默认节点名称样式
        const defaultLabelCfg = {
          style: {
            fill: '#333',
            fontSize: 14,
          },
        };

(4)配置树图并渲染

const graph = new G6.TreeGraph({
  container: 'html元素的id',
  width: XXX, // 渲染的宽度
  height: XXX, // 渲染的高度
  linkCenter: true,
  plugins: [minimap], // 配置插件
  modes: {  
    default: ['drag-canvas', 'zoom-canvas'],  // 常用的拖拽和缩放
  },
  defaultNode: {
    type: 'icon-node',  // 自定义节点名称,记得保持一致
    size: [120, 40],  //设置节点大小
    style: defaultNodeStyle, // 配置过的默认样式,直接写在这里也可以
    labelCfg: defaultLabelCfg, // 配置过的默认样式,直接写在这里也可以
  },
  defaultEdge: {
    type: 'flow-line', // 自定义连接线名称,记得保持一致
    style: defaultEdgeStyle, // 配置过的默认样式,直接写在这里也可以
  },
  nodeStateStyles: defaultStateStyles, // 配置过的默认样式,直接写在这里也可以
  edgeStateStyles: defaultStateStyles, // 配置过的默认样式,直接写在这里也可以
  // 若数据中不存在节点位置,则默认为随机布局。配置布局类型及其参数。
  layout: {
  // 类型  总共三种:径向:radial   有向分层:dagre     力导:force
  type: 'dagre',
  rankdir: 'LR', // 可选值:'TB' | 'BT' | 'LR' | 'RL',默认为图的中心 TB T,B,L,R 代表top,bottom,left,right
  },
});

graph.data(data); // 配置数据
graph.render();   // 渲染流程图
graph.fitView();  // 让画布内容适应视口,可选参数padding, rules, animate, animateCfg

(6)小地图插件

		// 设置出现一个缩略地图
		const minimap = new G6.Minimap({
          size: [150, 100],
        });

4.一般图实现

(1)自定义节点

一般图中获取节点属性获取不到节点的宽高,所以自己设置一个w、h,然后再刚刚的基础上加入一些细节

   G6.registerNode(
          // 该新节点类型名称
          'node',
          // 该新节点类型的定义
          // 当有 extendedTypeName (第三个参数)时,没被复写的函数将会继承 extendedTypeName 的定义
          {
            // cfg  节点身上所有的配置:包括label,size,x,y坐标等 

            // 这个方法,每渲染一个节点,执行一次
            drawShape(cfg, group) {
              const styles = this.getShapeStyle(cfg);
              // ctg上的id key label 都可以决定当前节点的类型
              
              // 可以根据标题长度设置节点的大小
              // cfg.size = (cfg.label.length / 10) * 130; 
              // if (cfg.label.length / 10 < 1) {
              //   widthX = 120;
              // } else {
              //   widthX = cfg.size;
              // }
              
              let w = 180,
                  h = 50;
              // 根据设计图第一个节点主要是展示图片和个数,配置对应的形状
              if (cfg.key == "0") {
                w = 100;
                h = 155;
                var keyShape = group.addShape('image', {
                  attrs: {
                    x: -w / 2,
                    y: -h / 2,
                    width: w,
                    height: h,
                    img: cfg.img,
                  },
                  name: 'image-shape',
                });
                group.addShape('circle', {
                  attrs: {
                    x: w / 2,
                    y: 0,
                    r: 2.5,
                    fill: '#fff',
                    stroke: '#cbdaff',
                    lineWidth: 2,
                  },
                });
                group.addShape('text', {
                  attrs: {
                    fill: '#2f6bff',
                    fontSize: 24,
                    text: cfg.label,
                    textAlign: 'center',
                    x: 0,
                    y: -45,
                  },
                });
                group.addShape('text', {
                  attrs: {
                    fill: '#333333',
                    fontSize: 14,
                    text: '项目',
                    textAlign: 'center',
                    x: 0,
                    y: h / 2 - 30,
                  },
                });
                return keyShape;
              } else {
              // 根据标题的长度判断节点的高度
                var rowNum = 0
                for (let i = 0; i < cfg.label.length; i++) {
                  var j = i + rowNum
                  if (i % 8 == 0 && i > 0 && j != cfg.label.length) {
                    var newStr = cfg.label.slice(0, j) + "\n" + cfg.label.slice(j);
                    cfg.label = newStr
                    rowNum++;
                  }
                }
                if (rowNum > 1) {
                  h += (rowNum - 1) * 15
                }
                cfg.size = [w, h]
                const rect = group.addShape('rect', {
                  attrs: {
                    x: -w / 2,
                    y: -h / 2,
                    width: w,
                    height: h,
                    fill: '#fff',
                    stroke: '#a0d4ff',
                    radius: 9,
                    shadowColor: '#a0d4ff', // 阴影颜色
                    shadowBlur: 10, // 阴影范围
                    shadowOffsetX: 0, // 阴影偏移位置
                    shadowOffsetY: 5,
                    cursor: 'pointer', // 鼠标移动 到节点上的样式
                  },
                });
                group.addShape('circle', {
                  attrs: {
                    x: 0 - w / 2,
                    y: 0,
                    r: 2.5,
                    fill: '#fff',
                    stroke: '#a0d4ff',
                    lineWidth: 2,
                  },
                });
                group.addShape('image', {
                  attrs: {
                    x: cfg.key != '1' ? 17 - w / 2 : 12 - w / 2,
                    y: cfg.key != '1' ? -15 : -19,
                    width: cfg.key != '1' ? 30 : 38,
                    height: cfg.key != '1' ? 30 : 38,
                    img: cfg.img,
                  },
                });

                group.addShape('text', {
                  attrs: {
                    x: 60 - w / 2,
                    y: 0,
                    fill: '#333333',
                    fontSize: 14,
                    text: cfg.label,
                    textBaseline: 'middle',
                  },
                });
                return rect;
              }

            },
            /**
             * 获取锚点(相关边的连入点)
             * @param  {Object} cfg 节点的配置项
             * @return {Array|null} 锚点(相关边的连入点)的数组,如果为 null,则没有控制点
             */
            // 自定义锚点
            getAnchorPoints: () => {
              return [
                [0, 0.5], // 左侧中间
                [1, 0.5], // 右侧中间
              ];
            },
          },

          // 被继承的节点类型,可以是内置节点类型名,也可以是其他自定义节点的类型名。
          // extendedTypeName 未指定时代表不继承其他类型的节点;
          // 例如基类 'single-node',或 'circle', 'rect' 等
          'single-shape'
        );

连接线跟上面树图的配置一样即可,如果想要曲线可以自己修改

(2)配置图属性并渲染

 const graph = new G6.Graph({
          // 常用配置项 
          // 类型:Boolean;默认:'false'。图是否自适应画布。
          fitView: true,
          // 类型:Number | Array;默认:0。图自适应画布时的四周留白像素值。fitView 为 true 时生效。
          // fitViewPadding : 0
          // 类型:Boolean;默认:'false'。是否平移图使其中心对齐到画布中心。v3.5.1 后支持。
          fitCenter: true,
          // bloodView:流程图容器id
          container: 'projectView',
          width:'XXX',
          height:'XXX',
          //modes 交互行为相关
          // 配置多种交互模式及其包含的交互事件的。
          modes: {
            default: [
              'drag-canvas',
              'zoom-canvas',
              // 如果没有特殊的样式可以直接用内置的tooltip
              //       {
              //         type: 'tooltip',
              //         formatText(model) {
              //           console.log(model)
              //           const cfg = model.text;
              //           const text = model.text;
              //           // cfg.forEach((row) => {
              //           //   text.push(row.label + ':' + row.value + '<br>');
              //           // });
              //           return text;
              //         },
              //         offsetX: 70,
              // 		 offsetY: 20,
              //       },
            ],
          },
          plugins: [tooltip], // 这次项目悬浮框用了插件
          zoom: 1,
          // 若数据中不存在节点位置,则默认为随机布局。配置布局类型及其参数。
          layout: {
            // 类型  总共三种:径向:radial   有向分层:dagre     力导:force
            type: 'dagre',
            // 'LR':从左至右布局;
            rankdir: 'LR', // 可选可选值:'TB' | 'BT' | 'LR' | 'RL',默认为图的中心 TB
            nodesep: 20,  //节点之间的距离,水平布局时指垂直距离
            ranksep: 40,  //层级之间的距离,水平布局时指垂直距离
          },
          // defaultNode类型:Object。默认情况下全局节点的配置项,包括样式属性和其他属性
          // G6 的内置节点包括 
          // circle圆形,rect长方形,ellipse椭圆,diamond菱形,triangle三角形,
          // star五角星,image图片,modelRect卡片,donut圆形(v4.2.5 起支持)。
          defaultNode: {
            type: 'node', // 这里的type指向自定义节点
            // size:300,
            size: [180, 50],
            style: defaultNodeStyle,
            labelCfg: defaultLabelCfg,
          },
          // defaultEdge  类型:Object。默认情况下全局边的配置项,包括样式属性和其他属性
          defaultEdge: {
            type: 'flow-line',
            style: {
              endArrow: true,
              lineWidth: 2,
              stroke: '#cbdaff',
            },
          },
          nodeStateStyles: defaultStateStyles,
          edgeStateStyles: defaultStateStyles,
        });
       	// 动态配置完层级后需要销毁后重新渲染,否则页面上会显示多个渲染的流程图
         if (this.graph != null) {
            this.graph.destroy();
          }
          this.graph = graph
          graph.data(data);
           // 渲染
          graph.render();
        // this.graph.zoomTo(1);  // 缩放 参数为缩放的倍数,后面也可跟x,y坐标,将以传入坐标为中心
        // this.graph.moveTo(0,height/2); // 采用绝对位移将画布移动到指定坐标

(3)自定义tooltip

需求中的悬浮框需要展示该节点下面的所有项目及带有查看详情按钮,所以我使用了插件没有用内置的。

需要注意的一点是在getContent()里的代码一定要严格遵守编写规范,尤其注意后面一定要带';',否则会一直报错而且你找不到原因!!!

 const tooltip = new G6.Tooltip({
          offsetX: -400,  // 偏移距离
          offsetY: -850,
          trigger: 'click', // 触发方式 可选 mouseenter,
          getContent(e) {
            const outDiv = document.createElement('div');
            outDiv.style.width = '270px';
            outDiv.style.padding = '0 10px';
            let ulText = ``;
            if (typeof (e.item.getModel().text) == 'object') {
              (e.item.getModel().text).map((item, index) => {
                ulText +=
                  `<li style='padding:5px 60px 5px 0;
                position: relative;word-break: break-all;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 12px;'>项目名称:<span style="color:#333">${item.label}</span><span type="text" style="color: #2f6bff;border:none;background:transparent;cursor:pointer;  position: absolute;top: 50%;right: 0;transform: translateY(-50%);">查看详情</span></li>`;
              });
              outDiv.innerHTML =
                `<div style="font-size:14px;color:#333;font-weight:bold;">${e.item.getModel().label}</div><ul style="margin:10px 0 0;padding:0;font-size:12px">` +
                ulText +
                `</ul>`;
            } else {
              outDiv.innerHTML =
                `<div style="font-size:14px;color:#333;font-weight:bold;">${e.item.getModel().label}</div>`;
            }

            return outDiv
          },
          itemTypes: ['node']
        });

5.插件

G6 提供了一些可插拔的组件,包括:
Legend (v4.3.0 起支持)
SnapLine (v4.3.0 起支持)
Grid
Minimap
ImageMinimap
Edge Bundling
Menu
ToolBar
TimeBar
Tooltip
Fisheye
EdgeFilterLens

三、注意事项

如何让 IE 支持 G6

对于这类问题,我们在项目中只需要引入 babel-polyfill 即可,具体使用方法如下:

在主入门文件中引入 babel-polyfill ;
在 bable-loader 中加入如下代码:

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('node_modules/@antv/g6')]
}

include 表示哪些目录中的 .js 文件需要进行 babel-loader;exclude 表示哪些目录中的 .js 文件不要进行 babel-loader。

总结

以上就是今天要讲的内容,本文仅仅简单介绍了antv/G6的使用,更多的示例及API请移步官方文档。文章来源地址https://www.toymoban.com/news/detail-408666.html

到了这里,关于使用antv/G6在vue项目中开发较复杂样式流程图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • antv/g6基本使用教程

     在项目中引入 G6 有以下两种方式:npm 引入,CDN 引入。 1 在项目中使用 npm 包引入 Step 1:  使用命令行在项目目录下执行以下命令: Step 2:  在需要用的 G6 的 JS 文件中导入: 2 在 HTML 中使用 CDN 引入 注意 在  {$version}  中填写版本号,例如  3.2.0 ; 最新版为 3.2.0,可以在 

    2024年02月02日
    浏览(47)
  • G6框架Dagre流程图第三个自左向右的 Dagre 上对齐改造,对齐结点和边添加样式,并添加修改节点和展示结点详细信息交互

    ​​ 标题修改具体项 设置结点的样式 设置边的样式 添加修改结点名称功能 添加展示结点详细信息功能 参考链接 基本图形:https://g6.antv.vision/zh/examples/net/dagreFlow#lrDagreUL 展示结点详细信息功能:https://g6.antv.vision/zh/examples/tool/tooltip#tooltipClick 修改结点名称功能:https://g6.ant

    2024年02月10日
    浏览(58)
  • antv/g6绘制数据流向图

    在业务开发中需要绘制数据流向图,由于echarts关系图的限制以及需求的特殊要求,转而使用antv/g6实现,本文以代码的方式实现数据流向需求以及节点分组,版本\\\"@antv/g6\\\": “^4.8.24”, 本文主要列出关键性的代码,并非全部代码

    2024年01月25日
    浏览(49)
  • AntV G6自定义节点(多边形+图片)

    要求:拓扑节点根据不同的设备类型显示不同的图标,且根据设备状态显示不同的背景色,鼠标点击选中节点还可高亮 不同设备不同图标,不同状态不同背景色 鼠标点击选中节点高亮

    2024年02月09日
    浏览(65)
  • antv/g6 交互与事件及自定义Behavior

    在 G6 中,提供了直接的单机事件、还有监听时机的方法。可以监听画布、节点、边、以及各函数被调用的时机等: 1. 绑定事件 要绑定事件,首先需要获得图表实例( Graph 实例),然后使用 on 方法来绑定事件。 分为三类:全局事件、canvas事件、节点/边/combo事件; eventName 是

    2024年02月04日
    浏览(45)
  • 可视化—AntV G6实现节点连线及展开收缩分组

    AntV 是蚂蚁金服全新一代数据可视化解决方案,主要包含数据驱动的高交互可视化图形语法G2,专注解决流程与关系分析的图表库 G6、适于对性能、体积、扩展性要求严苛的场景。 demo使用 数字 模拟真实的节点及分组数据。 combo 内的 nodes 亦是使用 随机数 生成,节点之前的

    2024年02月16日
    浏览(68)
  • AntV G6 的坑之——从卡掉渣到满帧需要几步

    AntV G6 是一款图可视化与分析开源引擎。《AntV G6 的坑之——XXX》系列文章持续更新中,总结常见问题及神坑解决方案。任何问题可在 GitHub Issue 中提问,求 GitHub Star ⭐️https://github.com/antvis/g6 原文链接:https://g6.antv.antgroup.com/manual/faq/performance-opt 在面对复杂数据的图可视分析

    2024年02月16日
    浏览(70)
  • 基于G6的弓字形流程图

    现在有个需求是 类似于步骤条、流程图 ,但是节点比较多。 搜了很多类似组件,还是有各种问题。 一开始用的是 element-ui 自带的步骤条组件(下图所示),但是节点过多,宽度不够的时候,换行就是直接从新一行开始接上,但是这样节点一多就不美观,不够直观。 后面尝

    2024年02月16日
    浏览(53)
  • 「AntV」X6图编辑器的应用——流程图实现

    在线预览 源码 阮一峰:SVG图像入门 SVGtutorial 因为antv/x6是基于SVG的图编辑器,所以SVG的知识有必要了解下的 简介 可缩放矢量图形【基于图形】 全称:Scalable Vector Graphics 定义基于矢量的图形 基于XML语法 放大缩小不会失真 属于万维网标准 可以插入DOM,通过JavaScript和CSS来操作

    2024年02月09日
    浏览(55)
  • antV L7 无底图模式 和 地图3D样式的使用

    下方为设计图样式,主要实现地图3D且去除底图  这次使用的是由蚂蚁金服 AntV 数据可视化团队推出antV L7,练习的时候使用四川的地图json数据,通过DataV.GeoAtlas地理小工具系列就可以下载各个地方的地图数据(只能精确到县),下面开始正文 一、创建地图 根据官网给出的使用

    2024年02月06日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包