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

[DaydreamerGitHub]

问题描述

chart
.tree()
// .data({
// type: 'fetch',
// value: 'https://assets.antv.antgroup.com/g2/flare.json'
// })
.data(data)

data数据是完整正确，只有像注释的那样使用fetch的方式才能出来

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

补充说明（可选）

No response

[pearmini]

提供一下复现 demo

[DaydreamerGitHub]

提供一下复现 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>
  )
}

}
})