echarts 總結

Echarts

1. Echarts 相關文檔

0.1 官網

http://echarts.baidu.com

0.2 配置項

http://echarts.baidu.com/option.html

0.3 API

http://echarts.baidu.com/api.html

1. 一些經常使用的配置項

2.1   title 設置圖表的標題

2.2   tooltip 圖表上的提示框

其中，有一個formatter配置項，能夠配置顯示的內容，具體的配置方法，參考上面的文檔

2.3   legend 圖例

其中的 data 的配置，每一項表明一個系列（series）的 name,name必須徹底相同

2.4   toolbox 五種類型的工具

導出圖片，數據視圖，動態類型切換，數據區域縮放，重置

2.5   grid 網格

直角座標系內繪圖網格，單個 grid 內最多能夠放置上下兩個 X 軸，左右兩個 Y 軸。能夠在網格上繪製折線圖，柱狀圖，散點圖（氣泡圖）。

在 ECharts 2.x 裏單個 echarts 實例中最多隻能存在一個 grid 組件，在 ECharts 3 中能夠存在任意個 grid 組件。

2.6   xAxis  x軸

直角座標系 grid 中的 x 軸，單個 grid 組件最多隻能放上下兩個 x 軸。

關鍵屬性：

Type: 座標軸類型。

Position: 座標軸所在的位置，

2.7   yAxis  y軸

直角座標系 grid 中的 y 軸，單個 grid 組件最多隻能放左右兩個 y 軸。

2.8   series  系列列表。

每一個系列經過 type 決定本身的圖表類型，不一樣的圖表類型，其配置項也有所不一樣，具體的配置項，參考文檔：http://echarts.baidu.com/option.html#series

1. 3.       echarts 中的幾個重要對象及實例化過程

3.1   echarts 對象

全局 echarts 對象，在 script 標籤引入 echarts.js 文件後得到。

經常使用的方法：init

echarts.init:  建立一個 ECharts 示例，返回echartsInstance，不能再單個容器上初始化多個 ECharts 實例。

 

3.2   echartsInstance 對象

經過 echarts.init建立的實例。

   經常使用方法：setOption

方法簽名：

 

方法做用：

設置圖表實例的配置項以及數據，萬能接口，全部參數和數據的修改均可以經過setOption完成，ECharts 會合並新的參數和數據，而後刷新圖表。若是開啓動畫的話，ECharts 找到兩組數據之間的差別而後經過合適的動畫去表現數據的變化。

參數含義：

1. option

圖表的配置項和數據，具體見配置項手冊。

1. notMerge

可選，是否不跟以前設置的option進行合併，默認爲false，即合併。

1. notRefreshImmediately

可選，在設置完option後是否不當即刷新畫布，默認爲false，即當即刷新。

1. echarts3 中地圖的使用

echarts3 的js 實現中並無將地圖數據集成進去，因此當使用地圖時須要，單獨引入地圖數據，地圖數據的下載：http://echarts.baidu.com/download-map.html

引入地圖的代碼：

<script src="echarts.js"></script>

<!—引入地圖數據 –>

<script src="china.js"></script>

<script>

var chart = echarts.init(document.getElementById('main'));

chart.setOption({

    series: [{

        type: 'map',

        map: 'china'

    }]

});

</script>

1. echarts 特性

echarts 的配置項很是多，很是靈活，須要注意的是，在某些狀況下，大多數配置項都是可選的，可是，有些配置項則是必須的，然而， echarts 在某些必須缺失的狀況下，仍然可以將圖表顯示出來，此時就會出現一些問題，例如，註冊事件不會成功，這些問題很是隱蔽，找起來很是麻煩，因此必定要注意。例如：當series 是 map 的的時候，若是，其 data 字段沒有值，地圖仍然會正常顯示，可是tooltip 就沒法顯示了，同時，這時註冊事件時，就不會成功。