最近開始關注Echarts，總算找到我想要的圖表表現方式。做了歷年1年期存款利率，歷年5年期存款利率，歷年5年以上貸款利率，歷年公積金5年以上貸款利率。http://fav.jiankangjiaju.com/i/Rate/Rate.asp

以歷年的一年期存款利率為例子，程式碼如下：

<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>

<!-- ECharts單檔案引入 -->
<script src="../../Echarts/build/dist/echarts.js"></script>
<script type="text/javascript">
   // 路徑配置
   require.config({
           paths: {echarts: '../../Echarts/build/dist'}
   });

   require(
       [
           'echarts',
           'echarts/chart/bar' // 使用柱狀圖就載入bar模組，按需載入
       ],
       function (ec) {
           // 基於準備好的dom，初始化echarts圖表

           var myChart = ec.init(document.getElementById('main')); 
 
           var option = {

               title : {
                   text: '[One Year] Deposit Rate (1990-2015)',
                   x: 'center',
                   textStyle : {
                         ontSize: '20'
                   }
               },

               tooltip : {
                   trigger: 'item'
               },

               xAxis : [
                   {
                       name : 'Date',
                       type : 'category',
                       axisLine : {
                          show: true,
                          lineStyle: {
                             color: 'green',
                             type: 'solid',
                             width: 2
                             }
                       },
                       boundaryGap : true,
                       axisLabel : {
                           show:true,
                           interval: 'auto',
                           rotate: 45,
                           margin: 8,
                       },

                        data : ['1990.04.15', '1990.08.21', '1991.04.21', '1993.05.15', '1993.07.11', '1996.05.01',
                                '1996.08.23', '1997.10.23', '1998.03.25', '1998.07.01', '1998.12.07', '1999.06.10',
                                '2002.02.21', '2004.10.29', '2006.08.19', '2007.03.18', '2007.05.19', '2007.07.21',
                                '2007.08.22', '2007.09.15', '2007.12.21', '2008.10.09', '2008.10.30', '2008.11.27',
                                '2008.12.23', '2010.10.20', '2010.12.26', '2011.02.09', '2011.04.06', '2011.07.07',
                                '2012.06.08', '2012.07.06', '2014.11.22', '2015.03.01', '2015.05.11', '2015.06.28',
                                '2015.08.26', '2015.10.24'
                               ]
                        }
                    ],

                    yAxis : [
                        {
                            name : 'Rate(%)',
                            type : 'value',
                            axisLine : {
                               show: true,
                               lineStyle: {
                                   color: 'green',
                                   type: 'solid',
                                   width: 2
                               }
                            }
                        }
                    ],

               series : [
                   {
                       name:'Deposit Rate (%)',
                       type:'bar',
                       itemStyle: {
                           normal: {
                               color : '#C5EDD2',
                               label : {
                                   show : true,
                                   position: 'top' ,
                                   textStyle : {
                                       color : '#95B55B',
                                       fontSize : '8'
                                   }
                               }
                           },
                           emphasis: {
                               color: '#95B55B',
                               label : {
                                   show : true,
                                   position: 'top' ,
                                   textStyle : {
                                       color : 'rgba(0,0,0,0)',
                                       fontSize : '8'
                                   }
                               }
                           }
                       },


                       data:[10.08, 8.64, 7.56, 9.18, 10.98, 9.18, 7.47, 5.67, 5.22, 4.77, 3.78, 2.25, 1.98,
                            2.25, 2.52, 2.79, 3.06, 3.33, 3.6, 3.87, 4.14, 3.87, 3.6, 2.52, 2.25, 2.5, 2.75,
                            3, 3.25, 3.5, 3.25, 3, 2.75, 2.5, 2.25, 2, 1.75, 1.5
                       ],


                       markPoint : {
                           symbol : 'pin',
                           itemStyle: {
                               normal: {
                                   color : '#95B55B',
                                   label : {
                                       show : true
                                   }
                               }
                           },
                           data : [
                              {type : 'max', name: 'Max Rate'},
                              {type : 'min', name: 'Min Rare'}
                           ]
                       }
                   }
               ]
           };


                // 為echarts物件載入資料 
                myChart.setOption(option); 
            }
        );
     </script>