记录一下ECharts时间轴的使用，首先是照着官方的示例做一遍，在这里不要忘了引入timelineOption.js，后面介绍如何动态创建时间轴的记录数，即根据需求可伸缩显示有多少天或者年月等轴标记数。

官网demo：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5. <title>a</title>
  6. <style>
  7. body{background-color:#000000}
  8. </style>
  9. </head>
  10. <body>
  11. <div id="main" style="height:500px;width: 100%; margin-left: 0px;float: left;"></div>
  12. <!--    本地引入ECharts,'js/dist/'本地文件路径下 -->
  13. <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
  14. <script src="http://echarts.baidu.com/doc/example/timelineOption.js"></script>
  15. <script type="text/javascript">
  16. //        路径配置,'./js/dist'本地文件路径
  17. require.config({
  18. paths: {
  19. echarts: 'http://echarts.baidu.com/build/dist'
  20. }
  21. });
  22. require(
  23. [
  24. 'echarts',
  25. 'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
  26. 'echarts/chart/bar'
  27. ],
  28. function (ec) {
  29. var myChart = ec.init(document.getElementById('main'));
  30. option = {
  31. timeline:{
  32. data:[
  33. '2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01',
  34. '2007-01-01','2008-01-01','2009-01-01','2010-01-01','2011-01-01'
  35. ],
  36. label : {
  37. formatter : function(s) {
  38. return s.slice(0, 4);
  39. }
  40. },
  41. autoPlay : true,
  42. playInterval : 1000
  43. },
  44. options:[
  45. {
  46. title : {
  47. 'text':'2002全国宏观经济指标',
  48. 'subtext':'数据来自国家统计局'
  49. },
  50. tooltip : {'trigger':'axis'},
  51. legend : {
  52. x:'right',
  53. 'data':['GDP','金融','房地产','第一产业','第二产业','第三产业'],
  54. 'selected':{
  55. 'GDP':true,
  56. '金融':false,
  57. '房地产':true,
  58. '第一产业':false,
  59. '第二产业':false,
  60. '第三产业':false
  61. }
  62. },
  63. toolbox : {
  64. 'show':true,
  65. orient : 'vertical',
  66. x: 'right',
  67. y: 'center',
  68. 'feature':{
  69. 'mark':{'show':true},
  70. 'dataView':{'show':true,'readOnly':false},
  71. 'magicType':{'show':true,'type':['line','bar','stack','tiled']},
  72. 'restore':{'show':true},
  73. 'saveAsImage':{'show':true}
  74. }
  75. },
  76. calculable : true,
  77. grid : {'y':80,'y2':100},
  78. xAxis : [{
  79. 'type':'category',
  80. 'axisLabel':{'interval':0},
  81. 'data':[
  82. '北京','\n天津','河北','\n山西','内蒙古','\n辽宁','吉林','\n黑龙江',
  83. '上海','\n江苏','浙江','\n安徽','福建','\n江西','山东','\n河南',
  84. '湖北','\n湖南','广东','\n广西','海南','\n重庆','四川','\n贵州',
  85. '云南','\n西藏','陕西','\n甘肃','青海','\n宁夏','新疆'
  86. ]
  87. }],
  88. yAxis : [
  89. {
  90. 'type':'value',
  91. 'name':'GDP（亿元）',
  92. 'max':53500
  93. },
  94. {
  95. 'type':'value',
  96. 'name':'其他（亿元）'
  97. }
  98. ],
  99. series : [
  100. {
  101. 'name':'GDP',
  102. 'type':'bar',
  103. 'markLine':{
  104. symbol : ['arrow','none'],
  105. symbolSize : [4, 2],
  106. itemStyle : {
  107. normal: {
  108. lineStyle: {color:'orange'},
  109. barBorderColor:'orange',
  110. label:{
  111. position:'left',
  112. formatter:function(params){
  113. return Math.round(params.value);
  114. },
  115. textStyle:{color:'orange'}
  116. }
  117. }
  118. },
  119. 'data':[{'type':'average','name':'平均值'}]
  120. },
  121. 'data': dataMap.dataGDP['2002']
  122. },
  123. {
  124. 'name':'金融','yAxisIndex':1,'type':'bar',
  125. 'data': dataMap.dataFinancial['2002']
  126. },
  127. {
  128. 'name':'房地产','yAxisIndex':1,'type':'bar',
  129. 'data': dataMap.dataEstate['2002']
  130. },
  131. {
  132. 'name':'第一产业','yAxisIndex':1,'type':'bar',
  133. 'data': dataMap.dataPI['2002']
  134. },
  135. {
  136. 'name':'第二产业','yAxisIndex':1,'type':'bar',
  137. 'data': dataMap.dataSI['2002']
  138. },
  139. {
  140. 'name':'第三产业','yAxisIndex':1,'type':'bar',
  141. 'data': dataMap.dataTI['2002']
  142. }
  143. ]
  144. },
  145. {
  146. title : {'text':'2003全国宏观经济指标'},
  147. series : [
  148. {'data': dataMap.dataGDP['2003']},
  149. {'data': dataMap.dataFinancial['2003']},
  150. {'data': dataMap.dataEstate['2003']},
  151. {'data': dataMap.dataPI['2003']},
  152. {'data': dataMap.dataSI['2003']},
  153. {'data': dataMap.dataTI['2003']}
  154. ]
  155. },
  156. {
  157. title : {'text':'2004全国宏观经济指标'},
  158. series : [
  159. {'data': dataMap.dataGDP['2004']},
  160. {'data': dataMap.dataFinancial['2004']},
  161. {'data': dataMap.dataEstate['2004']},
  162. {'data': dataMap.dataPI['2004']},
  163. {'data': dataMap.dataSI['2004']},
  164. {'data': dataMap.dataTI['2004']}
  165. ]
  166. },
  167. {
  168. title : {'text':'2005全国宏观经济指标'},
  169. series : [
  170. {'data': dataMap.dataGDP['2005']},
  171. {'data': dataMap.dataFinancial['2005']},
  172. {'data': dataMap.dataEstate['2005']},
  173. {'data': dataMap.dataPI['2005']},
  174. {'data': dataMap.dataSI['2005']},
  175. {'data': dataMap.dataTI['2005']}
  176. ]
  177. },
  178. {
  179. title : {'text':'2006全国宏观经济指标'},
  180. series : [
  181. {'data': dataMap.dataGDP['2006']},
  182. {'data': dataMap.dataFinancial['2006']},
  183. {'data': dataMap.dataEstate['2006']},
  184. {'data': dataMap.dataPI['2006']},
  185. {'data': dataMap.dataSI['2006']},
  186. {'data': dataMap.dataTI['2006']}
  187. ]
  188. },
  189. {
  190. title : {'text':'2007全国宏观经济指标'},
  191. series : [
  192. {'data': dataMap.dataGDP['2007']},
  193. {'data': dataMap.dataFinancial['2007']},
  194. {'data': dataMap.dataEstate['2007']},
  195. {'data': dataMap.dataPI['2007']},
  196. {'data': dataMap.dataSI['2007']},
  197. {'data': dataMap.dataTI['2007']}
  198. ]
  199. },
  200. {
  201. title : {'text':'2008全国宏观经济指标'},
  202. series : [
  203. {'data': dataMap.dataGDP['2008']},
  204. {'data': dataMap.dataFinancial['2008']},
  205. {'data': dataMap.dataEstate['2008']},
  206. {'data': dataMap.dataPI['2008']},
  207. {'data': dataMap.dataSI['2008']},
  208. {'data': dataMap.dataTI['2008']}
  209. ]
  210. },
  211. {
  212. title : {'text':'2009全国宏观经济指标'},
  213. series : [
  214. {'data': dataMap.dataGDP['2009']},
  215. {'data': dataMap.dataFinancial['2009']},
  216. {'data': dataMap.dataEstate['2009']},
  217. {'data': dataMap.dataPI['2009']},
  218. {'data': dataMap.dataSI['2009']},
  219. {'data': dataMap.dataTI['2009']}
  220. ]
  221. },
  222. {
  223. title : {'text':'2010全国宏观经济指标'},
  224. series : [
  225. {'data': dataMap.dataGDP['2010']},
  226. {'data': dataMap.dataFinancial['2010']},
  227. {'data': dataMap.dataEstate['2010']},
  228. {'data': dataMap.dataPI['2010']},
  229. {'data': dataMap.dataSI['2010']},
  230. {'data': dataMap.dataTI['2010']}
  231. ]
  232. },
  233. {
  234. title : {'text':'2011全国宏观经济指标'},
  235. series : [
  236. {'data': dataMap.dataGDP['2011']},
  237. {'data': dataMap.dataFinancial['2011']},
  238. {'data': dataMap.dataEstate['2011']},
  239. {'data': dataMap.dataPI['2011']},
  240. {'data': dataMap.dataSI['2011']},
  241. {'data': dataMap.dataTI['2011']}
  242. ]
  243. }
  244. ]
  245. };
  246. myChart.setOption(option);
  247. }
  248. );
  249. </script>
  250. <?php
  251. ?>
  252. </body>
  253. </html>

以上为官方的静态数据写入方式，下面介绍根据需求动态添加数据方式：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5. <title>a</title>
  6. <style>
  7. body{background-color:#000000}
  8. </style>
  9. </head>
  10. <body>
  11. <div id="main" style="height:500px;width: 100%; margin-left: 0px;float: left;"></div>
  12. <!--    本地引入ECharts,'js/dist/'本地文件路径下 -->
  13. <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
  14. <script src="http://echarts.baidu.com/doc/example/timelineOption.js"></script>
  15. <script type="text/javascript">
  16. //        路径配置,'./js/dist'本地文件路径
  17. require.config({
  18. paths: {
  19. echarts: 'http://echarts.baidu.com/build/dist'
  20. }
  21. });
  22. require(
  23. [
  24. 'echarts',
  25. 'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
  26. 'echarts/chart/bar'
  27. ],
  28. function (ec) {
  29. var myChart = ec.init(document.getElementById('main'));
  30. var text = '[{"NAME":"2002-01-01","VAL":"53"},{"NAME":"2003-01-01","VAL":"20"},{"NAME":"2004-01-01","VAL":"33"},{"NAME":"2005-01-01","VAL":"43"},{"NAME":"2006-01-01","VAL":"28"},{"NAME":"2007-01-01","VAL":"29"},{"NAME":"2008-01-01","VAL":"43"},{"NAME":"2009-01-01","VAL":"28"},{"NAME":"2010-01-01","VAL":"29"},{"NAME":"2011-01-01","VAL":"29"}]';
  31. var json = JSON.parse(text);
  32. option = {
  33. timeline:{
  34. data:(function(){
  35. var data=[];
  36. for(var i=0;i<json.length;i++){
  37. data.push(json[i].NAME);
  38. console.log(json[i].NAME);
  39. }
  40. return data;
  41. })(),
  42. label : {
  43. formatter : function(s) {
  44. return s.slice(0, 4);
  45. }
  46. },
  47. autoPlay : true,
  48. playInterval : 1000
  49. },
  50. options:(function(){
  51. var options=[];
  52. for(var i=0;i<json.length;i++){
  53. if(i==0){
  54. options.push({
  55. title : {
  56. 'text':'2002全国宏观经济指标',
  57. 'subtext':'数据来自国家统计局'
  58. },
  59. tooltip : {'trigger':'axis'},
  60. legend : {
  61. x:'right',
  62. 'data':['GDP','金融','房地产','第一产业','第二产业','第三产业'],
  63. 'selected':{
  64. 'GDP':true,
  65. '金融':false,
  66. '房地产':true,
  67. '第一产业':false,
  68. '第二产业':false,
  69. '第三产业':false
  70. }
  71. },
  72. toolbox : {
  73. 'show':true,
  74. orient : 'vertical',
  75. x: 'right',
  76. y: 'center',
  77. 'feature':{
  78. 'mark':{'show':true},
  79. 'dataView':{'show':true,'readOnly':false},
  80. 'magicType':{'show':true,'type':['line','bar','stack','tiled']},
  81. 'restore':{'show':true},
  82. 'saveAsImage':{'show':true}
  83. }
  84. },
  85. calculable : true,
  86. grid : {'y':80,'y2':100},
  87. xAxis : [{
  88. 'type':'category',
  89. 'axisLabel':{'interval':0},
  90. 'data':[
  91. '北京','\n天津','河北','\n山西','内蒙古','\n辽宁','吉林','\n黑龙江',
  92. '上海','\n江苏','浙江','\n安徽','福建','\n江西','山东','\n河南',
  93. '湖北','\n湖南','广东','\n广西','海南','\n重庆','四川','\n贵州',
  94. '云南','\n西藏','陕西','\n甘肃','青海','\n宁夏','新疆'
  95. ]
  96. }],
  97. yAxis : [
  98. {
  99. 'type':'value',
  100. 'name':'GDP（亿元）',
  101. 'max':53500
  102. },
  103. {
  104. 'type':'value',
  105. 'name':'其他（亿元）'
  106. }
  107. ],
  108. series : [
  109. {
  110. 'name':'GDP',
  111. 'type':'bar',
  112. 'markLine':{
  113. symbol : ['arrow','none'],
  114. symbolSize : [4, 2],
  115. itemStyle : {
  116. normal: {
  117. lineStyle: {color:'orange'},
  118. barBorderColor:'orange',
  119. label:{
  120. position:'left',
  121. formatter:function(params){
  122. return Math.round(params.value);
  123. },
  124. textStyle:{color:'orange'}
  125. }
  126. }
  127. },
  128. 'data':[{'type':'average','name':'平均值'}]
  129. },
  130. 'data': dataMap.dataGDP['2002']
  131. },
  132. {
  133. 'name':'金融','yAxisIndex':1,'type':'bar',
  134. 'data': dataMap.dataFinancial['2002']
  135. },
  136. {
  137. 'name':'房地产','yAxisIndex':1,'type':'bar',
  138. 'data': dataMap.dataEstate['2002']
  139. },
  140. {
  141. 'name':'第一产业','yAxisIndex':1,'type':'bar',
  142. 'data': dataMap.dataPI['2002']
  143. },
  144. {
  145. 'name':'第二产业','yAxisIndex':1,'type':'bar',
  146. 'data': dataMap.dataSI['2002']
  147. },
  148. {
  149. 'name':'第三产业','yAxisIndex':1,'type':'bar',
  150. 'data': dataMap.dataTI['2002']
  151. }
  152. ]
  153. });
  154. }else{
  155. var year = json[i].NAME.slice(0, 4);
  156. options.push({
  157. title : {'text':year+'全国宏观经济指标'},
  158. series : [
  159. {'data': dataMap.dataGDP[year]},
  160. {'data': dataMap.dataFinancial[year]},
  161. {'data': dataMap.dataEstate[year]},
  162. {'data': dataMap.dataPI[year]},
  163. {'data': dataMap.dataSI[year]},
  164. {'data': dataMap.dataTI[year]}
  165. ]
  166. });
  167. }
  168. }
  169. return options;
  170. })()
  171. };
  172. myChart.setOption(option);
  173. }
  174. );
  175. </script>
  176. <?php
  177. ?>
  178. </body>
  179. </html>

两者效果一样，如下图所示：

ECharts实例开发学习笔记二——时间轴的更多相关文章

  1. python-django开发学习笔记二

    1.简述 1.1 开发环境 该笔记所基于的开发环境为:windows8.python2.7.5.psycopg2-2.4.2.django1.5.4.pyCharm-2.7.3.以上所描述的软件.插件 ...

  2. 软件开发学习笔记 <二>软件开发模型、Up、Rup、敏捷Up

    软件开发过程(process) 是一个将用户需求转化为软件系统所需要的活动的集合. 软件生命周期(SDLC,Software Devlopment Life Cycle) 软件从孕育.诞生.成长.成熟 ...

  3. 基于.NET的CAD二次开发学习笔记二：AutoCAD .NET中的对象

    1.CAD对象:一个CAD文件(DWG文件)即对应一个数据库,数据库中的所有组成部分,看的见(包括点.多段线.文字.圆等)和看不见(图层.线型.颜色等)的都是对象,数据库本身也是一个对象. 直线.圆弧 ...

  4. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  5. python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码

    python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码 python的json.dumps方法默认会输出成这种格式"\u535a\u ...

  6. python3.4学习笔记(二十五) Python 调用mysql redis实例代码

    python3.4学习笔记(二十五) Python 调用mysql redis实例代码 #coding: utf-8 __author__ = 'zdz8207' #python2.7 import ...

  7. python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码

    python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码 淘宝IP地址库 http://ip.taobao.com/目前提供的服务包括:1. 根据用户提供的 ...

  8. amazeui学习笔记二（进阶开发5）--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  9. amazeui学习笔记二（进阶开发4）--JavaScript规范Rules

    amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...

随机推荐

  1. Windows 10+Ubuntu 16.04在MBR分区上安装双系统（转）

    以下内容转自这篇博客: http://www.cnblogs.com/Duane/p/5424218.html http://www.cnblogs.com/Duane/p/6776302.html( ...

  2. Maven安装好后包下载的测试命令和配置变量的查看命令：mvn help:system

    mvn help:system 该命令会打印出所有的Java系统属性和环境变量,这些信息对我们日常的编程工作很有帮助.运行这条命令的目的是为了让Maven执行一个真正的任务.我们可以从命令行输出看到M ...

  3. Tap into your Linux system with SystemTap

    https://major.io/2010/12/07/tap-into-your-linux-system-with-systemtap/ December 7, 2010 By Major Hay ...

  4. MySQL: 让MySQL支持颜文字emoji

    数据库需要支持utf8mb4,如果已经创建了,那么可以用如下命令转换: alter database xxxx character set utf8mb4 collate utf8mb4_unicod ...

  5. 自己定义控件：onDraw 方法实现仿 iOS 的开关效果

    概述 本文主要解说怎样在 Android 下实现高仿 iOS 的开关按钮,并不是是在 Android 自带的 ToggleButton 上改动,而是使用 API 提供的 onDraw.onMeasur ...

  6. CentOS yum时出现“Could not retrieve mirrorlist ”的解决的方法——resolv.conf的配置

    原因:没有配置resolv.conf 解决方法: 到/etc文件夹下配置resolv.conf增加nameserver IP,如: nameserver 8.8.8.8 nameserver 8.8. ...

  7. 1245 最小的N个和(前k小ai+bi)

    1245 最小的N个和  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 有两个长度为 N ...

  8. 【树剖求LCA】树剖知识点

    不太优美但是有注释的版本: #include<cstdio> #include<iostream> using namespace std; struct edge{ int ...

  9. Grunt环境搭建及使用

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  10. E20170628-hm

    forgery   n. 伪造; 伪造罪; 伪造物; 伪造签字; distribute   vt. 分配,散布; 散发,分发; 把…分类; [电] 配电; contribute to(contribu ...