本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization矩形树图是一种常见的表达层级数据的可视化形式。它主要用面积的方式来表示数据的权重关系，矩形块面积越大，其权重在整体中占比也越大。
在ECharts中绘制矩形树图，需要将series中的type设置为"treemap"，绘制矩形树图的代码主要分为两部分：数据（树图的数据的嵌套结构与之前介绍的旭日图、树图类似）和图表样式。
例如，通过下述代码就可以生成一个简单的矩形树图：
1 // 定义数据结构
2 var data = [{
3 name:"欧洲足球俱乐部",
4 children:[{
5 name:"西甲",
6 value:13,
7 children:[{
8 name:"皇家马德里",
9 value:5
10 },{
11 name:"巴塞罗那",
12 value:5
13 },{
14 name:"比利亚雷亚尔",
15 value:3,
16 }]
17 },{
18 name:"意甲",
19 value:8,
20 children:[{
21 name:"AC米兰",
22 value:5
23 },{
24 name:"罗马",
25 value:3
26 }]
27 }]
28 },{
29 name:"南美足球俱乐部",
30 children:[{
31 name:"巴甲",
32 value:8,
33 children:[{
34 name:"弗拉门戈",
35 value:2
36 },{
37 name:"米内罗竞技",
38 value:3
39 },{
40 name:"圣保罗",
41 value:3,
42 }]
43 },{
44 name:"阿超",
45 value:6,
46 children:[{
47 name:"河床",
48 value:3
49 },{
50 name:"博卡青年",
51 value:3
52 }]
53 }]
54 }]
55
56 // 设置图表的参数
57 var option = {
58 title:{
59 text:"矩形树图"
60 },
61
62 tooltip:{},
63
64 // 数据系列
65 series: [{
66 type: "treemap",
67 data:data,
68 }],
69 };
可视化结果如下图所示：
矩形树图样式设置：
以下是一些常用的矩形树图样式设置参数：
| 参数 |
描述 |
squareRatio |
期望矩形长宽比率。布局计算时会尽量向这个比率靠近。 默认为黄金比： |
leafDepth |
设置了
例如， |
label |
每个矩形中，文本标签的样式 |
itemStyle |
矩形框的样式 |
upperLabel |
用于显示矩形的父节点的标签 |
代码如下所示：
1 // 定义数据结构
2 var data = [{
3 name:"欧洲足球俱乐部",
4 children:[{
5 name:"西甲",
6 value:13,
7 children:[{
8 name:"皇家马德里",
9 value:5
10 },{
11 name:"巴塞罗那",
12 value:5
13 },{
14 name:"比利亚雷亚尔",
15 value:3,
16 }]
17 },{
18 name:"意甲",
19 value:8,
20 children:[{
21 name:"AC米兰",
22 value:5
23 },{
24 name:"罗马",
25 value:3
26 }]
27 }]
28 },{
29 name:"南美足球俱乐部",
30 children:[{
31 name:"巴甲",
32 value:8,
33 children:[{
34 name:"弗拉门戈",
35 value:2
36 },{
37 name:"米内罗竞技",
38 value:3
39 },{
40 name:"圣保罗",
41 value:3,
42 }]
43 },{
44 name:"阿超",
45 value:6,
46 children:[{
47 name:"河床",
48 value:3
49 },{
50 name:"博卡青年",
51 value:3
52 }]
53 }]
54 }]
55
56 // 设置图表的参数
57 var option = {
58 title:{
59 text:"矩形树图"
60 },
61
62 tooltip:{},
63
64 // 数据系列
65 series: [{
66 type: "treemap",
67 data:data,
68 squareRatio:0.5 * (1 + Math.sqrt(5)), // 期望矩形长宽比率。布局计算时会尽量向这个比率靠近,默认为黄金比
69 leafDepth:3, // 表示 展示几层 ，层次更深的节点则被隐藏起来。点击则可下钻看到层次更深的节点
70 label:{
71 color:"#fff", // 文本标签——文字的颜色
72 fontWeight:"bold", // 文本标签——文字字体的粗细
73 fontSize:14, // 文本标签——文字的字体大小
74 formatter:"{b}n{c}" // 文本标签——标签内容格式器
75 },
76 itemStyle:{
77 gapwidth:1, // 矩形内部子矩形（子节点）的间隔距离
78 },
79 upperLabel:{
80 show:true, // 显示矩形的父节点的标签
81 color:"yellow", // 文字的颜色
82 borderColor:"#fff", // 文字块边框颜色
83 borderWidth:1, // 文字块边框宽度
84 height:30, // 父父节点标签区的高度
85 backgroundColor:"rgb(85,85,85)", // 文字块背景色
86 },
87 }],
88 };
可视化结果如下图所示：
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
