全棧工程師開發手冊 （作者：欒鵬）

Echarts簡介

6個公共元件：
Echarts工具的完整使用包括title標題、tooltip提示框、toolbox工具欄、legend圖例、dataZoom縮放控制、visualMap視覺對映，6個公共元件。

5種座標系引數配置：
包括geo地理座標系、grid直角座標系、parallel平行座標系、polar極座標系、radar雷達座標系，5種座標系引數配置。

19種類型的資料圖表：
包括bar柱形圖、effectscatter特效散點圖、graph關係圖、heatmap熱力圖、lines線圖、map地圖、pie餅圖、radar雷達圖、scatter散點圖、treemap樹形圖、boxplot箱盒圖、Candlestick股票K線圖、sankey桑基圖、funnel漏斗圖、gauge儀表盤、pictorialBar象形柱圖、themeRiver主題河流，19種類型的資料圖表。

今天我們就詳細介紹一下Echart從安裝入門到所有公共元件。後面的文章我們會詳述5種座標系和19種圖表型別。筆者為大家方便，將所有內容寫成demo，並配有完美註釋。有需要的請留下郵箱。

安裝 Echarts：

Echarts的引入比較麻煩，需要引入的外掛較多。

<script type="text/javascript" src="js/echarts-all-3.js"></script>
<script type="text/javascript" src="js/extension/dataTool.min.js"></script>
<script type="text/javascript" src="js/extension/jquery-2.2.4.js"></script>
<script type="text/javascript" src="js/map/js/china.js"></script>
<script type="text/javascript" src="js/map/js/world.js"></script>
<script type="text/javascript" src="js/api.js"></script>
<script type="text/javascript" src="js/extension/bmap.min.js"></script>
 

Echarts 配置語法

html頁面新增圖表容器

<div id="set" style="height: 100%"></div>

js程式碼繫結容器與配置引數。

dom = document.getElementById("set");
var myChart = echarts.init(dom);
option={
title:mytitle,
tooltip:mytooltip,
toolbox:mytoolbox
...
};
myChart.setOption(option);

title：標題元件

tooltip：提示框元件

tooltip用於設定當滑鼠滑向資料點時顯示的提示框資訊。

toolbox：工具欄元件

toolbox用於設定圖表工具欄樣式內容，儲存圖片、圖表切換、是否縮放等。

legend：圖例元件

legend用於設定圖例相關屬性。

dataZoom：區域縮放元件

dataZoom控制資料圖表的縮放形式、縮放大小等。

visualMap：視覺對映元件

visualMap視覺對映元件，用於進行『視覺編碼』，也就是將資料對映到視覺元素。視覺元素可以是：symbol: 圖元的圖形類別。symbolSize: 圖元的大小。color: 圖元的顏色。colorAlpha: 圖元的顏色的透明度。opacity: 圖元以及其附屬物（如文字標籤）的透明度。colorLightness: 顏色的明暗度。colorSaturation: 顏色的飽和度。colorHue: 顏色的色調。