option = {
title: {
text: 'Treemap 示例'
},
series: [
{
name: 'Treemap',
type: 'treemap',
data: [
// 数据项...
],
leafDepth: 2, // 叶子节点的层级深度
roam: true, // 是否开启漫游
label: {
show: true, // 是否显示标签
position: 'inside' // 标签的位置,可选值为 'top', 'inside', 'bottom', 'left', 'right'
},
breadcrumb: {
show: true, // 是否显示面包屑
emphasis: {
textStyle: {
fontSize: 18
}
}
},
nodeClick: 'zoomToNode', // 点击节点时的行为,可选值为 'zoomToNode', 'link',默认为 'zoomToNode'
levels: [ // 层级配置
{
color: ['#fff', '#aaa'], // 颜色范围
colorMappingBy: 'value', // 颜色映射方式,可选值为 'value' 或 'index'
itemStyle: {
borderWidth: 1, // 边框宽度
borderColor: '#333' // 边框颜色
},
emphasis: {
itemStyle: {
color: 'yellow' // 强调时的颜色
}
}
},
// 更多层级配置...
]
}
]
};
在这个例子中:
- leafDepth: 控制叶子节点的层级深度。
- roam: 是否开启漫游,允许用户拖拽和缩放来浏览数据。
- label: 标签配置,用于设置标签的显示与位置等。
- breadcrumb: 面包屑配置,用于设置是否显示面包屑导航。
- nodeClick: 点击节点时的行为,可选值为 'zoomToNode' 或 'link'。
- levels: 层级配置,可以设置不同层级的样式、颜色等。
这只是一些常见的属性设置,您可以根据需要调整其他配置项,以满足您的具体需求。
转载请注明出处:http://www.zyzy.cn/article/detail/5417/ECharts