因为要统计数据进行图表展示，所以就简单学习了 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. BZOJ2534 Uva10829L-gap字符串 字符串 SA ST表

    原文链接https://www.cnblogs.com/zhouzhendong/p/9240665.html 题目传送门 - BZOJ2534 题意 有一种形如 $uvu$ 形式的字符串,其中 $u ...

  2. MySQL查询本周、上周、本月、上个月份数据的sql脚本

    2018-11-13 查询今天的数据 select * from 表名 where to_days(时间字段名) = to_days(now()); 查询昨天的数据 SELECT * FROM 表名 ...

  3. js判断上传图片文件大小，尺寸，格式

    /** * 文件宽高 * @param eventId id * @param w 宽度 * @param h 高度 * @param callback 回调函数这里判断图片像素的方法是异步的,所以需 ...

  4. Linux下的计划任务at，batch，crontab

    0x00前言: 继上次的windows计划任务后,拓展研究下linux下的计划任务,能够执行计划任务有3个命令at,batch,crontab 所谓的计划任务就是定时启动某个程序,可以是一组shell ...

  5. ubantu16.04搭配新开发环境说明

    安装好ubantu系统后,往往需要搭配个人开发环境,梳理了一些常用的安装步骤: 1.安装node.js 更新ubuntu软件源 sudo apt-get update sudo apt-get ins ...

  6. C#相关FTP操作

    C# 相关 FTP(File Transfer Protocol) 操作 1.获取文件目录 UsePassive:需要设置为false. 使用被动模式,因为客户端防火墙的存在,所以为了确保数据可以正常 ...

  7. Java代码优化小结（三）

    (35)对资源的close()建议分开操作虽然有些麻烦,却能避免资源泄露.我们想,如果没有修改过的代码,万一XXX.close()抛异常了,那么就进入了catch块中了,YYY.close()不会执行 ...

  8. BZOJ3531[Sdoi2014]旅行——树链剖分+线段树

    题目描述 S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰.为了方便,我们 ...

  9. show full processlist

    mysql 显示哪些线程正在运行: show full processlist; 如果mysql 发生了锁表的情况,这个命令很容易知道是哪个表被什么操作锁住了

  10. eclipse中安装pydev插件出现duplicate location

    eclipse中安装pydev插件出现duplicate location,主要是因为之前已经填写了该地址并且已经加载了,具体的解决办法见下链接: http://jingyan.baidu.com/a ...