参考文档AntV X6 文档可自定义设置以下属性容器宽度width类型number | string默认 ‘100%’容器高度height类型number | string默认 ‘100%’效果如下图安装插件pnpmaddantv/x6创建DAG组件DAGChart.vuescript setup langtsimporttype{Edge,GraphasX6Graph,Node}fromantv/x6import{Graph}fromantv/x6import{useResizeObserver,debounce}fromvue-amazing-uiinterfaceProps{width?:string|number// 容器宽度height?:string|number// 容器高度}constpropswithDefaults(definePropsProps(),{width:100%,height:100%})constchartWidthcomputed((){if(typeofprops.widthnumber){return${props.width}px}returnprops.width})constchartHeightcomputed((){if(typeofprops.heightnumber){return${props.height}px}returnprops.height})constchartRefuseTemplateRef(chartRef)letgraph:X6Graph|nullnulltypeDagNodeData{label:stringtype:source|transform|sink|hello|string}functiongetDefaultNodePorts(){return{groups:{in:{position:left,zIndex:1,attrs:{circle:{r:4,magnet:false,stroke:#5F95FF,strokeWidth:1,fill:#fff}}},out:{position:right,zIndex:1,attrs:{circle:{r:4,magnet:false,stroke:#52c41a,strokeWidth:1,fill:#fff}}}},items:[{id:in-1,group:in},{id:out-1,group:out}]}}functiongetGraphData(){constnodes:Node.Metadata[][{id:source-1,shape:rect,// 节点图形 rect | circle | ellipse | polygon | polyline | path | image | html (HTML 节点使用 foreignObject 渲染 HTML 片段)x:80,// 节点位置 x 坐标单位为 pxy:140,// 节点位置 y 坐标单位为 pxwidth:140,// 节点宽度单位为 pxheight:42,// 节点高度单位为 pxangle:0,// 节点旋转角度单位为度data:{label:Source: Kafka,type:source}asDagNodeData,attrs:{body:{fill:#e6f4ff,stroke:#91caff,rx:6,ry:6},label:{text:Source: Kafka,fill:#1f1f1f}},ports:getDefaultNodePorts()},{id:transform-1,shape:rect,x:340,y:120,width:160,height:42,data:{label:Transform: Clean,type:transform}asDagNodeData,attrs:{body:{fill:#f6ffed,stroke:#b7eb8f,rx:6,ry:6},label:{text:Transform: Clean,fill:#1f1f1f}},ports:getDefaultNodePorts()},{id:transform-2,shape:rect,x:340,y:200,width:160,height:42,data:{label:Transform: Enrich,type:transform}asDagNodeData,attrs:{body:{fill:#f6ffed,stroke:#b7eb8f,rx:6,ry:6},label:{text:Transform: Enrich,fill:#1f1f1f}},ports:getDefaultNodePorts()},{id:sink-1,shape:rect,x:620,y:160,width:140,height:42,data:{label:Sink: ClickHouse,type:sink}asDagNodeData,attrs:{body:{fill:#fff7e6,stroke:#ffadd2,rx:6,ry:6},label:{text:Sink: ClickHouse,fill:#1f1f1f}},ports:getDefaultNodePorts()},{id:hello-1,shape:rect,x:880,y:60,width:140,height:42,data:{label:Hello: World,type:hello}asDagNodeData,attrs:{body:{fill:#fff0f6,stroke:#ffadd2,rx:6,ry:6},label:{text:Hello: World,fill:#1f1f1f}},ports:getDefaultNodePorts()},{id:hello-2,shape:rect,x:880,y:160,width:140,height:42,data:{label:Hello: Forest,type:hello}asDagNodeData,attrs:{body:{fill:#fff0f6,stroke:#ffadd2,rx:6,ry:6},label:{text:Hello: Forest,fill:#1f1f1f}},ports:getDefaultNodePorts()},{id:hello-3,shape:rect,x:880,y:260,width:140,height:42,data:{label:Hello: Sea,type:hello}asDagNodeData,attrs:{body:{fill:#fff0f6,stroke:#ffadd2,rx:6,ry:6},label:{text:Hello: Sea,fill:#1f1f1f}},ports:getDefaultNodePorts()}]constedges:Edge.Metadata[][{id:edge-1,source:{cell:source-1,port:out-1},target:{cell:transform-1,port:in-1},connector:{name:smooth}},{id:edge-2,source:{cell:source-1,port:out-1},target:{cell:transform-2,port:in-1},connector:{name:smooth}},{id:edge-3,source:{cell:transform-1,port:out-1},target:{cell:sink-1,port:in-1},connector:{name:smooth}},{id:edge-4,source:{cell:transform-2,port:out-1},target:{cell:sink-1,port:in-1},connector:{name:smooth}},{id:edge-5,source:{cell:sink-1,port:out-1},target:{cell:hello-1,port:in-1},connector:{name:smooth}},{id:edge-6,source:{cell:sink-1,port:out-1},target:{cell:hello-2,port:in-1},connector:{name:smooth}},{id:edge-7,source:{cell:sink-1,port:out-1},target:{cell:hello-3,port:in-1},connector:{name:smooth}}]return{nodes,edges}}functioninitGraph(){if(!chartRef.value)returngraphnewGraph({container:chartRef.value,grid:{visible:true,// 绘制网格默认绘制 dot 类型网格size:10,// 网格大小单位 pxtype:dot,// 网格类型可选 dot | fixedDot | mesh | doubleMesh | args:{color:#ddd,// 网点颜色thickness:1// 网点大小}},background:{color:#fafafa},// 背景panning:true,// 是否可以拖拽平移mousewheel:true,// 鼠标滚轮缩放interacting:{nodeMovable:true,edgeMovable:false,vertexMovable:false,edgeLabelMovable:false},autoResize:true// 监听容器大小改变并自动更新画布大小})// 点击事件graph.on(node:click,({node}){constdata(node.getData?node.getData():node.getData)asDagNodeData|undefinedconsole.log(节点被点击${data?.label})})constdatagetGraphData()graph.fromJSON(data)// 渲染元素fitView()centerView()useResizeObserver(chartRef,debounce((){console.log(centerView)fitView()centerView()},100)asResizeObserverCallback)}// 将画布缩放级别增加 0.1functionzoomIn(){graph?.zoom(0.1)}// 将画布缩放级别减少 0.1functionzoomOut(){graph?.zoom(-0.1)}// 将画布中元素缩小或者放大一定级别让画布正好容纳所有元素可以通过 maxScale 配置最大缩放级别functionfitView(){graph?.zoomToFit({padding:20,maxScale:1})}// 将画布中元素居中展示functioncenterView(){graph?.centerContent()}onMounted((){initGraph()})onBeforeUnmount((){graph?.dispose()graphnull})/scripttemplatedivclassdag-containerdiv refchartRefclassgraph-container:style--chart-width: ${chartWidth}; --chart-height: ${chartHeight};/div/div/templatestyle langlessscoped.dag-container{.graph-container{width:var(--chart-width)!important;height:var(--chart-height)!important;padding:16px 24px;border-radius:4px;}}/style在要使用的页面引入script setup langtsimportDAGChartfrom./DAGChart.vue/scripttemplatedivh1DAGChart 参考文档/h1ulclassm-listliaclassu-filehrefhttps://x6.antv.antgroup.com/tutorial/abouttarget_blankAntVX6文档/a/li/ulDAGChart:height500//div/template