数据可视化-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

这篇博客是通过有道云笔记写作的，然后分享出来，我直接复制到博客园。大家可以直接访问：http://note.youdao.com/share/?id=bfce0b658da2eea9d426dccc69ea1cd7&type=note