数据可视化-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
适合场景:
- 适合二维的大数据集,多个数据之间有一定的趋势变化
- 适合多个二维数据集的比较,趋势对比。
有时,线图和柱状图一起混合使用,目前在系统里面还是不推荐这种做法。线图和柱状图单个表现的意义不一致。
特点:通过数据之间的比较,更容易辨别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
- Golang语言版ssh口令破解工具 --必须亲自敲代码,否则看了白看
- MySQL中insert语句没有响应的问题分析(r11笔记第21天)
- MySQL级联复制中的数据同步(第二篇)(r11笔记第21天)
- Golang语言 - 以任意类型的slices作为输入参数
- HDUOJ-------The Hardest Problem Ever
- Golang语言--【社区推荐阅读】 fmt用法
- 一个SQL性能问题的优化探索(一)(r11笔记第33天)
- HDUOJ-----1074 Integer Inquiry
- PXE无人值守安装Linux
- HDUOJ-----Robot Motion
- 对康托展开的一些心得...
- MySQL 5.7 General Tablespace学习(r11笔记第34天)
- Veeam Backup & Replication(一):安装及配置
- HDUOJ-----Computer Transformation
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法