在這個大數據越來越盛行的年代，越來越多的使用圖表的形式來進行數據統計的展示，如折線圖、柱狀圖、散點圖、餅圖、K線圖，盒形圖， 地圖、熱力圖、線圖等等；如果在以前，要實現這些圖表，可能很多人會選擇flash。但是flash開發難度大，成本較高，圖表多的時候很耗性能。後來越來越多的純js框架出現，讓大家有了更多的選擇，比如ECharts、Highcharts以及D3等等。本文將為大家介紹如何使用ECharts框架實現圖形化報表展示。

ECharts是一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），能提供直觀，交互豐富，可高度個性化定製的數據可視化圖表，其官網（地址：https://www.echartsjs.com/examples/）給我們提供了很多圖表示例，如下圖所示：

ECharts的入門

1、下載ECharts

從官網（下載地址：http://echarts.baidu.com/download.html）下載ECharts，小編下載的是最新的4.2.1版本，下載後打開，如下圖所示：

主要關注以下三個文件夾：

dist：編譯好後主要的ECharts框架的js文件，如echarts.min.js;

test：包含各種圖表的示例頁面；

theme：圖表使用的樣式js文件；

2、引入ECharts

由於ECharts是純js框架，我們只需要向引入普通js文件那樣引入即可。

<scriptsrc="js/echarts.min.js"></script> 

3、繪製圖表

定義一個展示的DIV容器

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

2）初始化

// 基於準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('myChart'));

3）定義圖表配置項和數據

4）將定義的option加載到展示容器中

// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);

通過以上步驟我們就可以完成一個簡單的報表展示，完整代碼及圖表效果如下圖所示：

ECharts的基本使用

1、樣式文件的使用

下載的ECharts包中文件夾theme下包含的Echarts提供的js樣式文件：

dark、infographic、macarons、roma、shine、vintage

1）引入樣式文件

初始化時指定那種樣式就引入那種樣式的js文件，此處我們引入dark，infographic樣式。

<scriptsrc="js/theme/dark.js"></script>

<scriptsrc="js/theme/infographic.js"></script>

2）初始化時指定樣式

在初始化時我們就可以指定樣式，如下代碼所示：

// 基於準備好的dom，指定樣式dark,初始化echarts實例

var myChart =echarts.init(document.getElementById('myChart'),'dark');

效果如下圖：

// 基於準備好的dom，指定樣式infographic,初始化echarts實例

var myChart =echarts.init(document.getElementById('myChart'),'infographic');

效果如下圖：

2、鼠標懸停時展示形式的更改

當鼠標在圖表中停留時會彈出框展示數值，其默認的形式，如下圖所示：

圖中的灰色框就是彈出的數值展示形式，這樣形式經常滿足不了我們的需求，此時我們可以對其進行修改，修改option中的定義的tooltip項，代碼如下：

修改後的效果如下圖:

3、自定義圖表顏色

示例中的柱狀圖顏色是默認的紅色，當我們要修改我們定義的顏色時，需要修改option中的定義的series項列表中修改各個元素展示的顏色，代碼如下：

此處代碼的意義為將圖表展示為橘黃色，效果如下圖所示：

4、橫向展示

在上面的示例中將option中xAxis，yAxis屬性互換，其效果如下圖所示：

5、定義工具欄

示例中未定義工具欄，我們可以定義工具欄來提供一些功能，如將圖表另存為圖片，展示詳細數據，切換為折線圖展示等等；此時我們要定義option中的toolbox屬性，代碼如下：

定義好後在圖表的右上角會展示工具欄，如下圖所示：

點擊工具欄中”切換為折線圖”按鈕，圖表會切換為折線圖，如下圖所示：

點擊工具欄中”數據視圖”按鈕，會展示數據詳情，如下圖所示：

6、多數據項展示

當要在一張圖表中展示多數據項時，比如同時展示週一多種產品的銷量時，我們只需要增加option中的定義的series項列表中的元素即可，如下圖代碼所示：

圖表效果如下圖所示：

7、數據動態加載

示例中我們都是使用靜態數據來展示圖表，實際項目中都需要後臺生成圖表數據，前端進行圖表的展示，我們一般需要從後臺請求xAxis和series中元素data數據，如下圖所示：

引入jquery，使用ajax請求數據，如下圖代碼所示：

小結

以上主要介紹的ECharts的入門和基本使用，更多ECharts知識大家可以查看ECharts的官網（https://echarts.baidu.com）。需要文中示例代碼的同學可以關注我們的同名微信公眾號“麻辣軟硬件”，回覆“echarts”獲取示例代碼下載地址進行下載。