zoukankan      html  css  js  c++  java

  • 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; 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.                                     '北京',' 天津','河北',' 山西','内蒙古',' 辽宁','吉林',' 黑龙江',  
    83.                                     '上海',' 江苏','浙江',' 安徽','福建',' 江西','山东',' 河南',  
    84.                                     '湖北',' 湖南','广东',' 广西','海南',' 重庆','四川',' 贵州',  
    85.                                     '云南',' 西藏','陕西',' 甘肃','青海',' 宁夏','新疆'  
    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; 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 = {  
    34.                     timeline:{  
    35.                         data:(function(){  
    36.                             var data=[];  
    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.                                             '北京',' 天津','河北',' 山西','内蒙古',' 辽宁','吉林',' 黑龙江',  
    93.                                             '上海',' 江苏','浙江',' 安徽','福建',' 江西','山东',' 河南',  
    94.                                             '湖北',' 湖南','广东',' 广西','海南',' 重庆','四川',' 贵州',  
    95.                                             '云南',' 西藏','陕西',' 甘肃','青海',' 宁夏','新疆'  
    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>  


            两者效果一样，如下图所示：
  • 相关阅读:
    poj 2155 B
    hdu 1556 A
    hdu 1556 A
    #366 A-C
    最长上升子序列
    Codeforces Div3 #501 A-E(2) F以后补
    字典的建立 查找
    字典序大小
    头文件模板
    01背包模板 及 优化
  • 原文地址：https://www.cnblogs.com/telwanggs/p/7183302.html
Copyright © 2011-2022 走看看