AntV - F6 小程序移动端图表组件（微信版）

AntV 蚂蚁新出的可视化组件，分为很多部分 官网
F6 文档链接

1. 安装 npm install --save @antv/f6-wx
2. 微信开发工具 - 工具 - 构建npm
3. 组件使用 分为图配置 / 树图配置

4. 图配置

wxml
<view>
  <f6-canvas
    width="{{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-canvas
    width="{{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();
  },
});