option = {
title: {
text: 'Treemap 示例'
},
series: [
{
name: 'Treemap',
type: 'treemap',
data: [
// 数据项...
],
levels: [
// 层级配置...
],
label: {
show: true, // 是否显示标签
formatter: '{b}', // 标签的显示格式,支持格式化字符串
emphasis: {
show: true, // 强调状态下是否显示标签
textStyle: {
fontSize: 16,
fontWeight: 'bold'
}
}
},
itemStyle: {
borderColor: '#333',
borderWidth: 1,
gapWidth: 2
},
emphasis: {
itemStyle: {
borderColor: 'red',
borderWidth: 3
}
},
tooltip: {
show: true,
formatter: function (params) {
return 'Tooltip: ' + params.name;
}
},
// 鼠标点击事件
emphasis: {
focus: 'ancestor', // 强调状态下的焦点设置,可选值有 'ancestor'、'descendant'、'self'、'none'
blur: 'ancestor' // 强调状态下的模糊设置,可选值有 'ancestor'、'descendant'、'self'、'none'
},
// 鼠标点击事件
silent: false, // 是否阻止默认事件行为,设为 true 则阻止,默认为 false
drillDownIcon: '▶', // 用于表示可下钻的图标
drillUpIcon: '◀' // 用于表示可上升的图标
}
]
};
上述示例中的关键配置包括:
- label: 用于配置标签的显示和样式,包括是否显示、显示格式、强调状态下的样式等。
- itemStyle: 用于配置图形的样式,包括边框颜色、宽度、间隔等。
- emphasis: 强调状态的配置,可以设置图形和标签在强调状态下的样式。
- tooltip: 用于配置提示框的显示和内容,包括是否显示、内容格式等。
- emphasis.focus 和 emphasis.blur: 配置点击时的焦点和模糊设置。
- silent: 是否阻止默认事件行为,设为 true 则阻止,默认为 false。
- drillDownIcon 和 drillUpIcon: 用于表示可下钻和可上升的图标。
通过这些配置,您可以实现对 Treemap 图的鼠标事件进行更加灵活的控制。
转载请注明出处:http://www.zyzy.cn/article/detail/5419/ECharts