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

最新推荐文章于 2024-09-12 07:32:50 发布

止语之语

最新推荐文章于 2024-09-12 07:32:50 发布

阅读量1.5k

点赞数 1

文章标签：小程序微信 AntV-F6

本文链接：https://blog.csdn.net/qq_36685539/article/details/129600556

版权

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

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

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 },

最低0.47元/天解锁文章