echarts之简单的入门——【一】做个带时间轴的柱状统计图
百度Echarts
官网首页 http://echarts.baidu.com/
配置项手册 http://echarts.baidu.com/option.html#title
GL配置项手册 http://echarts.baidu.com/option-gl.html#globe
EchartsAPI手册 http://echarts.baidu.com/api.html#echarts
官方实例 http://echarts.baidu.com/examples/
五分钟上手echarts
http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
选择实例
我一般直接从官方实例中选择相符自己需要的直接改动,毕竟不是前端,好吧,主要是自己懒~
不是说做柱状图,一定要从柱状图中选择的,可以从任意实例中选择基本符合自己的然后修改即可
修改实例
时间轴
dataZoom: [{
startValue: '2014-06-01'
}, {
type: 'inside'
}],
改为柱状图
修改type类型然后运行即可看到对应效果
series: {
name: 'Beijing AQI',
type: 'line', //line为折线图 bar为柱状图
data: data.map(function (item) {
return item[1];
}),
数据格式
上面基本改完,图表满足了我们的需求,但是数据不是我们的啊,我们要看下他的数据格式是怎样的~
在编辑区域我们可以很明显的看到数据为json类型,接下来我们需要查看的是json是数据还是对象
最好新开一个窗口,因为在修改的窗口刷新过之后我们更改的样式就会被还原~
鼠标右击--->检查--->network--->XHR
看到我们需要的数据,可以双击新窗口打开也可以直接单击然后查看Response(原本的)或者Preview(格式化的)
得到json的数据格式如下
[["2000-06-05",116],["2000-06-06",129],["2000-06-07",135]
只要我们把我们的数据格式化它需要的即可
比如我想知道每天注册的人数
只要获取到每天开始和结束的时间戳,然后统计在这个时间戳范围内注册的人数即可
效果如下
echarts之简单的入门——【一】做个带时间轴的柱状统计图的更多相关文章
- echarts之简单的入门——【二】再增加一个柱状图和图例组件
echarts之简单的入门——[一]做个带时间轴的柱状统计图 现在需求说,我需要知道日答题总次数和活跃人数,那么我们如何在上面的图表中增加一个柱状图呢? 如果你看过简单入门中的配置项手册中series ...
- Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题
今天在使用Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题: 数据都拿到了,放到Json数组都是完整的, 展现是时候 如下图:
- echarts中视觉映射器(visualMap)与时间轴(timeline)混用的实现方法
1.简述 echarts中的 timeline 组件,提供了在多个 ECharts option 间进行切换.播放等操作的功能. 与其他组件些不同,它需要操作『多个option』. 所以除了基准的ba ...
- echarts使用结合时间轴timeline动态刷新案例
1.echarts简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- Python简单爬虫入门三
我们继续研究BeautifulSoup分类打印输出 Python简单爬虫入门一 Python简单爬虫入门二 前两部主要讲述我们如何用BeautifulSoup怎去抓取网页信息以及获取相应的图片标题等信 ...
- DirectShow 最简单的入门 -- 播放一段视频
#include <dshow.h> #pragma comment(lib,"strmbase.lib") #pragma comment(lib,"qua ...
- C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件(Form Controls) C#串口通信程序
C#中缓存的使用 缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可: <%@ Outp ...
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
- scrapy爬虫简单项目入门练习
[写在开头] scrapy环境配置配置好了之后,开始着手简单项目入门练习.关于环境配置见上一篇博客https://www.cnblogs.com/ljxh/p/11235079.html. [正文部分 ...
随机推荐
- 为什么建议php字符串使用单引号而不是双引号
不少php提升效率的tip,都有提到字符串使用单引号,这是为什么呢? 因为在单引号中,php直接认为它里头包含的就是个字符串.而双引号时,php会检测里头是否包含变量.这样如果是纯粹的字符串的话,双引 ...
- CF1097D Makoto and a Blackboard 积性函数、概率期望、DP
传送门 比赛秒写完ABC结果不会D--最后C还fst了qwq 首先可以想到一个约数个数\(^2\)乘上\(K\)的暴力DP,但是显然会被卡 在\(10^{15}\)范围内因数最多的数是\(978217 ...
- Nowcoder 牛客练习赛23
Preface 终于知道YKH他们为什么那么喜欢打牛客网了原来可以抽衣服 那天晚上有空就也去玩了下,刷了一波水TM的YKH就抽到了,我当然是没有了 题目偏水,好像都是1A的.才打了一个半小时,回家就直 ...
- 51Nod 1815 调查任务
发现绍一的人很喜欢做51nod,不得不说这还是一个很全能的良心OJ 但是做的这道题就一点都不良心了,简直是毒瘤,调了一早上 首先我们考虑让一条路径的\(a_x\ mod\ a_y\)的值最大,我们简单 ...
- 一文让你完全弄懂Stegosaurus
国内关于 Stegosaurus 的介绍少之又少,一般只是单纯的工具使用的讲解之类的,并且本人在学习过程中也是遇到了很多的问题,基于此种情况下写下此文,也是为我逝去的青春时光留个念想吧~ Stegos ...
- Linux下部署Samba服务环境的操作记录
关于Linux和Windows系统之间的文件传输,很多人选择使用FTP,相对较安全,但是有时还是会出现一些问题,比如上传文件时,文件名莫名出现乱码,文件大小改变等问题.相比较来说,使用Samba作为文 ...
- Python-元组-10
元祖 Why:对于容器型数据类型list,无论谁都可以对其增删改查,那么有一些重要的数据放在list中是不安全的,所以需要一种容器类的数据类型存放重要的数据,创建之初只能查看而不能增删改,这种数据类型 ...
- 点评qq浏览器
1.内核. qq浏览器用的是是IE8的内核,而且是只有IE内核,所以,在速度上没办法跟那些webkit内核做对比了,不过也没有太慢,在沈航的网速下,打开网页的速度也还是勉强可以接受的. ...
- 基于SSH框架的考勤管理系统的设计与实现
基于SSH框架的考勤管理系统的设计与实现
- a simple example for spring AOP
/** * Created by Administrator on 2015/11/25. * a interface */public interface ArithmeticCalculator{ ...