首页 > 代码库 > ECharts实例开发学习笔记二——时间轴

ECharts实例开发学习笔记二——时间轴

2024-10-26 21:50:02   208人阅读

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

官网demo：

[html] view plain copy
 
  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://www.mamicode.com/"http://echarts.baidu.com/build/dist/echarts.js"></script>  
  14. <script src=http://www.mamicode.com/"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.   
  247.   
  248.                 myChart.setOption(option);  
  249.             }  
  250.     );  
  251. </script>  
  252.   
  253. <?php  
  254.   
  255.   
  256. ?>  
  257.   
  258. </body>  
  259. </html>  

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

 

 

[html] view plain copy
 
  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://www.mamicode.com/"http://echarts.baidu.com/build/dist/echarts.js"></script>  
  14. <script src=http://www.mamicode.com/"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.   
  33.                 option = {  
  34.                     timeline:{  
  35.                         data:(function(){  
  36.                             var data=http://www.mamicode.com/[];
  37.                             for(var i=0;i<json.length;i++){  
  38.                                 data.push(json[i].NAME);  
  39.                                 console.log(json[i].NAME);  
  40.                             }  
  41.                             return data;  
  42.                         })(),  
  43.                         label : {  
  44.                             formatter : function(s) {  
  45.                                 return s.slice(0, 4);  
  46.                             }  
  47.                         },  
  48.                         autoPlay : true,  
  49.                         playInterval : 1000  
  50.                     },  
  51.                     options:(function(){  
  52.                         var options=[];  
  53.                         for(var i=0;i<json.length;i++){  
  54.                             if(i==0){  
  55.                                 options.push({  
  56.                                     title : {  
  57.                                         ‘text‘:‘2002全国宏观经济指标‘,  
  58.                                         ‘subtext‘:‘数据来自国家统计局‘  
  59.                                     },  
  60.                                     tooltip : {‘trigger‘:‘axis‘},  
  61.                                     legend : {  
  62.                                         x:‘right‘,  
  63.                                         ‘data‘:[‘GDP‘,‘金融‘,‘房地产‘,‘第一产业‘,‘第二产业‘,‘第三产业‘],  
  64.                                         ‘selected‘:{  
  65.                                             ‘GDP‘:true,  
  66.                                             ‘金融‘:false,  
  67.                                             ‘房地产‘:true,  
  68.                                             ‘第一产业‘:false,  
  69.                                             ‘第二产业‘:false,  
  70.                                             ‘第三产业‘:false  
  71.                                         }  
  72.                                     },  
  73.                                     toolbox : {  
  74.                                         ‘show‘:true,  
  75.                                         orient : ‘vertical‘,  
  76.                                         x: ‘right‘,  
  77.                                         y: ‘center‘,  
  78.                                         ‘feature‘:{  
  79.                                             ‘mark‘:{‘show‘:true},  
  80.                                             ‘dataView‘:{‘show‘:true,‘readOnly‘:false},  
  81.                                             ‘magicType‘:{‘show‘:true,‘type‘:[‘line‘,‘bar‘,‘stack‘,‘tiled‘]},  
  82.                                             ‘restore‘:{‘show‘:true},  
  83.                                             ‘saveAsImage‘:{‘show‘:true}  
  84.                                         }  
  85.                                     },  
  86.                                     calculable : true,  
  87.                                     grid : {‘y‘:80,‘y2‘:100},  
  88.                                     xAxis : [{  
  89.                                         ‘type‘:‘category‘,  
  90.                                         ‘axisLabel‘:{‘interval‘:0},  
  91.                                         ‘data‘:[  
  92.                                             ‘北京‘,‘\n天津‘,‘河北‘,‘\n山西‘,‘内蒙古‘,‘\n辽宁‘,‘吉林‘,‘\n黑龙江‘,  
  93.                                             ‘上海‘,‘\n江苏‘,‘浙江‘,‘\n安徽‘,‘福建‘,‘\n江西‘,‘山东‘,‘\n河南‘,  
  94.                                             ‘湖北‘,‘\n湖南‘,‘广东‘,‘\n广西‘,‘海南‘,‘\n重庆‘,‘四川‘,‘\n贵州‘,  
  95.                                             ‘云南‘,‘\n西藏‘,‘陕西‘,‘\n甘肃‘,‘青海‘,‘\n宁夏‘,‘新疆‘  
  96.                                         ]  
  97.                                     }],  
  98.                                     yAxis : [  
  99.                                         {  
  100.                                             ‘type‘:‘value‘,  
  101.                                             ‘name‘:‘GDP（亿元）‘,  
  102.                                             ‘max‘:53500  
  103.                                         },  
  104.                                         {  
  105.                                             ‘type‘:‘value‘,  
  106.                                             ‘name‘:‘其他（亿元）‘  
  107.                                         }  
  108.                                     ],  
  109.                                     series : [  
  110.                                         {  
  111.                                             ‘name‘:‘GDP‘,  
  112.                                             ‘type‘:‘bar‘,  
  113.                                             ‘markLine‘:{  
  114.                                                 symbol : [‘arrow‘,‘none‘],  
  115.                                                 symbolSize : [4, 2],  
  116.                                                 itemStyle : {  
  117.                                                     normal: {  
  118.                                                         lineStyle: {color:‘orange‘},  
  119.                                                         barBorderColor:‘orange‘,  
  120.                                                         label:{  
  121.                                                             position:‘left‘,  
  122.                                                             formatter:function(params){  
  123.                                                                 return Math.round(params.value);  
  124.                                                             },  
  125.                                                             textStyle:{color:‘orange‘}  
  126.                                                         }  
  127.                                                     }  
  128.                                                 },  
  129.                                                 ‘data‘:[{‘type‘:‘average‘,‘name‘:‘平均值‘}]  
  130.                                             },  
  131.                                             ‘data‘: dataMap.dataGDP[‘2002‘]  
  132.                                         },  
  133.                                         {  
  134.                                             ‘name‘:‘金融‘,‘yAxisIndex‘:1,‘type‘:‘bar‘,  
  135.                                             ‘data‘: dataMap.dataFinancial[‘2002‘]  
  136.                                         },  
  137.                                         {  
  138.                                             ‘name‘:‘房地产‘,‘yAxisIndex‘:1,‘type‘:‘bar‘,  
  139.                                             ‘data‘: dataMap.dataEstate[‘2002‘]  
  140.                                         },  
  141.                                         {  
  142.                                             ‘name‘:‘第一产业‘,‘yAxisIndex‘:1,‘type‘:‘bar‘,  
  143.                                             ‘data‘: dataMap.dataPI[‘2002‘]  
  144.                                         },  
  145.                                         {  
  146.                                             ‘name‘:‘第二产业‘,‘yAxisIndex‘:1,‘type‘:‘bar‘,  
  147.                                             ‘data‘: dataMap.dataSI[‘2002‘]  
  148.                                         },  
  149.                                         {  
  150.                                             ‘name‘:‘第三产业‘,‘yAxisIndex‘:1,‘type‘:‘bar‘,  
  151.                                             ‘data‘: dataMap.dataTI[‘2002‘]  
  152.                                         }  
  153.                                     ]  
  154.   
  155.                                 });  
  156.                             }else{  
  157.                                 var year = json[i].NAME.slice(0, 4);  
  158.                                 options.push({  
  159.                                     title : {‘text‘:year+‘全国宏观经济指标‘},  
  160.                                     series : [  
  161.                                         {‘data‘: dataMap.dataGDP[year]},  
  162.                                         {‘data‘: dataMap.dataFinancial[year]},  
  163.                                         {‘data‘: dataMap.dataEstate[year]},  
  164.                                         {‘data‘: dataMap.dataPI[year]},  
  165.                                         {‘data‘: dataMap.dataSI[year]},  
  166.                                         {‘data‘: dataMap.dataTI[year]}  
  167.                                     ]  
  168.   
  169.                                 });  
  170.                             }  
  171.                         }  
  172.                         return options;  
  173.                     })()  
  174.                 };  
  175.   
  176.   
  177.                 myChart.setOption(option);  
  178.             }  
  179.     );  
  180. </script>  
  181.   
  182. <?php  
  183.   
  184.   
  185. ?>  
  186.   
  187. </body>  
  188. </html>  


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

 

技术分享

ECharts实例开发学习笔记二——时间轴


联系
我们