引入ECharts
echarts提供多種引入方式，請根據妳的項目類型選擇合適的方式：
模塊化包引入
如果妳熟悉模塊化開發，妳的項目本身就是模塊化且遵循AMD規範的，那引入echarts將很簡單，使用壹個符合AMD規範的模塊加載器，如esl.js，只需要配置好packages路徑指向src即可，妳將享受到圖表的按需加載等最大的靈活性，由於echarts依賴底層zrender，妳需要同時下載zrender到本地，可參考demo，妳需要配置如下。
需要註意的是，包引入提供了開發階段最大的靈活性，但並不適合直接上線，減少請求的文件數量是前端性能優化中最基本但很重要的規則，務必在上線時做文件的連接壓縮。
//from echarts example
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender與echarts在同壹級目錄
main: 'zrender'
}
]
});
模塊化單文件引入（推薦）
如果妳使用模塊化開發但並沒有自己的打包合並環境，或者說妳不希望在妳的項目裏引入第三方庫的源文件，我們建議妳使用單文件引入，同模塊化包引入壹樣，妳需要熟悉模塊化開發。
自2.1.8起，我們為echarts開發了專門的合並壓縮工具echarts-optimizer。如妳所發現的，build文件夾下已經包含了由echarts-optimizer生成的單文件：
dist（文件夾） : 經過合並、壓縮的單文件
line.js : 折線圖（如需折柱動態類型切換，require時還需要echarts/chart/bar）
bar.js : 柱形圖（如需折柱動態類型切換，require時還需要echarts/chart/line）
scatter.js : 散點圖
k.js : K線圖
pie.js : 餅圖（如需餅漏鬥圖動態類型切換，require時還需要echarts/chart/funnel）
radar.js : 雷達圖
map.js : 地圖
force.js : 力導向布局圖（如需力導和弦動態類型切換，require時還需要echarts/chart/chord）
chord.js : 和弦圖（如需力導和弦動態類型切換，require時還需要echarts/chart/force）
funnel.js : 漏鬥圖（如需餅漏鬥圖動態類型切換，require時還需要echarts/chart/pie）
gauge.js : 儀表盤
eventRiver.js : 事件河流圖
treemap.js : 矩陣樹圖
venn.js : 韋恩圖
echarts.js : 這是包含AMD加載器的echarts主文件，需要通過script最先引入
chart（文件夾） : echarts-optimizer通過依賴關系分析同時去除與echarts.js的重復模塊後為echarts的每壹個圖表類型單獨打包生成壹個獨立文件，根據應用需求可實現圖表類型按需加載
source（文件夾） : 經過合並，但並沒有壓縮的單文件，內容同dist，可用於調試
采用單壹文件使用例子見ECharts單壹文件引入，存放在example/www下，首先妳需要通過script標簽引入echarts主文件
//from echarts example<body>
<div id="main" style="height:400px;"></div>
...
<script src="./js/echarts.js"></script>
</body>
在主文件引入後妳將獲得壹個AMD環境，配置require.conifg如下：
//from echarts example<body>
<div id="main" style="height:400px;"></div>
...
<script src="./js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist'
}
});
</script>
</body>
require.config配置後就可以通過動態加載使用echarts
//from echarts example<body>
<div id="main" style="height:400px;"></div>
...
<script src="./js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', ? // 按需加載所需圖表，如需動態類型切換功能，別忘了同時加載相應圖表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
}
);
</script>
</body>
總結來說，模塊化單文件引入ECharts，妳需要如下4步：
為ECharts準備壹個具備大小（寬高）的Dom（當然可以是動態生成的）
通過script標簽引入echarts主文件
為模塊加載器配置echarts的路徑，從當前頁面鏈接到echarts.js所在目錄，見上述說明
動態加載echarts及所需圖表然後在回調函數中開始使用（容我羅嗦壹句，當妳確保同壹頁面已經加載過echarts，再使用時直接require('echarts').init(dom)就行）
詳見入門教程 ( Getting started ) ?
標簽式單文件引入
自1.3.5開始，ECharts提供標簽式引入。如果妳的項目本身並不是基於模塊化開發的，或者是基於CMD規範（如使用的是seajs），那麽引入基於AMD模塊化的echarts可能並不方便，我們建議妳采用srcipt標簽式引入，忘掉require。Srcipt標簽引入echarts後將可以直接使用兩個全局的命名空間：echarts，zrender，可參考ECharts標簽式引入，需要註意的是excanvas依賴body標簽插入Canvas節點去判斷Canvas的支持，如果妳把引用echarts的script標簽放置head內在IE8-的瀏覽器中會出現報錯，解決的辦法就是把標簽移動到body內（後）。
標簽式引入環境中，常用模塊的引用可通過命名空間直取，同模塊化下的路徑結構，如：
echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')
//from echarts example<body>
<div id="main" style="height:400px;"></div>
...
<script src="example/www2/js/dist/echarts-all.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
</script>
</body>