记录一下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. System.out.print()思考?

            System.out.print()思考       问题?                 System.out.pritln();  中是包名.类名.方法名吗? 解释: Syste ...

  2. 《Sams Teach Yourself Windows® Workflow Foundation in 24 Hours》读书笔记目录

    目录 1 Part I - The Basics 1.1 Hour 1 - Understanding Windows Workflow Foundation 1.2 Hour 2 - A Spin ...

  3. 1.求整数最大的连续0的个数 BinaryGap Find longest sequence of zeros in binary representation of an integer.

    求整数最大的连续0的个数 A binary gap within a positive integer N is any maximal sequence of consecutive zeros t ...

  4. [Dart] Understand Variables and Constants in Dart

    In this lesson, we will look at how to create variables and constants. These are containers that sto ...

  5. 微信前端js sdk以外的开发

    此时页面中就会出现刚才我画红圈部分的工具条. 这个工具条再加上上面的标题栏工具条. 极大的降低了可视区域的面积. 是否能将它去掉呢?答案是能够的.增加以下代码就能够去掉微信中以下的工具条: docum ...

  6. UNIX网络编程——网络I/O模型

    在学习UNIX网络编程的时候.一開始分不清 同步 和 异步,所以还是总结一下,理清下他们的差别比較好. IO分类 IO依据对IO的调度方式可分为堵塞IO.非堵塞IO.IO复用.信号驱动IO.异步IO. ...

  7. JavaSE入门学习10：Java修饰符

    Java语言提供了非常多修饰符,主要分为下面两类: 訪问修饰符 非訪问修饰符 修饰符用来定义类.方法或者变量.通常放在语句的最前端.我们通过以下的样例来说明: <span style=" ...

  8. 安卓BitmapFactory.decodeStream()返回null的问题解决方法

    问题描述: 从网络获取图片,数据为InputStream流对象,然后调用BitmapFactory的decodeStream()方法解码获取图片,返回null. 代码如下: private Bitma ...

  9. 【转载】同步与异步--阻塞与非阻塞型I/O

    同步阻塞IO 在这个模型中,应用程序(application)为了执行这个read操作,会调用相应的一个system call,将系统控制权交给kernel,然后就进行等待(这其实就是被阻塞了).ke ...

  10. shell脚本-基础

    shell脚本-基础 编程基础 程序是指令+ 数据 程序编程风格: 过程式:以指令为中心,数据服务于指令 对象式:以数据为中心,指令服务于数据 shell 程序提供了编程能力,解释执行. 计算运行二进 ...