因为要统计数据进行图表展示，所以就简单学习了 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. hive中使用union出现异常数据

    select * from tbl where id=2 union select * from tbl where id =1 如果hive使用union这么查询的时候,我们会发现数据变乱了. 解决 ...

  2. nginx+uwsgi启动Django项目

    1.安装项目环境 系统环境:ubuntu16.04 python环境:python3.5.2 Django版本:django1.11.7 nginx环境:nginx_1.10.3 虚拟环境:virtu ...

  3. logging 日志

    1. 四步: import logging #初始化 logger = logging.getLogger("log_name") #设置级别 logger.setLevel(lo ...

  4. TF：TF下CNN实现mnist数据集预测 96%采用placeholder用法+2层C及其max_pool法+隐藏层dropout法+输出层softmax法+目标函数cross_entropy法+AdamOptimizer算法

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data # number 1 to 10 ...

  5. HDU 1796 How many integers can you find 【容斥】

    <题目链接> 题目大意: 给你m个数,其中可能含有0,问有多少小于n的正数能整除这个m个数中的某一个. 解题分析: 容斥水题,直接对这m个数(除0以外)及其组合的倍数在[1,n)中的个数即 ...

  6. shell几种字符串加密解密的方法

    第一种:[ Python 与 Bash Shell 的结合 ]这个命令会让你输入一个字符串,然后会再输出一串加密了的数字. 加密代码[照直输入]:python -c 'print reduce(lam ...

  7. BZOJ.2000.[HNOI2010]stone取石头游戏(博弈)

    BZOJ 洛谷 低估这道神题了_(:з」∠)_ MilkyWay好狠啊(小声) \(Description\) 有一些数字,被分成若干双端队列(从两边都可以取)和最多两个栈(只能从某一边一个一个取)的 ...

  8. Vue常用V-标签

    1.v-once: 只绑定一次 2.v-html <div v-html='name'></div> //会渲染标签 var app = new Vue({ el:'#app' ...

  9. Django——邮件发送

    在settings中添加关键信息 EMAIL_HOST = 'smtp.qq.com' #不同的邮箱有不同的发件地址(收件地址) EMAIL_PORT = 25 #smtp端口号 EMAIL_HOST ...

  10. Jupyter Notebook 介绍 安装和使用技巧

    Jupyter Notebook介绍.安装及使用教程 原文链接:https://www.jianshu.com/p/91365f343585 目录一.什么是Jupyter Notebook? 1. 简 ...