前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >数据可视化-EChart2.0使用总结1

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

作者头像
八哥
发布2018-01-18 17:43:14
1.3K0
发布2018-01-18 17:43:14
举报
文章被收录于专栏:快乐八哥快乐八哥

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

1.柱状图-Bar Chart

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

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

Demo截图:

569929.png
569929.png

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

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

2.折线图-Line Chart

适合场景:

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

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

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

Demo截图:

800673.png
800673.png

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

说明:无

3.饼图-Pie Chart

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

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

demo截图:

147871.png
147871.png

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

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

比如下图的效果:

568602.png
568602.png

未完待续。后面会继续介绍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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2014-12-01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档