Comments (2)
提供一下复现 demo
from g2.
提供一下复现 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>
)
}
}
})
from g2.
Related Issues (20)
- V5 版本如何实现十字辅助线 HOT 6
- 【v5】legend 筛选 快速点击两下,会出现筛选错误
- 双轴的网格对齐线可以共用一份吗? HOT 1
- 怎么设置柱状图柱子之间的距离为固定距离?paddingOuter 是什么意思?为什么范围是【0,1】? HOT 5
- 怎么设置label文本字体大小 HOT 2
- 双轴图比例尺不同步状态下,下钻同样展示双轴图设置 比例尺不同步后,会出现Maximum call stack size exceeded
- 折线图无法更改数据标签的位置 (position字段设置值无效) HOT 4
- G2开启label配置后 多次render导致报错
- 【V5 Bug】Y轴离散时,框选结果与视觉不符合
- 【Bug】V5版本,point 图表有 scrollBar 后,文字label并不会随滚动条滚动
- 如何设置标签文本字体大小
- 关于缩略轴,拖拽两个缩略轴,发生两个文字重叠 HOT 2
- g2 开启label ==>> layout中某些组合 会报错
- empty HOT 1
- 标题(Title)设置不生效。 HOT 2
- [v5]仪表盘:底部间距很大
- vue3引用g2报错index.esm.js:617 Uncaught TypeError: Cannot read properties of undefined (reading 'font') HOT 5
- g2的tooltip在安卓10的webview中报错 HOT 3
- # Element Cannot Update When Mapper Updated
- 如何通过Spec的方式声明多个View? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from g2.