option = {
title: {
text: 'Treemap 示例'
},
series: [
{
name: 'Treemap',
type: 'treemap',
data: [
// 数据项...
],
levels: [
{
color: ['#99AABB', '#AACCDD'],
colorMappingBy: 'value',
itemStyle: {
borderWidth: 1,
borderColor: '#333',
gapWidth: 2 // 图形之间的间隔
},
label: {
show: true,
position: 'inside', // 标签的位置，可选值为 'top', 'inside', 'bottom', 'left', 'right'
fontSize: 12
}
},
{
color: ['#DDAABB', '#EEBBCC'],
colorMappingBy: 'index',
itemStyle: {
borderWidth: 2,
borderColor: '#555',
gapWidth: 4
},
label: {
show: true,
position: 'outside',
fontSize: 16
}
},
// 更多层级配置...
]
}
]
};
在这个例子中，levels 属性包含了两个层级的配置。每个层级对象可以设置以下属性：
- color: 颜色范围，表示该层级的颜色范围。
- colorMappingBy: 颜色映射方式，可选值为 'value' 或 'index'。
- itemStyle: 图形样式配置，包括边框宽度、颜色等。
- label: 标签配置，用于设置标签的显示与位置等。
您可以根据需要配置更多的层级，并根据具体需求调整各层级的样式。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5418/ECharts