ECharts使用心得——矩阵树图

1. 缘起


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

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

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

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

2.1 用 ECharts 实现矩形树图(treemap)—— 知识普及

什么是矩形树图?


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

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

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

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

比如...


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

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

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

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

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>

步骤二: 配置相对路径


在主文件引入后你将获得一个 AMD 环境,AMD 简单说来就是"异步模块定义"。它采用异步方式

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值