因为要统计数据进行图表展示，所以就简单学习了 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. CodeSignal 刷题 —— almostIncreasingSequence

    Given a sequence of integers as an array, determine whether it is possible to obtain a strictly incr ...

  2. Linux下java开发环境配置总结

    1 安装JDK,卸载以前的jdk,安装jdk1.8 : 参考:http://www.jb51.net/os/RedHat/73016.html 需要注意配置环境变量中的路径要和当前安装的jdk路径一致 ...

  3. scrapy meta不用pipe用命令-o

    1. spider代码: # -*- coding: utf-8 -*- import scrapy from tencent1.items import Tencent1Item import js ...

  4. POJ 2352 Stars【树状数组】

    <题目链接> 题目大意: 题目给出n个点,这些点按照y坐标的升序,若y相同,则按照x的升序顺序输入,问,在这些点中,左下角的点的数量分别在0~n-1的点分别有多少个,写出它们的对应点数. ...

  5. 牛客练习赛 26 B题 烟花【DP】(经典)

    <题目链接> 题目描述 小a有个烟花,每个烟花代表着互不相同的颜色,对于第个烟花,它有的概率点燃,现在小a要去点燃它们,他想知道产生颜色的期望个数 及 产生恰好产生种颜色的概率 输入描述: ...

  6. js算法初窥07（算法复杂度）

    算法复杂度是我们来衡量一个算法执行效率的一个度量标准,算法复杂度通常主要有时间复杂度和空间复杂度两种.时间复杂度就是指算法代码在运行最终得到我们想要的结果时所消耗的时间,而空间复杂度则是指算法中用来存 ...

  7. 一个完整的Java程序示例

    (1) 第一个程序HelloWorld: package mypack; //相当于一个目录 public class HelloWorld{ public static void main(Stri ...

  8. Jmeter测试http+JSON配置相关

    1.添加HTTP信息头管理器 Content-Type application/json Accept application/json 2.添加http请求(方法.编码.路径.body)

  9. web前端知识大纲：系列二 css篇

    web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选 ...

  10. lnmp更改网站文件和MySQL数据库的存放目录

    购买阿里云服务器,一般建议买一个数据盘,也就是系统盘和数据盘分开,将网站文件和Mysql数据库等都保存在数据盘,即使系统盘或者环境出问题,重置系统盘和重新配置环境,都不会影响数据盘的东西. 配置好LN ...