树形图为什么只显示一个点 #6008

提供一下复现 demo

提供一下复现 demo

/*

• @Author: zengzhaoyan
• @Date: 2024-01-03 16:33:31
• @LastEditors: zengzhaoyan
• @LastEditTime: 2024-01-26 09:32:07
• @Description:
• @FilePath: /zzy/src/views/demo/g2/index.tsx
• /

import { // defineAsyncComponent, defineComponent, // watch, // reactive, nextTick, onMounted, ref } from 'vue'

import { Chart } from '@antv/g2'

// import { treeData } from './data'

export default defineComponent({ props: {}, emits: [''], setup() { const treeData = { statusCode: 0, data: { level: 0, id: '3pQ9eUXyhx2vk76ehzqdXg', name: 'Awhd', instanceId: null, instanceNodeId: null, logic: 1, logicAttr: '0', sn: 'T', siteId: null, rate: 0.0, paterid: '0', treeid: 'kDTsEOA4j8uccRORbhzl2M', control: '', alarm: 0, sourcetype: null, currval: null, logicDeviceId: 'a2ac63864de8423b9faf5f4f73354ffa|58', logicDevicePath: '电力输出和厂用电', deviceMaker: null, deviceClass: null, deviceModel: null, instanceInfo: { siteId: '431b92812bb245c6ac526229cb23aae3', unitCodes: ['0214'] }, physicalDeviceId: null, physicalDevicePath: null, logicAlgorithmId: '', logicAlgorithmName: '', physicalAlgorithmId: null, physicalAlgorithmName: null, algorithmList: [], bcsStationList: null, conditions: null, conditionsToView: null, fdtValidateResult: null, children: [ { level: 1, id: '687d3f0f614d46bc99de323b5bbadc41', name: 'B', instanceId: null, instanceNodeId: null, logic: 3, logicAttr: '0', sn: 'M0', siteId: null, rate: 0.0, paterid: 'T', treeid: 'kDTsEOA4j8uccRORbhzl2M', control: '', alarm: 0, sourcetype: null, currval: null, logicDeviceId: '355a25f486224fb0bdd759ed47467581|58', logicDevicePath: '电力输出和厂用电电力输出系统主变压器系统主变压器', deviceMaker: null, deviceClass: null, deviceModel: null, instanceInfo: null, physicalDeviceId: null, physicalDevicePath: null, logicAlgorithmId: '', logicAlgorithmName: '', physicalAlgorithmId: null, physicalAlgorithmName: null, algorithmList: [], bcsStationList: null, conditions: null, conditionsToView: null, fdtValidateResult: null, children: [ { level: 2, id: '9b3db3bf44c047b193503d92a1528e95', name: '1', instanceId: null, instanceNodeId: null, logic: 4, logicAttr: '0', sn: 'X0', siteId: null, rate: 0.1, paterid: 'M0', treeid: 'kDTsEOA4j8uccRORbhzl2M', control: '', alarm: 0, sourcetype: null, currval: null, logicDeviceId: '', logicDevicePath: '', deviceMaker: null, deviceClass: null, deviceModel: null, instanceInfo: null, physicalDeviceId: null, physicalDevicePath: null, logicAlgorithmId: '', logicAlgorithmName: '', physicalAlgorithmId: null, physicalAlgorithmName: null, algorithmList: [], bcsStationList: null, conditions: null, conditionsToView: null, fdtValidateResult: null, children: [], prohibitingGateEnable: false, prohibitingGateCondition: null, alarmValue: 0, hasSubTree: false, topNode: false, physicalDevicePathList: [] }, { level: 2, id: '537f60fdac6a478fa9c1bca16f48244f', name: '2', instanceId: null, instanceNodeId: null, logic: 4, logicAttr: '0', sn: 'X1', siteId: null, rate: 0.2, paterid: 'M0', treeid: 'kDTsEOA4j8uccRORbhzl2M', control: '', alarm: 0, sourcetype: null, currval: null, logicDeviceId: '', logicDevicePath: '', deviceMaker: null, deviceClass: null, deviceModel: null, instanceInfo: null, physicalDeviceId: null, physicalDevicePath: null, logicAlgorithmId: '', logicAlgorithmName: '', physicalAlgorithmId: null, physicalAlgorithmName: null, algorithmList: [], bcsStationList: null, conditions: null, conditionsToView: null, fdtValidateResult: null, children: [], prohibitingGateEnable: false, prohibitingGateCondition: null, alarmValue: 0, hasSubTree: false, topNode: false, physicalDevicePathList: [] } ], prohibitingGateEnable: false, prohibitingGateCondition: null, alarmValue: 0, hasSubTree: false, topNode: false, physicalDevicePathList: [] }, { level: 1, id: '98780e14844c4befa1f2296fa1c5b798', name: 'C', instanceId: null, instanceNodeId: null, logic: 3, logicAttr: '0', sn: 'M1', siteId: null, rate: 0.0, paterid: 'T', treeid: 'kDTsEOA4j8uccRORbhzl2M', control: '', alarm: 0, sourcetype: 2, currval: null, logicDeviceId: '3dfdff5bfdb54a4eb89334ede9a61ee0|58', logicDevicePath: '水轮发电机组发电机系统发电机机架下机架', deviceMaker: null, deviceClass: null, deviceModel: null, instanceInfo: null, physicalDeviceId: null, physicalDevicePath: null, logicAlgorithmId: '', logicAlgorithmName: '', physicalAlgorithmId: null, physicalAlgorithmName: null, algorithmList: [], bcsStationList: null, conditions: [ { instanceStationNumbers: null, logicStationE: { enName: 'LrfraYdirHorVibP-Pvl', logicPath: '水轮发电机组发电机系统发电机机架~下机架' }, logicStationName: 'K:下机架Y向水平振动峰峰值', valueSet: ['upperValue', ''], customValues: {}, relationalSymbol: '>', logicalConnective: 'AND', keyStation: true, originalLogicStationName: '下机架Y向水平振动峰峰值' } ], conditionsToView: null, fdtValidateResult: true, children: [ { level: 2, id: '72644266b4004a4f8c8a3b68d77554da', name: '3', instanceId: null, instanceNodeId: null, logic: 4, logicAttr: '0', sn: 'X2', siteId: null, rate: 0.4, paterid: 'M1', treeid: 'kDTsEOA4j8uccRORbhzl2M', control: '', alarm: 0, sourcetype: null, currval: null, logicDeviceId: '', logicDevicePath: '', deviceMaker: null, deviceClass: null, deviceModel: null, instanceInfo: null, physicalDeviceId: null, physicalDevicePath: null, logicAlgorithmId: '', logicAlgorithmName: '', physicalAlgorithmId: null, physicalAlgorithmName: null, algorithmList: [], bcsStationList: null, conditions: null, conditionsToView: null, fdtValidateResult: null, children: [], prohibitingGateEnable: false, prohibitingGateCondition: null, alarmValue: 0, hasSubTree: false, topNode: false, physicalDevicePathList: [] }, { level: 2, id: '95d739947b134637a80fcd5de911163b', name: '4', instanceId: null, instanceNodeId: null, logic: 4, logicAttr: '0', sn: 'X3', siteId: null, rate: 0.7, paterid: 'M1', treeid: 'kDTsEOA4j8uccRORbhzl2M', control: '', alarm: 0, sourcetype: null, currval: null, logicDeviceId: '', logicDevicePath: '', deviceMaker: null, deviceClass: null, deviceModel: null, instanceInfo: null, physicalDeviceId: null, physicalDevicePath: null, logicAlgorithmId: '', logicAlgorithmName: '', physicalAlgorithmId: null, physicalAlgorithmName: null, algorithmList: [], bcsStationList: null, conditions: null, conditionsToView: null, fdtValidateResult: null, children: [], prohibitingGateEnable: false, prohibitingGateCondition: null, alarmValue: 0, hasSubTree: false, topNode: false, physicalDevicePathList: [] } ], prohibitingGateEnable: false, prohibitingGateCondition: null, alarmValue: 0, hasSubTree: false, topNode: false, physicalDevicePathList: [] } ], prohibitingGateEnable: false, prohibitingGateCondition: null, alarmValue: 0, hasSubTree: false, topNode: true, physicalDevicePathList: [] }, repMessage: '操作成功', page: null }

const data = [treeData.data]

const container: any = ref<HTMLElement | null>(null)

onMounted(async () => {
  await nextTick()

  const chart = new Chart({
    width: 400,
    height: 200,
    container: container.value
  })
  // console.log(chart.data)
  // console.log(data2)

  // 声明可视化
  chart
    .tree() // 创建一个 Interval 标记
    // .data({
    //   type: 'fetch',
    //   value: 'https://assets.antv.antgroup.com/g2/flare.json'
    // })
    .data(data)
    // .data({
    //   // type: 'tree',
    //   value: data
    // })
    // .encode('x', 'logic')
    .layout({
      // nodeSize: () => '110px',
      sortBy: () => 10,
      separation: () => 10
    })

  // chart.options({
  //   type: 'tree',
  //   data: data
  // })

  chart.render()
})

return () => {
  return (
    <div style="">
      <div ref={container}></div>
    </div>
  )
}

} })

提供一下复现 demo

遇到同样问题了. https://g2.antv.antgroup.com/examples/graph/hierarchy#tree 在这里面改设置数据方式, 不通过.

chart .tree() .data({ name: '你好', children: [ { name: 'test1' }, { name: 'test2' } ] }) .layout({ sortBy: (a, b) => a.value - b.value, })

chart .tree() .data({
  type: 'inline',
  value: { /*  your data */ }
})