Package Exports
- @ant-design/graphs
- @ant-design/graphs/es/index.js
- @ant-design/graphs/lib/components/radial-graph
- @ant-design/graphs/lib/components/radial-graph/index.js
- @ant-design/graphs/lib/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ant-design/graphs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@ant-design/graphs
A React relation graphs component library, based on G6.
Website • Quick Start • Gallery • FAQ • Blog
Case
✨ Features
- Easy to use
- TypeScript
📦 Installation
$ npm install @ant-design/graphs🔨 Usage
import React from 'react';
import { DecompositionTreeGraph } from '@ant-design/graphs';
const DemoDecompositionTreeGraph = () => {
const data = {
id: 'A0',
value: {
title: '订单金额',
items: [
{
text: '3031万',
},
],
},
children: [
{
id: 'A1',
value: {
title: '华南',
items: [
{
text: '1152万',
},
{
text: '占比',
value: '30%',
},
],
},
children: [
{
id: 'A11',
value: {
title: '广东',
items: [
{
text: '1152万',
},
{
text: '占比',
value: '30%',
},
],
},
},
{
id: 'A12',
value: {
title: '广西',
items: [
{
text: '1152万',
},
{
text: '占比',
value: '30%',
},
],
},
},
{
id: 'A13',
value: {
title: '海南',
items: [
{
text: '1152万',
},
{
text: '占比',
value: '30%',
},
],
},
},
],
},
{
id: 'A2',
value: {
title: '华北',
items: [
{
text: '595万',
},
{
text: '占比',
value: '30%',
icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
},
],
},
},
],
};
const config = {
data,
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
nodeCfg: {
title: {
style: (cfg) => {
return {
fill: cfg?.value?.title === '青年' ? 'yellow' : '#fff',
};
},
},
items: {
containerStyle: {
fill: '#fff',
},
style: (cfg, group, type) => {
const styles = {
value: {
fill: '#52c41a',
},
text: {
fill: '#aaa',
},
icon: {
width: 10,
height: 10,
},
};
return styles[type];
},
},
nodeStateStyles: {
hover: {
stroke: '#1890ff',
lineWidth: 2,
},
},
style: {
radius: [2, 2, 2, 2],
},
},
markerCfg: (cfg) => {
const { children } = cfg;
return {
show: children?.length,
};
},
};
return <DecompositionTreeGraph {...config} />;
};
export default DemoDecompositionTreeGraph;📜 Document & API
See chart API for details. Common props:
// Graph 通用配置
export interface CommonConfig extends GraphContainerConfig {
data: Datum;
/** 是否缩放节点大小自适应容器 */
autoFit?: boolean;
/** 是否将图平移到中心位置 */
fitCenter?: boolean;
width?: number;
height?: number;
pixelRatio?: number;
/** 不同组件 layout 有差别，参考对应组件文档 */
layout?: any;
/** 边配置 */
edgeCfg?: EdgeCfg;
/** 节点配置 */
nodeCfg?: NodeCfg;
/** marker 配置 */
markerCfg?: IMarkerCfg;
/** 迷你地 */
minimapCfg?: MiniMapConfig;
/** 交互组件 */
toolbarCfg?: ToolbarCfg;
/** 提示 */
tooltipCfg?: TooltipCfg;
/** 交互行为 */
behaviors?: string[];
/** 是否开启动画 */
animate?: boolean;
/**
* @title 是否自定义布局
* @description 开启后，layout 失效，使用 data 里面的 x/y 进行数据布局
* @example
* ```ts
* {
* id: '-3',
* x: 100,
* y: 100,
* value: {
* title: '来源页面A',
* items: [
* {
* text: '曝光PV',
* value: '10.30万',
* icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
* },
* ],
* },
* },
* ```
* @default false
*/
customLayout?: boolean;
/** 图表渲染完成回调 */
onReady?: (graph: IGraph) => void;
}🤝 How to Contribute
Your contributions are always welcome! Please Do have a look at the issues first.
📧 Contact us
DingTalk group number: 44788198 .
License
MIT