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