自定义系列：关系图
图表是基于 ECharts 的树图开发的新类型图表，与 ECharts 不同的是，我们在布局上采用了父节点与第一个子节点居中对齐的横向垂直对齐模式，并且节点的内容与连接线的绘制完全由用户自定义。
同时，我们对其能力做了扩展，暴露了部分自定义配置项（均以 dv 前缀进行命名，以和 ECharts 配置项做以区分），在这里进行说明。
实时调试预览
自定义配置项
以下配置项只在 series.type: 'dvRelationshipDiagram' 时有效。
series.data
-
类型
RelationshipDiagramSeriesNodeItemOptiontype RenderOption = {
// 主文本元素
text?: {
style?: {
text: string;
};
};
// 副文本元素
attachment?: {
style?: {
text?: string;
};
}[];
// 头像logo
logo?: string;
};
export interface RelationshipDiagramSeriesNodeItemOption {
type?: string;
/** 节点名字 */
name?: string;
/** 节点背景颜色 */
backgroundColor?: string[];
/** 渲染配置 */
render?: RenderOption | RenderOption[];
/** 孩子节点 */
children?: RelationshipDiagramSeriesNodeItemOption[];
/** 是否折叠节点 */
collapsed?: boolean;
/** 父节点id */
parentId?: string | number;
/** 默认的主树 */
__treeIndex?: number;
}
// 示例数据
{
type: 'root',
/** 节点展开收起 */
collapsed: false,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
/** 渲染配置 */
render: {
text: { style: { text: '半导体生产制造者' } },
attachment: [
{
style: { text: '-12.23%', color: 'red' },
},
{
style: { text: '-12.23万', color: 'red' },
},
]
}
}
系列数据。
示例数据:
注意
数据最外层的fake节点是假节点,需要有这一层嵌套关系
{
// 假节点，不参与节点渲染
type: 'fake',
collapsed: false,
children: [
// 第一颗子树
{
/** 一级节点 */
type: 'root',
/** 优先级 */
priority: 0,
/** 是否选中 */
// selected: false,
/** 水印 */
watermark: '上游',
/** 是否折叠起来 */
collapsed: false,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
/** 渲染配置 */
render: {
text: { style: { text: '半导体生产制造者' } },
attachment: [
{
style: { text: '-12.23%', color: 'red' },
},
{
style: { text: '-12.23万', color: 'red' },
},
]
},
/** 子节点 */
children: [
{
/** 折叠展开按钮 */
type: 'group',
/** 是否折叠起来 */
collapsed: false,
render: {
labelText: { style: { text: '2' } },
},
children: [
{
/** 二级节点 */
type: 'second',
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: false,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: {
text: { style: { text: '半导体材料分析师' } },
attachment: [
{
style: { text: '+12.23%', color: 'green' },
},
{
style: { text: '-12.23万', color: 'green' },
},
]
},
children: [
{
/** 折叠展开按钮 */
type: 'group',
/** 是否折叠起来 */
collapsed: true,
render: {
labelText: { style: { text: '2' } },
},
children: [
{
/** 三级节点 */
type: 'third',
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: true,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: {
text: { style: { text: 'low-E玻璃' } },
attachment: [
{
style: { text: '+12.23%', color: 'green' },
},
{
style: { text: '12.23万', color: 'green' },
},
]
},
children: [
]
},
{
/** 三级节点 */
type: 'third',
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: true,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: null,
children: [
{
/** 折叠展开按钮 */
type: 'group',
/** 是否折叠起来 */
collapsed: true,
render: {
labelText: { style: { text: '4' } },
},
children: [
/** 四级节点 */
{
type: 'fourth',
/** 是否折叠起来 */
collapsed: true,
total: 225,
render: [
{
text: { style: { text: '什么都科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'https://eq.10jqka.com.cn/newlogo/300333.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
]
},
]
}
]
},
]
}
]
},
{
/** 二级节点 */
type: 'second',
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: false,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: {
text: { style: { text: '生产设备' } },
attachment: [
{
style: { text: '+12.23%', color: 'green' },
},
{
style: { text: '12.23万', color: 'green' },
},
]
},
children: [
{
/** 折叠展开按钮 */
type: 'group',
/** 是否折叠起来 */
collapsed: true,
render: {
labelText: { style: { text: '2' } },
},
children: [
{
/** 三级节点 */
type: 'third',
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: true,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: {
text: { style: { text: '半导体封装材料' } },
attachment: [
{
style: { text: '+12.23%', color: 'green' },
},
{
style: { text: '12.23万', color: 'green' },
},
]
},
children: [
{
/** 折叠展开按钮 */
type: 'group',
/** 是否折叠起来 */
collapsed: true,
render: {
labelText: { style: { text: '4' } },
},
children: [
/** 四级节点 */
{
type: 'fourth',
/** 是否折叠起来 */
collapsed: true,
render: [
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
}
]
},
]
}
]
},
{
/** 三级节点 */
type: 'third',
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: true,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: {
text: { style: { text: '半导体测试材料' } },
attachment: [
{
style: { text: '+12.23%', color: 'green' },
},
{
style: { text: '12.23万', color: 'green' },
},
]
},
children: [
{
/** 折叠展开按钮 */
type: 'group',
/** 是否折叠起来 */
collapsed: true,
render: {
labelText: { style: { text: '4' } },
},
children: [
/** 四级节点 */
{
type: 'fourth',
/** 是否折叠起来 */
collapsed: true,
render: [
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
}
]
},
]
}
]
},
{
/** 三级节点 */
type: 'third',
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: true,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: {
text: { style: { text: '半导体测试材料' } },
attachment: [
{
style: { text: '+12.23%', color: 'green' },
},
{
style: { text: '12.23万', color: 'green' },
},
]
},
children: [
{
/** 折叠展开按钮 */
type: 'group',
/** 是否折叠起来 */
collapsed: true,
render: {
labelText: { style: { text: '4' } },
},
children: [
/** 四级节点 */
{
type: 'fourth',
/** 是否折叠起来 */
collapsed: true,
render: [
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
}
]
},
]
}
]
},
]
}
],
},
{
/** 二级节点 */
type: 'second',
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: false,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: {
text: { style: { text: '生产设备' } },
attachment: [
{
style: { text: '+12.23%', color: 'green' },
},
{
style: { text: '12.23万', color: 'green' },
},
]
},
children: [],
}
]
},
]
},
// 第二课子树
{
/** 一级节点 */
type: 'root',
/** 优先级 */
priority: 1,
/** 是否选中 */
// selected: false,
/** 水印 */
watermark: '中游',
/** 是否折叠起来 */
collapsed: false,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
/** 渲染配置 */
render: {
text: { style: { text: '半导体生产' } },
attachment: [
{
style: { text: '+12.23%', color: 'red' },
},
{
style: { text: '+12.23万', color: 'red' },
},
]
},
/** 子节点 */
children: [
{
/** 折叠展开按钮 */
type: 'group',
/** 是否折叠起来 */
collapsed: false,
render: {
labelText: { style: { text: '2' } },
},
children: [
{
/** 二级节点 */
type: 'second',
/** 是否选中 */
// selected: false,
/** 是否折 叠起来 */
collapsed: false,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: {
text: { style: { text: '半导体材料' } },
attachment: [
{
style: { text: '+12.23%', color: 'green' },
},
{
style: { text: '12.23万', color: 'green' },
},
]
},
children: [
{
/** 折叠展开按钮 */
type: 'group',
/** 是否折叠起来 */
collapsed: true,
render: {
labelText: { style: { text: '2' } },
},
children: [
{
/** 三级节点 */
type: 'third',
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: true,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: {
text: { style: { text: '半导体封装' } },
attachment: [
{
style: { text: '+12.23%', color: 'green' },
},
{
style: { text: '12.23万', color: 'green' },
},
]
},
children: [
]
},
{
/** 三级节点 */
type: 'third',
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: true,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: {
text: { style: { text: '半导体封装材料' } },
attachment: [
{
style: { text: '+12.23%', color: 'green' },
},
{
style: { text: '12.23万', color: 'green' },
},
]
},
children: [
]
},
{
/** 三级节点 */
type: 'third',
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: true,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: {
text: { style: { text: '半导体测试材料' } },
attachment: [
{
style: { text: '+12.23%', color: 'green' },
},
{
style: { text: '12.23万', color: 'green' },
},
]
},
children: [
{
/** 折叠展开按钮 */
type: 'group',
/** 是否折叠起来 */
collapsed: true,
render: {
labelText: { style: { text: '4' } },
},
children: [
/** 四级节点 */
{
type: 'fourth',
/** 是否折叠起来 */
collapsed: true,
render: [
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
}
]
},
]
}
]
},
]
}
]
},
{
/** 二级节点 */
type: 'second',
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: false,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: {
text: { style: { text: '生产设备什么啊' } },
attachment: [
{
style: { text: '+12.23%', color: 'green' },
},
{
style: { text: '12.23万', color: 'green' },
},
]
},
children: [
{
/** 折叠展开按钮 */
type: 'group',
/** 是否折叠起来 */
collapsed: true,
render: {
labelText: { style: { text: '2' } },
},
children: [
{
/** 三级节点 */
type: 'third',
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: true,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: {
text: { style: { text: '半导体封装材料' } },
attachment: [
{
style: { text: '+12.23%', color: 'green' },
},
{
style: { text: '12.23万', color: 'green' },
},
]
},
children: [
{
/** 折叠展开按钮 */
type: 'group',
/** 是否折叠起来 */
collapsed: true,
render: {
labelText: { style: { text: '4' } },
},
children: [
/** 四级节点 */
{
type: 'fourth',
/** 是否折叠起来 */
collapsed: true,
render: [
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
},
{
text: { style: { text: 'TCL科技' } },
attachment: [
{ style: { text: '+12.23%', color: 'red' } }
],
logo: 'http://u.thsi.cn/imgsrc/level/28d8ac8123d8b73930b4f13d2083dfcc.png',
}
]
},
]
}
]
},
]
}
],
},
{
/** 二级节点 */
type: 'second',
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: false,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
render: {
text: { style: { text: '生产设备' } },
attachment: [
{
style: { text: '+12.23%', color: 'green' },
},
{
style: { text: '12.23万', color: 'green' },
},
]
},
children: [],
}
]
},
]
},
// 第三课子树
{
/** 一级节点 */
type: 'root',
/** 优先级 */
priority: 2,
/** 是否选中 */
// selected: false,
/** 是否折叠起来 */
collapsed: false,
/** 水印 */
watermark: '下游',
/** 是否折叠起来 */
//collapsed: false,
/** 背景颜色 */
backgroundColor: ['rgba(7,171,75,0.1)', 'rgba(7,171,75,0.6)'],
/** 渲染配置 */
render: {
text: { style: { text: '半导体生产' } },
attachment: [
{
style: { text: '+12.23%', color: 'red' },
},
{
style: { text: '+12.23万', color: 'red' },
},
]
},
/** 子节点 */
children: [
]
}
]
}
series.dvNodeRender
提示
节点内容的绘制由用户自定义，createEl 可以绘制除了类型为 path 外的所有图形（包括 group），通过传入的 type 类型返回对应的图形，其他属性通过 attr 方法赋值，可以参考ZRender 文档。并且 x、y 的定位是以节点自身为参照的。
注意
node.depth从 2 开始，node.depth=1时为假节点，不参与渲染。
-
类型
Group- 回调函数
(arg: {
// 节点对应的原始数据
originNodeData?: RelationshipDiagramSeriesNodeItemOption;
// 绘制图形的方法
createEl?: (elOption: { type: string }) => Path<PathProps>;
group?: graphic.Group;
// 绘制类型为Path图形的方法
createSymbol?: (
// path路径，可传值可以参考ZRender
symbolType: string,
// x坐标
x: number,
// y坐标
y: number,
// 宽
w: number,
// 高
h: number,
// 颜色
color?: ZRColor,
// 保持比例
keepAspect?: boolean
) => ECSymbol;
// 节点对应的结构数据
node?: RelationTreeNode;
}) => graphic.Group;
绘制节点
series.dvNodeGap
提示
节点间水平方向上的距离可以自定义，每个节点的 x 方向距离由spaceArray和widthArray组成，比如第一个节点的 x 位置为x=spaceArray[0]+widthArray[0]。
注意
node.depth从 2 开始，node.depth=1时为假节点，不参与渲染。
注意
dvNodeGap涉及到节点 x 方向的定位，建议先设置好，因为线的定位会用到节点间 x 的计算。
-
类型
-
void -
回调函数
(arg: {
originNodeData?: RelationshipDiagramSeriesNodeItemOption,
node?: RelationTreeNode,
// 节点间的间距
spaceArray?: number[],
// 节点自身的宽度
widthArray?: number[]
}) => void; -
设置节点间距
series.dvLineRender
提示
节点内容的绘制由用户自定义，createEl 可以绘制除了类型为 path 外的所有图形（包括 group），通过传入的 type 类型返回对应的图形，其他属性通过 attr 方法赋值，可以参考ZRender 文档。并且 x、y 的定位是以节点自身为参照的。
注意
node.depth从 2 开始，node.depth=1时为假节点，不参与渲染。
-
类型
-
Group -
回调函数
(arg: {
originNodeData?: RelationshipDiagramSeriesNodeItemOption;
createEl?: (elOption: { type: string }) => Path<PathProps>;
group?: graphic.Group;
node?: RelationTreeNode;
}) => graphic.Group; -
绘制连接线
series.dvVerticalSpacingBetweenNode
- 类型
number[]
每一级节点竖直方向上的间距
series.dvBackground
提示
padding的顺序为上、右、下、左，需要注意的是，上、左的偏移是将内部树图的 x、y 坐标进行偏移，而右、下则是将背景的长宽进行增减（为了保证内部树图的大小比例）
- 类型
dvBackground: {
// 是否显示
show?: boolean;
// 背景颜色
color?: string[];
// 内边距
padding?: number[];
}
背景颜色及内边距
series.dvWatermark
-
类型
dvWatermark: {
// 是否显示
show?: boolean;
// 水印配置
watermark?: {
name?: string;
style?: {
text: string;
fill?: string;
fontFamily?: string;
fontSize?: number;
fontWeight?: number;
lineHeight?: number;
}
}[];
}
子树的水印
series.dvLevelLine
提示
分支线默认是隐藏的，若要显示，需要显示设置show=true， padding返回的数组分别表示上、右、下、左，需要注意的是，左、右表示的是相对于原始位置的 x 坐标偏移，上、下则会增加或减少线的长度。
注意
node.depth从 2 开始，node.depth=1时为假节点，不参与渲染。
-
类型
dvLevelLine: {
// 是否显示分支线
show: boolean;
// padding的回调函数
padding?: (arg: {
// 节点原始数据信息
originNodeData: RelationshipDiagramSeriesNodeItemOption;
// 节点结构信息
node: RelationTreeNode
}) => number[];
style: {
// 线长
lineWidth: number;
// 线的颜色
stroke: string;
// 线的虚线样式（参考CSS设置）
lineDash: number[];
}
}
分支线
series.dvAdapt
注意
首屏自适应需要开启 roam 功能（漫游组件，提供缩放、平移）。
提示
首屏自适应会自动根据长宽比的最大值去自适应。
- 类型
boolean
是否开启首屏自适应
series.dvToNextTreeLine
提示
导向线默认是隐藏的，若要显示，需要显示设置show=true
-
类型
dvToNextTreeLine: {
// 是否显示
show: boolean;
lineStyle?: {
// 线长
lineWidth?: number;
// 线颜色
stroke?: string;
};
arrowStyle?: {
// 线宽
lineWidth?: number;
// 填充色
fill?: string;
// 比例大小
scale: number;
}
}
一级节点的导向线
Action
这里的 API 需要通过 ECharts 实例的 dispatchAction 方法调用。
示例：
chart.getECharts().on("click", (params) => {
const node = seriesModel.trees[0].getNodeByDataIndex(params.dataIndex);
// 触发组节点的展开收起事件
if (params.data.type === "group") {
chart.getECharts().dispatchAction({
type: "dvRelationshipDiagramExpandAndCollapse",
seriesId: seriesModel.id,
dataIndexAndTreeIndex: new Map(
Object.entries({ [params.data.__treeIndex]: [params.dataIndex] })
),
clickType: "group",
});
}
});
dvRelationshipDiagramExpandAndCollapse
'dvRelationshipDiagramExpandAndCollapse'
触发展开单个或是多个的树节点。
chart.getECharts().dispatchAction({
type: "dvRelationshipDiagramExpandAndCollapse",
// 用 index 或 id 或 name 来指定系列。
// 可以使用数组指定多个系列。
seriesId?: string | string[],
dataIndexAndTreeIndex: {
[treeIndex: string]: string[]
},
clickType: string,
});
由于事件支持单个或多个树节点，treeIndex 的属性名称应与 seriesIndex 相同，属性接收数组形式对象，长度为 1 时表示单个节点的展开收起。
dvRelationshipDiagramChangeState
提示
dataIndex确定具体单个节点，key表示要修改的节点的属性，value表示要改变的节点的属性的值。由于 在配置项dvNodeRender的回调函数中提供了每个节点的对象，因此用户可以自己对节点添加想要的属性，dvRelationshipDiagramChangeState事件修改的就是定义dvNodeRender时用户添加的自定义属性。
'dvRelationshipDiagramChangeState'
单节点的状态改变
chart.getECharts().dispatchAction({
type: "dvRelationshipDiagramChangeState",
seriesId: string | string[],
dataIndex: string,
key: string,
value: any,
});
dvRelationshipDiagramChangeAllState
提示
key表示要修改的所有节点的属性（如果此属性存在）,由于在配置项dvNodeRender的回调函数中提供了每个节点的对象，因此用户可以自己对节点添加想要的属性,dvRelationshipDiagramChangeAllState事件修改的就是定义dvNodeRender时用户添加的自定义属性。
注意
当前dvRelationshipDiagramChangeAllState事件只支持属性值为boolean类型，也就是说，通过dvRelationshipDiagramChangeAllState触发的key属性只会对自身做取反操作。
'dvRelationshipDiagramChangeAllState'
全部节点的状态改变
chart.getECharts().dispatchAction({
type: "dvRelationshipDiagramChangeAllState",
seriesId: string | string[],
key: string,
clickType: string,
});
事件
自定义的事件。其中 Event 事件对象类型定义为：
type RelationshipDiagramActionPayload = Payload & {
dataIndexAndTreeIndex?: Map<string, number[]>;
seriesIndex?: number;
seriesId?: number;
seriesName?: string;
clickType?: string;
nodeCollapsedInfo?: CollapsedInfo[];
key?: string | number;
value?: string | boolean;
dataIndex?: number;
};
export type CustomEvent = {
type: 'dvafterrender',
payload: RelationshipDiagramActionPayload
};
dvafterrender
注意
dvafterrender监听的时机在首屏渲染之前，若是要监听首屏渲染之后可以配合视图层的__initRendered属性。
'dvafterrender'
监听渲染完成后的事件
chart.on('dv:afterinit', () => {
chart.getECharts().on('dvafterrender', params => {
console.log('params: ', params);
});
});