自定义系列：双向树图
v0.0.12+
图表底层基于 ECharts，所以参考 ECharts 官方配置项文档使用即可。
同时，在 ECharts 之上我们对其能力做了扩展，暴露了部分自定义配置项（均以 dv 前缀进行命名，以和 ECharts 配置项做以区分），在这里进行说明。
信息
双向树图是基于 ECharts 扩展开发的一种新类型的图表组件。
实时调试预览
自定义配置项
以下配置项只在 series.type: 'dvTwoWayTree' 时有效。
series.data
-
类型
TwoWayTreeSeriesNodeItemOptionexport interface TwoWayTreeSeriesNodeItemOption {
/**
* root 为根节点，normal 为普通节点，group 为用户交互的展开收起子树的节点
*
* 所以水平方向来看树的布局应该是
*
* normal <- group <- root -> group -> normal -> group -> normal
*/
type: 'root' | 'normal' | 'group';
/** 节点的位置（左子树，还是右子树） */
position?: 'left' | 'right';
/** 节点的名称，用来标识每一个节点 */
name?: string;
/** 节点的值，在 tooltip 中显示 */
value?: string;
/** 是否折叠起来（只对 type = 'group' 的节点有效） */
collapsed?: boolean;
/** v0.0.23+ 是否默认选中（只对 type = 'root' | 'normal' 的节点有效），且只在该节点的父节点默认展开时有效 */
selected?: boolean;
/** 渲染配置 */
render: RootNodeRenderOption | NormalNodeRenderOption | GroupNodeRenderOption;
/** 孩子节点 */
children?: TwoWayTreeSeriesNodeItemOption[];
}
// * 其中 render 字段根据 type 值不同而不同
// 当 type = 'root' | 'normal' 时
export type RootNodeRenderOption = {
/** 项目（节点）的渲染配置 */
item?: GroupProps & {
/** 子元素节点 */
children?: {
[name: string]: PathProps & { type?: string } & { states?: State };
/** 主文本元素 */
text?: TextProps & { states?: State };
/** 副文本元素 */
attachment?: TextProps & { states?: State };
};
};
/** 线（边）的渲染配置 */
line?: {
/** 子元素节点 */
children?: {
[name: string]: PathProps & { type?: string } & { states?: State };
line?: PathProps & { states?: State };
};
};
};
export type NormalNodeRenderOption = RootNodeRenderOption;
// 示例数据
{
type: 'root',
render: {
item: {
children: {
text: { style: { text: '锂离子电池' } },
attachment: { style: { text: '+1.02%' } }
}
}
},
}
// 当 type = 'group' 时
export type GroupNodeRenderOption = {
/** 项目（节点）的渲染配置 */
item?: GroupProps & {
/** 子元素节点 */
children?: {
[name: string]: PathProps & { type?: string } & { states?: State };
/** 标签文本元素 */
labelText?: TextProps & { states?: State };
};
};
/** 线（边）的渲染配置 */
line?: {
/** 子元素节点 */
children?: {
[name: string]: PathProps & { type?: string } & { states?: State };
line?: PathProps & { states?: State };
};
};
};
// 示例数据
{
type: 'group',
render: {
item: {
children: {
labelText: { style: { text: '第二种材料' } }
}
}
},
}
系列数据。
示例数据：
const seriesData = {
type: 'root',
render: {
item: {
children: {
text: { style: { text: '锂离子电池' } },
attachment: { style: { text: '+1.02%' } },
},
},
},
children: [
// 左侧树
{
type: 'group',
position: 'left',
render: {
item: {
children: {
labelText: { style: { text: '第二种材料' } },
},
},
},
children: [
{
type: 'normal',
render: {
item: {
children: {
text: { style: { text: '磷酸铁锂电池' } },
attachment: { style: { text: '+1.02%' } },
},
},
},
},
],
},
// 右侧树
{
type: 'group',
position: 'right',
render: {
item: {
children: {
labelText: { style: { text: '设备' } },
},
},
},
children: [
{
type: 'normal',
render: {
item: {
children: {
text: { style: { text: '铁锂电池' } },
attachment: { style: { text: '+1.02%' } },
},
},
},
},
],
},
],
};
series.initialTreeDepth
提示
优先级低于数据项中的 collapsed 配置。
- 类型
number - 默认值
1
初始展开的树深度（根节点的深度可认为为 0）。
series.selectedHighlightAncestor
- 类型
boolean - 默认值
true
选中节点时是否同时高亮关联的祖先节点。
series.clearSelectedAfterClickGroupNode
- 类型
boolean - 默认值
true
v0.2.2+
点击 group 类型节点之后清除选中状态。
series.viewCenterAfterClick
信息
值范围是 0 ~ 1，代表百分比。
-
类型
-
[number, number] -
回调函数 (v0.2.5+)
(arg: {
node: TreeNode; // v0.2.14+
data: TwoWayTreeSeriesNodeItemOption;
isExpand?: boolean;
isSelected?: boolean;
}) => [number, number];
-
-
默认值
[0.5, 0.5]
v0.2.2+
点击交互后聚焦的画布视区中心位置。（默认是 50% 和 50%，也就是画布中心位置）
series.scaleLimit
缩放限制。
series.scaleLimit.min
- 类型
number - 默认值
0.5
缩放的最小限制。
series.scaleLimit.max
- 类型
number - 默认值
2
缩放的最大限制。
series.left
- 类型
number | string - 默认值
'5%'
画布左侧边距。
series.top
- 类型
number | string - 默认值
'5%'
画布顶部边距。
series.right
- 类型
number | string - 默认值
'5%'
画布右侧边距。
series.bottom
- 类型
number | string - 默认值
'5%'
画布底部边距。
series.render
-
类型
RenderOptiontype RenderOption = {
root?: RootNodeRenderOption;
normal?: NormalNodeRenderOption;
group?: GroupNodeRenderOption;
};
默认的全局渲染配置。
Action
这里的 API 需要通过 ECharts 实例的 dispatchAction 方法调用。
示例：
chart.on('dv:afterinit', () => {
let flag = false;
document.querySelector('.js-btn').onclick = () => {
if (flag) {
chart
.getECharts()
.dispatchAction({ type: 'dvTwoWayTreeExpandToInitDepth' });
document.querySelector('.js-btn').textContent = '全览';
} else {
chart.getECharts().dispatchAction({ type: 'dvTwoWayTreeExpandAllNode' });
document.querySelector('.js-btn').textContent = '收起';
}
flag = !flag;
};
});
dvTwoWayTreeExpandAllNode
'dvTwoWayTreeExpandAllNode'
触发展开所有的树节点。（全部预览操作）
dispatchAction({
type: 'dvTwoWayTreeExpandAllNode',
// 用 index 或 id 或 name 来指定系列。
// 可以使用数组指定多个系列。
seriesIndex?: number | number[],
seriesId?: string | string[],
seriesName?: string | string[],
});
dvTwoWayTreeExpandToInitDepth
'dvTwoWayTreeExpandToInitDepth'
触发将视图恢复到初始的树展开深度状态。（收起恢复操作）
dispatchAction({
type: 'dvTwoWayTreeExpandToInitDepth',
// 用 index 或 id 或 name 来指定系列。
// 可以使用数组指定多个系列。
seriesIndex?: number | number[],
seriesId?: string | string[],
seriesName?: string | string[],
});
事件
自定义的事件。其中 Event 事件对象类型定义为：
export type CustomEvent = {
type: 'dvclick.twowaytreenodeitem';
node: TreeNode; // v0.2.14+
data?: TwoWayTreeSeriesNodeItemOption;
isExpand?: boolean;
selected?: boolean;
};
dvclick.twowaytreenodeitem
注意
由于实现上的差异，不要使用 click 事件。
'dvclick.twowaytreenodeitem'
监听点击树节点的事件。
chart.on('dv:afterinit', () => {
chart.getECharts().on('dvclick.twowaytreenodeitem', (event) => {
console.log(event);
});
});