第一步
獲取echarts
1：從官網(wǎng)下載界面選擇你需要的版本下載，根據(jù)開發(fā)者功能和體積上的需求，我們提供了不同打包的下載，如果你在體積上沒有要求，可以直接下載完整版本。開發(fā)環(huán)境建議下載源代碼版本，包含了常見的錯(cuò)誤提示和警告。
2：在 ECharts 的 GitHub 上下載最新的 release
版本，解壓出來的文件夾里的 dist
目錄里可以找到最新版本的 echarts 庫(kù)。
3：通過 npm 獲取 echarts，npm install echarts --save
，詳見“在 webpack 中使用 echarts”
4：cdn 引入，你可以在 cdnjs，npmcdn 或者國(guó)內(nèi)的 bootcdn 上找到 ECharts 的最新版本
【注意】
ECharts 3 開始不再?gòu)?qiáng)制使用 AMD 的方式按需引入，代碼里也不再內(nèi)置 AMD 加載器。因此引入方式簡(jiǎn)單了很多，只需要像普通的 JavaScript 庫(kù)一樣用 script 標(biāo)簽引入。
第二部
引入 ECharts.js 因?yàn)槲沂莕pm下載的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
第三步
繪制一個(gè)簡(jiǎn)單的圖表
在繪圖前我們需要為 ECharts 準(zhǔn)備一個(gè)具備高寬的 DOM 容器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="node_modules/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
Webpack使用
Webpack 是目前比較流行的模塊打包工具，你可以在使用 webpack 的項(xiàng)目中輕松的引入和打包 ECharts，這里假設(shè)你已經(jīng)對(duì) webpack 具有一定的了解并且在自己的項(xiàng)目中使用。
npm 安裝 ECharts
在 3.1.1
版本之前 ECharts 在 npm 上的 package 是非官方維護(hù)的，從 3.1.1
開始由官方 EFE 維護(hù) npm 上 ECharts 和 zrender 的 package。
你可以使用如下命令通過 npm 安裝 ECharts
第一步
npm install echarts --save
第二步
引入 ECharts
通過 npm 上安裝的 ECharts 和 zrender 會(huì)放在node_modules目錄下?？梢灾苯釉陧?xiàng)目代碼中
var echarts = require('echarts');//得到 ECharts。
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 繪制圖表
myChart.setOption({
title: { text: 'ECharts 入門示例' },
tooltip: {},
xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] },
yAxis: {},
series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]
});
第二種
按需引入 ECharts 圖表和組件
默認(rèn)使用 require('echarts')
得到的是已經(jīng)加載了所有圖表和組件的 ECharts 包，因此體積會(huì)比較大，如果在項(xiàng)目中對(duì)體積要求比較苛刻，也可以只按需引入需要的模塊。
例如
上面示例代碼中只用到了柱狀圖，提示框和標(biāo)題組件，因此在引入的時(shí)候也只需要引入這些模塊，可以有效的將打包后的體積從 400 多 KB 減小到 170 多 KB。
// 引入 ECharts 主模塊
var echarts = require('echarts/lib/echarts');
// 引入柱狀圖
require('echarts/lib/chart/bar')；
// 引入提示框和標(biāo)題組件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// 基于準(zhǔn)備好的dom，
初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'))；
// 繪制圖表
myChart.setOption({
title: { text: 'ECharts 入門示例' },
tooltip: {},
xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] },
yAxis: {},
series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]
});
可以按需引入的模塊列表見 https://github.com/ecomfe/echarts/blob/master/index.js
對(duì)于另一個(gè)流行的模塊打包工具 browserify 也是同樣的用法，這里就不贅述了。
待更新。。。。。
