使用ECharts繪製可視化圖表

今天在網上找了一篇關於使用ECharts繪製可視化圖表的文章，下載後仔細研究發現因爲時間的緣由，文中所寫的版本與當前最新版本根本不同，且其內容所有照搬幫助文檔，經研究很是不易讀懂，因爲最近項目須要此項技術，通過研究後，整理出以下精華代碼。

<!--引入核心js文件-->
<script type="text/jscript" src="js/esl.js"></script>

<!--建立一個放置圖形的dom容器,
  Id與下文var myChart = ec.init(document.getElementById('main'));
  中的Id值對應！
  -->
        <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;">
        </div>
         

<script type="text/javascript">
         //自定義一個月份集合
         var TESTarray = new Array();
   for(var i = 0 ; i<20 ; i++){
    TESTarray[i] = i + "_月/君子之耀";
   }
   //當前實驗路徑：js文件夾和頁面同級，下載ECharts後解壓將
   //echarts-1.3.1\doc\example\www下js文件下全部js複製到當前項目js文件夾中。
            require.config({
                paths: {
                    echarts: './js/echarts',
                    'echarts/chart/bar': './js/echarts',
                    'echarts/chart/line': './js/echarts'
                }
            });
            require(
     [
      'echarts',
       'echarts/chart/bar',
        'echarts/chart/line'], function(ec){
                var myChart = ec.init(document.getElementById('main'));
                var option = {
                    tooltip: {
      //觸發器類型，感受沒啥做用，效果圖見最下方
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['蒸發量', '降水量']//須要顯示的數據種類
                    },
                    toolbox: {//此節點下配置右上角菜單項
                        show: true,//是否顯示右上角菜單，false不顯示，true顯示
                        feature: {
                            mark: true,//是否顯示輔助線按鈕
                            dataView: {
                                readOnly: false//是否能夠更改數據視圖中的數據
                            },
                            magicType: ['bar', 'line'],//折線圖按鈕和柱形圖按鈕順序bar爲柱形圖，line爲折線圖
                            restore: true,//是否顯示還原按鈕
                            saveAsImage: true//是否顯示保存圖片按鈕
                        }
                    },
                    calculable: true,
                    xAxis: [{//X座標
                        type: 'category',
      data: TESTarray//引入上文自定義的刻度
      //X軸須要顯示的刻度
      //data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',
      //'13月', '15月']
                    }],
                    yAxis: [{//Y座標，貌似Y軸的數據暫時沒有，好像每種不一樣圖形對應不一樣刻度
                        type: 'value',
                        splitArea: {
                            show: true//是否顯示Y軸顏色加深
                        }
                    }],
                    series: [{
                        name: '蒸發量',//對應legend.data數據種類，
                        type: 'line',//設置當前項加載時使用折線
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]//對應數據種類的值，數組形式
                    }, {
                        name: '降水量',
                        type: 'line',//設置當前項加載時使用折線
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }]
                };
                myChart.setOption(option);
            });
        </script>

觸發器效果圖：

item觸發

axis觸發

研究後的效果圖以下：