ECharts使用心得——矩阵树图

最新推荐文章于 2024-10-25 10:33:09 发布

转载

最新推荐文章于 2024-10-25 10:33:09 发布 · 3.7k 阅读

6 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/smoothLily/p/4476595.html

文章标签：

#javascript #ViewUI

本文介绍了如何使用ECharts实现矩形树图，详细讲解了实践步骤，包括引入ECharts，配置路径，动态加载图表以及自定义图表。ECharts的Treemap能直观展示层次结构，适合数据的可视化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 缘起

最近实验室 boss 让用矩形树图做一下研究数据的展示，囧，矩形树图是什么鬼。问了问师兄，说用 R 语言可以实现，让我去研究一下。

= =，那这周不是不用干别的了。

刚好最近在研究百度出的 ECharts ，搜了搜竟然有矩形树图的模块，真是感动啊眼泪都要出来了。立马研究了一下，结果还可以，能实现我要的效果。

就在博客里总结一下吧，希望对你有帮助。

2.1 用 ECharts 实现矩形树图（treemap）—— 知识普及

什么是矩形树图？

通常，我们使用缩进方式展现层次结构的层级，比如文件目录列表。在这种方式下，同时展示的文件与目录的数量是受到限制的，因此我们很难统筹地直观地对全局结构留下印象。

使此类结构更有效的可视化的方法已经有很多了，比较重要的一类就是树。矩形式树状结构图（Treemap）就是一种有效的实现层次结构可视化的图表结构，简称矩形树图。

在矩形树图中，每个节点都有名字和相应的大小。如果用矩形树图表示我们熟悉的文件目录列表，那么叶子节点的大小就能表示各个文件的体积，父节点就能表示文件夹的体积也就是它包含的文件体积之和。

通过矩形树图，我们便可以很清晰地知道整个文件的全局层级结构。

比如...

下图是一个矩形树图的图例，该图统计了A公司员工午饭吃了哪些水果以及吃水果的分布(对我就是这么无聊)，员工共 20 人，吃水果统计数据如下：

苹果：6
香蕉：4
猕猴桃：4
梨：2
橙子：2
橘子：1
西瓜：1

可以直观看出，喜欢吃苹果的人最多，喜欢吃香蕉的也不少。如果你愿意，还可以为不同的数据块设置对应的颜色，苹果：红，香蕉：黄，等等，更直观一点啦。

看更严肃的矩形树图实例戳这里~

2.2 用 ECharts 实现矩形树图（treemap） —— 实践

步骤一：引入 ECharts

首先我们需要在页面中为 ECharts 准备一个 dom 来绘制图表，还要引入 EChart.js 主文件，这个文件中包括所有 ECharts 实现的代码。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>