1. 獲取 ECharts
可以通過以下幾種方式獲取 ECharts垂涯。
從 Apache ECharts (incubating) 官網(wǎng)下載界面 獲取官方源碼包后構(gòu)建。
在 ECharts 的 GitHub 獲取凉唐。
通過 npm 獲取 echarts座菠，
npm install echarts --save通過 jsDelivr 等 CDN 引入
2. 引入 ECharts
通過標(biāo)簽方式直接引入構(gòu)建好的 echarts 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
3. 繪制一個簡單的圖表
在繪圖前我們需要為 ECharts 準(zhǔn)備一個具備高寬的 DOM 容器台夺。
<body>
<!-- 為 ECharts 準(zhǔn)備一個具備大屑颉（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通過 echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大型咨（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表遏片。
myChart.setOption(option);
</script>
</body>
</html>
運(yùn)行效果：
說明：
echarts
全局 echarts 對象嘹害，在 script 標(biāo)簽引入 echarts.js 文件后獲得，或者在 AMD 環(huán)境中通過 require('echarts') 獲得吮便。
創(chuàng)建一個 ECharts 實例笔呀，返回 echartsInstance，不能在單個容器上初始化多個 ECharts 實例髓需。
參數(shù)
-
dom
實例容器许师，一般是一個具有高寬的div元素。注：如果
div是隱藏的，ECharts 可能會獲取不到div的高寬導(dǎo)致初始化失敗枯跑，這時候可以明確指定div的style.width和style.height惨驶，或者在div顯示后手動調(diào)用 echartsInstance.resize 調(diào)整尺寸。ECharts 3 中支持直接使用
canvas元素作為容器敛助，這樣繪制完圖表可以直接將 canvas 作為圖片應(yīng)用到其它地方粗卜，例如在 WebGL 中作為貼圖，這跟使用 echartsInstance.getDataURL 生成圖片鏈接相比可以支持圖表的實時刷新纳击。 theme
應(yīng)用的主題续扔。可以是一個主題的配置對象焕数，也可以是使用已經(jīng)通過 echarts.registerTheme 注冊的主題名稱纱昧。-
opts
附加參數(shù)。有下面幾個可選項：devicePixelRatio
設(shè)備像素比堡赔，默認(rèn)取瀏覽器的值window.devicePixelRatio识脆。renderer
渲染器，支持'canvas'或者'svg'善已。參見 使用 Canvas 或者 SVG 渲染灼捂。width
可顯式指定實例寬度，單位為像素换团。如果傳入值為null/undefined/'auto'悉稠，則表示自動取dom（實例容器）的寬度。height
可顯式指定實例高度艘包，單位為像素的猛。如果傳入值為null/undefined/'auto'，則表示自動取dom（實例容器）的高度想虎。
echartsInstance
通過 echarts.init 創(chuàng)建的實例卦尊。
設(shè)置圖表實例的配置項以及數(shù)據(jù)，萬能接口舌厨，所有參數(shù)和數(shù)據(jù)的修改都可以通過
setOption 完成岂却，ECharts 會合并新的參數(shù)和數(shù)據(jù)，然后刷新圖表邓线。如果開啟動畫的話淌友，ECharts 找到兩組數(shù)據(jù)之間的差異然后通過合適的動畫去表現(xiàn)數(shù)據(jù)的變化煌恢。
注： ECharts 2.x 中的通過 addData , setSeries 方法設(shè)置配置項的方式將不再支持骇陈，在 ECharts 3 中統(tǒng)一使用 setOption，可以參考上面示例瑰抵。
參數(shù)：
調(diào)用方式：
chart.setOption(option, notMerge, lazyUpdate);
或者
chart.setOption(option, {
notMerge: ...,
lazyUpdate: ...,
silent: ...
});
option
圖表的配置項和數(shù)據(jù)你雌，具體見配置項手冊。notMerge
可選，是否不跟之前設(shè)置的option進(jìn)行合并婿崭，默認(rèn)為false拨拓，即合并。lazyUpdate
可選氓栈，在設(shè)置完option后是否不立即更新圖表渣磷，默認(rèn)為false，即立即更新授瘦。silent
可選醋界，阻止調(diào)用setOption時拋出事件，默認(rèn)為false提完，即拋出事件形纺。
