ECharts學習總結（三）-----基本概念分析

       最近一直在看ECharts相關的內容，進展卻不怎麼理想，特認真總結以下基礎知識：

1）

      ECharts整體框架和其中各個部分：圖類、組件、接口、基礎庫的具備應用方法和應該把握的細節，並經過實際的例子熟悉和掌握各個控件。只有打牢基礎才能真正的爲下步的工做作好準備，熟練的屬性代碼的編程技巧，才能作出更好的專題界面。

      Echarts底層是基於ZRender（一個全新的輕量級canvas類庫），建立了座標 系，圖例，提示，工具 箱等基礎組件，並在此上構建出折線圖、柱狀圖、散點圖、K線圖、餅圖、雷達圖、地圖、和絃圖、力導向佈局圖、儀表盤以及漏斗圖，同時支持任意維度的堆積和多圖表混合展示。

2）

       重點總結：要求：瞭解ECharts特性中列舉的每一項特性，並能找到實例中的例子，而且在實例中操做。

       a.) ECharts一種支持多少種圖表？有多少個組件？列舉出中英文名稱。

  　　共11類圖表：折線圖（line）、柱狀圖（bar）、散點圖（scatter）、k線圖（k）、餅圖（pie）、雷達圖（radar）、和炫圖（chord）、力導向佈局圖（force）、地圖（map）、儀表盤（gauge）、漏斗圖（funnel）。
　　 7種組件：標題（title）、詳情氣泡（tooltip）、圖例（legend）、值域（dataRange）、數據區域（datazoom）、時間軸（timeline）、工具箱（toolbox）。

  　 更加具體組件：Axis（座標軸）、Grid（網格）、Polar（極座標）、Title（標題）、Tooltip（提示）、 Legend（圖例）、DataZoom（數據區域縮放）、DataRange（值域漫遊）、Toolbox（工具箱）、Timeline（時間軸）。

  官網上以下圖所示：
  

  詳細劃分後以下圖：
  

  　　b.) 哪些特性可讓用戶修改圖表中的數據？哪些特性幫助用戶進行信息篩選（專一）？哪些特性幫助實現了用不一樣的方式解讀一樣的數據？
   　　答：改圖表中的數據：拖拽重計算、數據視圖 　　信息篩選：圖例開關、數據區域縮放功能、值域漫遊

  　　　　幫助瞭解不一樣的方式：動態類型切換、多圖聯動、多維度堆積、混搭

　　   c.) 怎麼引入ECharts？有幾種方式？有什麼不一樣？這裏重點講述其中的不一樣

　　　第一種方法是packet引入，這是開發時最好的作法，不論是開發echarts仍是用echarts都是，由於文件未被合併壓縮，全部的錯誤能立馬定位到出錯的地方從而讓你

快速知道可能問題會出在哪。但這並不適合直接上線，緣由就是上面說的，文件太大，加載太慢，這樣上網會被罵死的，由於傳送將會花費大量的時間，用戶確定忍受不了。

 1 require.config({  2  packages:[{  3  name:'echarts',  4  location:'../js/echarts',  5  main:'echarts'  6  },{  7  name:'zrender',  8  location:'../js/zrender',//zrender與echarts在同一級目錄  9  main:'zrender' 10  } 11  ] 12      });

　　　第二種方法是模塊化單文件引入，真正上線時若是你是模塊化的項目，應該用鏈接壓縮好的單文件，也就是第二種。

但問題可能就來了，若是我只用到一個圖表，若是直接用第二種方式上線但是把全部圖表都打包在一塊兒啊，就會形成資源的嚴重浪費，那麼最真實作法是項目打包，用到什麼

就打包什麼，這種方法效率好。

 require.config({ paths: { echarts: '../js/echarts', //echarts.js所在的路徑 'echarts/chart/funnel': '../js/echarts' 　　//把所需圖表指向單文件

} });

配置好後能夠經過動態加載使用echarts  
    function(ec){  
        var mychart=ec.init(domMain);  
        var option={...}  
        myChart.setOption(option);
    }

　　　第三種方法就是標籤式單文件引入，其實仍是由於使用方的環境和水平差別較大所來的。其實這個單文件的構建只是咱們用一個大閉包把模塊加載器和echarts打包在

一塊兒，經過一個全局的命名空間echarts/zrender對外暴露出去而已。內部仍是模塊化的，只是使用方就當命名空間來用就行，這能夠免去不少不熟悉模塊化的開發人員在管

理各類調用時序、聲明、回調之類的麻煩。

　　　對於模塊化問題你們能夠多去看看CMD規範、AMD規範。

3）、第三個重點內容總結：

　　　　函數參數ec大多數組件都能支持稱爲「九宮格自由佈局」的方式，怎麼理解？那些組件支持？

    

   　　　這就是九宮格自由佈局，x支持left、center和right，y 支持right、center和bottom

   

   　　這樣x，y就能把頁面劃分爲9個區域，能夠任意定位在一處。x/y除了支持語義文本，還能更加特殊的傳入數值作絕對定位好比：{x:100, y:100}。甚至有個別組件還能支持百分比：x：‘10%’表明橫向定位在總寬度*10%的位置。

　　　注意：js數據類型沒有‘10%’百分比這一說，設置時是字符串，內部邏輯會處理爲百分比。

4）Formatter是萬金油，能夠實現高度個性化的需求，那些地方支持formatter？

   　　首先你們要認識到Formatter是作文本格式化用的。由於不可能內置文本顯示能知足全部需求，因此在作個性化定製是formatter顯得尤其重要和靈活，不只是知足格式要求，甚至可用於知足圖形化的需求，功能非常強大。

　　最多見的是tooltip、axisLabel、itemStyle.*.label.formatter
   
   
     異步回調方式填充tooltip
   

  　　這就是一個異步回調的模擬，能夠把setTimeout理解爲一個ajax的回調。當網絡請求回來內容時callback調用填充tooltip內容就是一個異步回調填充tooltip的過程。保證了交互的準確性，總之功能很強大，你們慢慢研究挖掘。

        重點提示：永遠別忘了數據在你本身的手裏，option是你傳個ec的，若是任何地方的回調變量或數據不能知足你的需求，直接從你本身的option裏找。

 5）如何利用dataZoom實現按需加載特定區間數據？好比顯示一個整年的趨勢做爲dataZoom，僅加載當前選定的區間數據？dataZoom交互發生區間變化後按需請求特定區間數據並加載？

　　首先要理解dataZoom的兩個關鍵屬性，xAxisIndex、yAxisIndex屬性用來指定縮放控制的類目軸，好比湖區全局的抽象數據，用12個月或者365天。而且要注意realtime屬性，由於動態請求和交互行爲，全部就不能把realtime設置成flase，不然就無法運行了。

未完待續。。。。。。