antvG6图表-vue中使用

logiclayerimportG6from'@antv/g6';exportdefault{name:"Mind",props:{//数据data:{type:Object,default(){return{}}},//宽高:{type:Number,default(){return0}}},data(){return{}},mounted(){constvm=this;constfontSize=12;//自定义节点G6.registerNode('line',{draw:(cfg,group)=>{constwidth=cfg.label.length*10;constrect=group.addShape('rect',{attrs:{x:0,y:-10,...cfg.样式，宽度，黑ght:20,lineWidth:0,opacity:0},name:'rect-shape',draggable:true});constlabel=group.addShape('text',{attrs:{text:cfg.label,fill:'#fff',fontSize,x:0,y:-5},name:'label-shape',可拖动：真的}）;constlabelBBox=label.getBBox();//consticon=group.addShape('circle',{//attrs:{//x:labelBBox.maxX+10,//y:(labelBBox.minY+labelBBox.maxY)/2,//r:5,//stroke:'#000'//},//name:'circle-shape',//draggable:true//});constbboxWidth=label.getBBox().width+20;rect.attr({width:bboxWidth});group.addShape('path',{属性:{lineWidth:1,fill:'#ccc',stroke:'#0092ff',path:[['M',0,0],['L',bboxWidth,0]]},name:'path-shape',可拖动:真})返回矩形；}});//获取宽度constwidth=document.getElementById('mind').scrollWidth;constgraph=newG6.TreeGraph({container:'mind',width,height:vm.height,pixelRatio:2,modes:{默认值：['collapse-expand','drag-canvas','zoom-canvas']},//节点类型和样式defaultNode:{type:'rect',//size:16,width:'auto',anchorPoints:[[0,0.5],[1,0.5]],style:{fill:'#005ff2',//背景颜色stroke:'#005ff2',//border},labelCfg:{style:{fill:'#ffffff',fontSize}}},//连接类型和样式defaultEdge:{type:'cubic-horizo??ntal',//polylinestyle:{stroke:'#0092ff'}},//layout布局：{type:'mindmap',direction:'H',getHeight:functiongetHeight(){返回16；},getWidth:functiongetWidth(){返回16;},getVGap:functiongetVGap(){返回10;},getHGap:函数getHGap(){返回100;}}});graph.node(function(node){//深度类似于节点IDif(node.depth==0){return{//size:[100,60],style:{fill:'#005ff2',//backgroundcolorstroke:'#005ff2',//border},//label:node.id}}if(node.depth==1){return{样式:{//渐变色填充:'l(0)0:rgba(0,36,186,1)0.5:rgba(0,36,186,0.5)1:rgba(0,0,0,0.1)',},}}if(node.depth==2){return{type:"line"}}return{//label:node.id,//设置显示名称labelCfg:{//position:node.children&&node.children.length>0？“左”：node.x>centerX？'right':'left',//设置显示左右偏移量:5}};});图.数据（this.data）；图.渲染（）；图.fitView();},}样式层#mind{width:100%;高度：100%；}datajson{"id":"id1","label":"小额特别生存补助金","children":[{"id":"id1-1","label":"Dead","children":[{"id":"id1-1-1","label":"题目数：35"},{"id":"id1-1-2","label":"数量：50"},{"id":"id1-1-3","label":"资金：340万"}]},{"id":"id1-2","label":"姓名与身份证不符","children":[{"id":"id1-2-1","label":"题数：35"},{"id":"id1-2-2","label":"人数：50"},{"id":"id1-2-3","label":"资金：340万"}]},{"id":"id1-3","label":"身份证信息未查到","children":[{"id":"id1-3-1","label":"题目数：35"},{"id":"id1-3-2","label":"题目数：50"},{"id":"id1-3-3","label":"基金：340万"}]},{"id":"id1-4","label":"领取低保","children":[{"id":"id1-4-1","label":"题数：35"},{"id":"id1-4-2","label":"题数people:50人"},{"id":"id1-4-3","label":"资金：340万"}]},{"id":"id1-5","label":"年龄不符合","children":[{"id":"id1-5-1","label":"题数：35"},{"id":"id1-5-2","label":"Number:50"},{"id":"id1-5-3","label":"Fund:340万"}]}]}