關於將ECharts引入至項目中的幾種方式

方式一：模塊化包引入

如果你的項目本身就是模塊化的，那引入echarts將很簡單，只需要配置好packet路徑指向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'
        }
    ]
});

方式二：模塊化單文件引入（推薦）

我們建議你使用單一文件引入，如你所發現的，build文件夾下已經生成了多個單文件見下，根據你的需求使用：

1、echarts.js : 經過壓縮，包含除地圖外的全部圖表

2、echarts-original.js : 未壓縮，可用於調試，包含除地圖外的全部圖表

3、echarts-map.js : 經過壓縮，全圖表，包含world，china以及34個省市級地圖數據

4、echarts-original-map.js : 未壓縮，可用於調試，全圖表，包含world，china以及34個省市級地圖數據

如果需要更加定制的打包文件，建議在node環境下安裝require.js，build文件夾內為你准備好配置項，可根據你的項目需求，修改config-tpl.js以構建你的最佳配置。

采用單一文件使用例子見ECharts單一文件引入，存放在example/www下，你需要配置如下：

 

//from echarts example
require.config({
    paths:{ 
        'echarts:'./js/echarts',
        'echarts/chart/bar' : './js/echarts',       // 把所需圖表指向單文件
        'echarts/chart/line': './js/echarts'
    }
});

 

//from echarts example
require(
    [
        'echarts',
        'echarts/chart/line',   // 按需加載所需圖表
        'echarts/chart/bar'
    ],
    function (ec) {
        var myChart = ec.init(domMain);
        var option = {
            ...
        }
        myChart.setOption(option);
    }
);

總結來說，模塊化如何引入ECharts，你都需要如下4步：

1、引入一個模塊加載器，如esl.js或者require.js

2、為ECharts准備一個具備大小（寬高）的Dom（當然可以是動態生成的）

3、為模塊加載器配置echarts的路徑，從當前頁面鏈接到echarts.js，見上述說明

4、動態加載echarts然后在回調函數中開始使用（容我羅嗦一句，當你確保同一頁面已經加載過echarts，再使用時直接require('echarts').init(dom)就行）

方式三：標簽式單文件引入

 

自1.3.5開始，ECharts提供標簽式引入。如果你 的項目本身並不是基於模塊化開發的，或者是基於CMD規范（如使用的是seajs），那么引入基於AMD模塊化的echarts可能並不方便，我們建議你 采用srcipt標簽式引入，忘掉require，srcipt標簽引入echarts后將可以直接使用兩個全局的命名空 間：echarts，zrender，可參考ECharts標簽式引入

//from echarts example
< script src="example/www2/js/echarts-plain.js" data-ke-src="example/www2/js/echarts-plain.js" > < /script>
< script >
    var myChart = echarts.init(domMain);
    var option = {
        ...
    }
    myChart.setOption(option);
< /script>

可以直接引入的單文件如下：

1、echarts-plain.js : 經過壓縮，包含除地圖外的全部圖表

2、echarts-plain-original.js : 未壓縮，可用於調試，包含除地圖外的全部圖表

3、echarts-plain-map.js : 經過壓縮，全圖表，包含world，china以及34個省市級地圖數據

4、echarts-plain-original-map.js : 未壓縮，可用於調試，全圖表，包含world，china以及34個省市級地圖數據