因为要统计数据进行图表展示，所以就简单学习了 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. PHP算法排序之快速排序、冒泡排序、选择排序、插入排序性能对比

    <?php //冒泡排序 //原理:从倒数第一个数开始,相邻的两个数比较,后面比前面的小,则交换位置,一直到比较第一个数之后则最小的会排在第一位,以此类推 function bubble_sor ...

  2. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第十三集之Redis的单机版搭建】

    (转载其他博客的安装步骤,截图是自己的) 1, 第一步:安装gcc编译环境 yum install gcc-c++ 第二步:把redis的源码上传到linux服务器. 第三步:解压缩. tar -zx ...

  3. 使用 Django-debug-toolbar 优化Query 提高代码效率

    一段程序执行效率慢,除了cpu计算耗时外,还有一个很重要的原因是SQL的Duplicated过多,使用Django-debug-toolbar能够快速找出哪些地方的SQL可以优化,提高程序执行效率 1 ...

  4. web发展阶段简介

     web1.0.web2.0和web3.0的区别前言: 其实并没有什么所谓的2.0.3.0,因为你没法准确的界定它是什么样的应用,也没法界定它是什么时候开始的,什么时候结束,它只是互联网本身发展的一种 ...

  5. Python class NameError name "xxx" is not defined

    Python class NameError name "xxx" is not defined 这是因为在 class 中调用了带双下划线 "__" 的函数对 ...

  6. gevent实现生产者消费者

    from gevent import monkey;monkey.patch_all()from gevent.queue import Queue #队列 gevent中的队列import geve ...

  7. js里面的判断最好做到完全控制

    <li class="item"> <div id="zcdz" name="zcdz" class="mini ...

  8. Java常用的九种排序方法及代码实现

    package com.algorithm.Demo; import java.util.ArrayList; import java.util.Arrays; import java.util.Li ...

  9. 项目部署相关命令（pm2）

    普通方式启动后台服务: nohup npm start & 关闭服务,需要找到进程号: lsof -i :3000 kill -9 进程号 通过pm2启动项目,可实现关闭自启动: 安装pm2: ...

  10. VirtualBox查看虚拟机IP地址

    在终端输入如下内容 ifconfig 结果如图所示 eth0 内容中 inet 后的地址10.0.2.15即为虚拟机IP地址,lo 中的 inet 后的地址时本地环回,用于测试网络