数据可视化-EChart2.0使用总结1

图表是企业级Web开发必不可少的一个功能点。也是“数据可视化的一个具体呈现”。今天看到阮一峰翻译的“数据可视化:基本图表”一文,同时梳理一下公司现在项目使用的EChart2.0类库。阮一峰的文章同时也适合产品经理和设计师看,因为很多产品经理和设计师其实不能完全区分哪些地方需要哪些图表去呈现具体的数据。

1.柱状图-Bar Chart

适合场景:二维数据集(每个数据点包括两个值x和y),但只有一个维度需要比较。一般是Y轴。柱状图利用柱子的高度,反映数据的差异。

特点:肉眼对高度差异特别敏感,辨别效果非常好。

Demo截图:

demo地址:http://echarts.baidu.com/doc/example/bar1.html

说明:百度EChart申请的专利有一个是可拖动计算。但是这个专利对很多企业级场景的应用是一个鸡肋,一点用都没有。所以大家可以把option里面的calculable 值设置为false

2.折线图-Line Chart

适合场景:

  1. 适合二维的大数据集,多个数据之间有一定的趋势变化
  2. 适合多个二维数据集的比较,趋势对比。

有时,线图和柱状图一起混合使用,目前在系统里面还是不推荐这种做法。线图和柱状图单个表现的意义不一致。

特点:通过数据之间的比较,更容易辨别2组数据之间的趋势变化

Demo截图:

demo地址:http://echarts.baidu.com/doc/example/line1.html

说明:无

3.饼图-Pie Chart

适合场景:反映某个部分占整体的比重。

特点:阮一峰的翻译中说,饼图是一种应该避免使用的图表,因为人的肉眼对扇形的面积大小不敏感。特别是数据都相近的情况下。

demo截图:

demo地址:http://echarts.baidu.com/doc/example/pie1.html

说明:目前EChart不支持对饼图点击之后绑定相关事件,实际项目中有这个需求,比如:点击了某一个扇形区域,会弹出来。然后可以监听一些事件,弹出一个模态框。

比如下图的效果:

未完待续。后面会继续介绍EChart中的散点图、

参考网址:

1.数据可视化:基本图表http://www.ruanyifeng.com/blog/2014/11/basic-charts.html

2.EChart2.0官方网址:http://echarts.baidu.com/

3.Data Visualization with JavaScript:http://jsdatav.is/intro.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林浩威的专栏

使用机器学习算法打造一个简单的“微博指数”

写这篇文章的契机,是我在某天看完腾讯指数的推送后,突发奇想,想自己实现类似这样的一个东西,感觉蛮好玩的。然后就在上周末,利用了一些空余时间,写了一个简单的舆情监...

7174
来自专栏数据科学与人工智能

【机器学习】从零实现来理解机器学习算法

从零开始实现机器学习算法的好处 我推广了从零开始实现机器学习算法的观念。 我认为你可以学到很多关于算法是如何工作的。我也认为,作为一名开发者,它提供了一个学习用...

2189
来自专栏重庆的技术分享区

大数据与机器学习融合

我最近与柏林工业大学的学生进行了两次非常有趣的讨论,我了解了机器学习社区和大数据社区之间的鸿沟有多大。

4074
来自专栏企鹅号快讯

2017年与机器学习相关的10大Python开源库

作者|Alan Descoins 译者|薛命灯 编辑|Emily Pipenv Pipenv 最初是由 Kenneth Reitz 开发的一个业余项目,旨在将其...

20810
来自专栏软件开发 -- 分享 互助 成长

结构化分析和方法

结构化分析方法(SA)是一种面向数据流的需求分析方法,适用于分析大型数据处理系统,是一种简单、实用的方法。 基本思想是自顶向下逐层分解。分析结果有一套分层的数据...

2086
来自专栏生信技能树

芯片数据分析,so easy?

我最早接触的高通量数据就是RNA-seq,后来接触的也基本是高通量测序结果而不是芯片数据,因此我从来没有分析过一次芯片数据,而最近有一个学员在看生信技能树在腾讯...

2183
来自专栏腾讯移动品质中心TMQ的专栏

【Android场景化性能测试】UI流畅度篇

承接《Android场景化性能测试-方向与框架篇》,本篇详述UI流畅度的测试方法,重点在于获得流畅度SM数据之后,如何利用好。

8144
来自专栏大数据挖掘DT机器学习

【推荐】分析的前提—数据质量

数据质量(Data Quality)是数据分析结论有效性和准确性的基础也是最重要的前提和保障。数据质量保证(Data Quality Assurance...

3115
来自专栏AI科技大本营的专栏

整合PyTorch 0.4和Caffe 2,PyTorch 1.0能挑战TensorFlow吗?

【AI 科技大本营导读】5月2日,在加利福尼亚州举办的年度开发者 F8 大会上,Facebook 正式推出 PyTorch 1.0 。其实,早在 2017 年 ...

1763
来自专栏ios 技术积累

ios 百度地图设置BMKAnnotationView层级

产品有一个新需求,就是百度地图上显示的BMKAnnotationView,根据数值越大的放在最上层,原因是因为BMKAnnotationView很多并且有重叠的...

2884

扫码关注云+社区