court-badminton/commpents/f6tree/index.js

// commpents/f6tree/index.js
import F6 from '@antv/f6-wx';
import TreeGraph from '@antv/f6-wx/extends/graph/treeGraph'
import { wrapContext } from '../../utils/f6/context';
F6.registerGraph('TreeGraph', TreeGraph);
Component({

    canvas: null,
    ctx: null, // 延迟获取的2d context
    renderer: '', // mini、mini-native等，F6需要，标记环境
    isCanvasInit: false, // canvas是否准备好了
    graph: null,
    /**
     * 组件的属性列表
     */
    properties: {
        width: { type: Number },
        height: { type: Number },
        list: {
            type: Object, observer: function (val) {
                this.changeData()
            }
        }

    },

    /**
     * 组件的初始数据
     */
    data: {
        canvasWidth: 375,
        canvasHeight: 600,
        pixelRatio: 1,
        forceMini: false,
    },

    onLoad() {
        const obj = {};
        if (this.properties.width) obj.canvasWidth = this.properties.width
        if (this.properties.height) obj.canvasHeight = this.properties.height;
        const { pixelRatio } = wx.getSystemInfoSync();
        if (pixelRatio) obj.pixelRatio = pixelRatio
    },

    /**
     * 组件的方法列表
     */
    methods: {
        init(event) {
            const { ctx, canvas, renderer } = event.detail;
            this.isCanvasInit = true;
            this.ctx = wrapContext(ctx);
            this.renderer = renderer;
            this.canvas = canvas;
            this.updateChart();
        },

        /**
         * canvas派发的事件，转派给graph实例
         */
        handleTouch(e) {
            this.graph && this.graph.emitEvent(e.detail);
        },

        updateChart() {
            const data = this.properties?.list;
            const { canvasWidth, canvasHeight, pixelRatio } = this.data;

            // 创建F6实例
            this.graph = new F6.TreeGraph({
                container: this.canvas,
                context: this.ctx,
                renderer: this.renderer,
                width: canvasWidth,
                height: canvasHeight,
                pixelRatio,
                fitView: true,
                linkCenter: true,
                modes: {
                    default: [
                        'drag-canvas',
                        'zoom-canvas',
                        {
                            type: 'click-select',
                            shouldUpdate: e => {
                                return false;
                            }
                        }
                    ],
                },
                defaultNode: {
                    size: [150, 30],
                    anchorPoints: [
                        [0.5, 1],
                        [0.5, 0]
                    ],
                    type: "rect",
                    label: '冠军',
                    labelCfg: {
                        position: 'center',
                        offset: 10,
                        style: {
                            fill: '#666',
                        },
                    },
                },
                defaultEdge: {
                    type: 'polyline',
                    endArrow: true
                },
                layout: {
                    type: 'dendrogram',
                    nodeSep: 50, // 节点之间间距
                    direction: 'RL',
                },
            });
            this.graph.on('nodeselectchange', (e) => {
                if (!e.target) return;
                // 当前操作的 item
                const node = e.target?._cfg?.model;
                this.triggerEvent('tapNode', node)
            });

            // 注册数据
            this.graph.data(data);
            this.graph.render();
            this.graph.fitView();
        },
        changeData() {
            if (!this.graph) return;
            const data = this.properties?.list;
            this.graph.data(data)
            this.graph.render();
            this.graph.fitView();
        }
    },
    onUnload() {
        this.graph && this.graph.destroy();
    },
})