AntV 蚂蚁新出的可视化组件，分为很多部分 官网
F6 文档链接
- 安装
npm install --save @antv/f6-wx - 微信开发工具 - 工具 - 构建npm
- 组件使用 分为图配置 / 树图配置
4. 图配置
wxml
<view><f6-canvaswidth="{{canvasWidth}}"height="{{canvasHeight}}"pixelRatio="{{pixelRatio}}"bind:onInit="handleCanvasInit"bind:onTouchEvent="handleTouch"/>
</view>
json
{"usingComponents": {"f6-canvas": "@antv/f6-wx/canvas/canvas"}
}
js
import F6 from '@antv/f6-wx';
import force from '@antv/f6-wx/extends/layout/forceLayout';/*** 基本力导向布局及节点拖拽*/Page({canvas: null,ctx: null,renderer: '', // mini、mini-native等，F6需要，标记环境graph: null,data: {width: 375,height: 600,pixelRatio: 1,forceMini: false,},onLoad() {F6.registerLayout('force', force);// 同步获取window的宽高const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync();this.setData({canvasWidth: windowWidth,canvasHeight: windowHeight,pixelRatio,});},/*** 初始化cnavas回调，缓存获得的context* @param {*} ctx 绘图context* @param {*} rect 宽高信息* @param {*} canvas canvas对象，在render为mini时为null* @param {*} renderer 使用canvas 1.0还是canvas 2.0，mini | mini-native*/handleCanvasInit(event) {const { ctx, canvas, renderer } = event.detail;this.isCanvasInit = true;this.ctx = ctx;this.renderer = renderer;this.canvas = canvas;this.updateChart();},/*** canvas派发的事件，转派给graph实例*/handleTouch(e) {this.graph && this.graph.emitEvent(e.detail);},updateChart() {const { canvasWidth, canvasHeight, pixelRatio } = this.data;const data = {nodes: [{ id: 'node0', size: 50 },{ id: 'node1', size: 30 },{ id: 'node2', size: 30 },{ id: 'node3', size: 30 },{ id: 'node4', size: 30, isLeaf: true },{ id: 'node5', size: 30, isLeaf: true },{ id: 'node6', size: 15, isLeaf: true },{ id: 'node7', size: 15, isLeaf: true },{ id: 'node8', size: 15, isLeaf: true },{ id: 'node9', size: 15, isLeaf: true },{ id: 'node10', size: 15, isLeaf: true },{ id: 'node11', size: 15, isLeaf: true },{ id: 'node12', size: 15, isLeaf: true },{ id: 'node13', size: 15, isLeaf: true },{ id: 'node14', size: 15, isLeaf: true },{ id: 'node15', size: 15, isLeaf: true },{ id: 'node16', size: 15, isLeaf: true },],edges: [{ source: 'node0', target: 'node1', id: 'edge0' },{ source: 'node0', target: 'node2', id: 'edge1' },{ source: 'node0', target: 'node3', id: 'edge2' },{ source: 'node0', target: 'node4', id: 'edge3' },{ source: 'node0', target: 'node5', id: 'edge4' },{ source: 'node1', target: 'node6', id: 'edge5' },{ source: 'node1', target: 'node7', id: 'edge6' },{ source: 'node2', target: 'node8', id: 'edge7' },{ source: 'node2', target: 'node9', id: 'edge8' },{ source: 'node2', target: 'node10', id: 'edge9' },{ source: 'node2', target: 'node11', id: 'edge10' },{ source: 'node2', target: 'node12', id: 'edge11' },{ source: 'node2', target: 'node13', id: 'edge12' },{ source: 'node3', target: 'node14', id: 'edge13' },{ source: 'node3', target: 'node15', id: 'edge14' },{ source: 'node3', target: 'node16', id: 'edge15' },],};// 创建F6实例this.graph = new F6.Graph({container: this.canvas,context: this.ctx,renderer: this.renderer,width: canvasWidth,height: canvasHeight,pixelRatio,modes: {default: ['drag-canvas', 'drag-node', 'zoom-canvas'],},layout: {type: 'force',},defaultNode: {size: 15,},});// 注册数据this.graph.data(data);this.graph.render();this.graph.fitView();},onUnload() {this.graph && this.graph.destroy();},
});
5. 树图配置
<button bindtap="setTreeData">控制</button><f6-canvaswidth="{{canvasWidth}}"height="{{canvasHeight}}"pixelRatio="{{pixelRatio}}"bind:onInit="handleCanvasInit"bind:onTouchEvent="handleTouch"/>
</view>
import F6 from '@antv/f6-wx';
import force from '@antv/f6-wx/extends/layout/forceLayout';
import TreeGraph from '@antv/f6-wx/extends/graph/treeGraph';const data123 = {id: 'K01215 项目成功标准',children: [{id: '相关方可能有不同看法，主要相关方和项目经理达成共识并予以记录',},{id: '财务测量指标',children: [{id: 'NPV：项目预期的累计投入和累计利润折算成现值，以计算项目预期净货币收益与损失；>=0可行，<0 不可行，越大越好； 折现率：考虑利率、通货膨胀确定的利率',},{id: 'ROI：投资回报率=纯利润/投资总额*100%；考虑时间价值ROI=NPV/投资折现总额*100%；越大越好',},{id: 'IRR：内部报酬率，净现金流量为0的折现率，越大越好',},],}],
};
Page({canvas: null,ctx: null,renderer: '', // mini、mini-native等，F6需要，标记环境graph: null,data: {width: 375,height: 600,pixelRatio: 1,forceMini: false,},onLoad() {F6.registerLayout('force', force);F6.registerGraph('TreeGraph', TreeGraph);// 同步获取window的宽高const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync();this.setData({canvasWidth: windowWidth,canvasHeight: windowHeight,pixelRatio,});},handleCanvasInit(event) {const { ctx, canvas, renderer } = event.detail;this.isCanvasInit = true;this.ctx = ctx;this.renderer = renderer;this.canvas = canvas;this.updateChart();},/*** canvas派发的事件，转派给graph实例*/handleTouch(e) {this.graph && this.graph.emitEvent(e.detail);},updateChart() {const { width, height, pixelRatio } = this.data;this.graph = new F6.TreeGraph({context: this.ctx,renderer: this.renderer,width,height,pixelRatio,fitView: true,modes: {default: [{type: 'collapse-expand',onChange: function onChange(item, collapsed) {const model = item.getModel();model.collapsed = collapsed;return true;},},'drag-canvas','zoom-canvas',],},defaultNode: {size: 26,anchorPoints: [[0, 0.5],[1, 0.5],],},defaultEdge: {type: 'cubic-horizontal',},layout: {type: 'dendrogram',direction: 'LR',nodeSep: 30,rankSep: 100,getId: function getId(d) {return d.id;},getHeight: function getHeight() {return 16;},getWidth: function getWidth() {return 16;},getVGap: function getVGap() {return 10;},getHGap: function getHGap() {return 100;},},});this.graph.node(function(node) {return {label: node.id,labelCfg: {offset: 5,position: node.children && node.children.length > 0 ? 'left' : 'right',},};});},setTreeData(){// 注册数据this.graph.data(data123);this.graph.render();this.graph.fitView();},onUnload() {this.graph && this.graph.destroy();},
});
