因为要统计数据进行图表展示，所以就简单学习了 ECharts JS 的应用。它是一个纯Javascript图库，它依赖于一个轻量级的Canvas库 ZRender，并提供直观、生动、交互式和高度可定制的数据可视化图表。

其官网地址为：http://echarts.baidu.com

教程文档地址：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

应用 ECharts JS，我制作了饼状图、线形图和柱状图，局部效果图如下：

HTML 源码：https://github.com/YeXiaoChao/yexiaochao.github.io/blob/master/show/pur_personal_stats.html

JS 源码：https://github.com/YeXiaoChao/yexiaochao.github.io/blob/master/show/js/pur_personal_stats.js

运行效果：http://yexiaochao.github.io/show/pur_personal_stats.html

ECharts JS应用：图表页面实现的更多相关文章

  1. echarts.js多图表数据展示使用小结

    echarts api文档: http://echarts.baidu.com/echarts2/doc/doc.html echarts demo示例: http://echarts.baidu.c ...

  2. echarts.js 做图表的插件

    <scripttype="text/javascript"src="{uiurl()}echarts/echarts.js"></script ...

  3. echarts.js（图表插件）2.0版会导致 ZeroClipboard.js（复制插件）失效，3.0版未知。

    解决方法:ZeroClipboard.js先于echarts.js加载.

  4. eCharts_基于eCharts开发的一个多图表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 图表工具--- ECharts.js学习（一） 简单入门

    ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...

  6. echarts.js中的图表大小自适应

    echarts的图表,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表.所以div容器的高度宽度必须指定为px,这设计不知道是为 ...

  7. 用echarts.js制作中国地图,点击对应的省市链接到指定页面

    这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本. ECharts 2 ...

  8. 纯css、js 的H5页面对接echarts

    做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...

  9. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

随机推荐

  1. ubuntu镜像下载地址

    下载地址: http://mirror.pnl.gov/releases/xenial/ Ubuntu 14.04.5 LTS (Trusty Tahr)http://releases.ubuntu. ...

  2. JVM笔记（虚拟机各内存的介绍）

    JVM笔记 java代码执行分为两部分:javac编译     java执行 代码并不是由上往下执行的,会经过编译期重排序进行优化,存在依赖关系的代码不会被重排序,保证了代码最终执行结果的正确性! j ...

  3. 给linux服务器添加一块新的磁盘

    http://www.linuxidc.com/Linux/2011-02/31868.htm 把硬盘装好后,我们用 fdisk -l 查看下: 图中可以看出 /dev/sdb 是500G,新加的硬盘 ...

  4. SpringMVC-1-（简介及HelloWord）

    首先我们来看一下servlet的处理请求的方式: 一:SpringMVC简介: 一)SpringMVC中的几个重要组件 1.DispatchServlet: 前端控制器,mvc模式中的c,是整个流程的 ...

  5. day 39 mycql 数据库之约束

    egon笔记: PRIMARY KEY (PK) 标识该字段为该表的主键,可以唯一的标识记录 UNIQUE KEY (UK) 标识该字段的值是唯一的 AUTO_INCREMENT 标识该字段的值自动增 ...

  6. Maze-hdu4035（DP求概率）

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=4035 题意: 有n个房间,由n-1条隧道连通起来,实际上就形成了一棵树, 从结点1出发,开始走,在每个结点 ...

  7. [ 高危 ]mt某站SQL注入

    RANK 24 金币    24 等价RMB  240 与上一漏洞同源所以只有24 数据包: GET /check?clientId=64915 HTTP/1.1 Host: xxx.meituan. ...

  8. XamarinAndroid组件教程RecylerView适配器设置动画示例

    XamarinAndroid组件教程RecylerView适配器设置动画示例 [示例1-3]下面将在RecylerView的子元素进行滚动时,使用适配器动画.具体的操作步骤如下: (1)创建一个名为R ...

  9. chrome插件的开发

    基本目录:icon,manifest,html,js. chrome插件的使用,运行,打包. chrome浏览器打开扩展,勾选开发者模式,点击加载没打包的扩展,选中目录,加载插件. 右上角出现插件图标 ...

  10. 移动端小坑：用户长按H5文字出现复制

    禁止复制方法:*{ -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */ -moz-user-select: none; -webkit-touch-callou ...