在 ECharts 中,您可以使用 series 组件的 treemap 类型配置 Treemap 图的属性。以下是一些常用的 Treemap 图属性设置示例:
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