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

Posted 疯子加天才

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECharts实例开发学习笔记二——时间轴相关的知识，希望对你有一定的参考价值。

记录一下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://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.   
  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://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.   
  33.                 option = {&n

    以上是关于ECharts实例开发学习笔记二——时间轴的主要内容，如果未能解决你的问题，请参考以下文章

    小5聊Echarts图标之基础学习笔记

    可视化学习笔记 - ECharts

    Echarts笔记-折线图定制（Y轴百分数，鼠标移动显示百分数，显示X轴，Y轴值）

    ECharts学习笔记

    ECharts.js学习

    ECharts.js学习交互组件