ECharts 安裝

我們可以在直接下載下傳 echarts.min.js 并用 <b>&lt;script&gt;</b> 标簽引入。

echarts.min.js(4.7.0)

另外，開發環境下可以使用源代碼版本 echarts.js 并用 <b>&lt;script&gt;</b> 标簽引入，源碼版本包含了常見的錯誤提示和警告。

echarts.js(4.7.0)

我們也可以在 ECharts 的官網上直接下載下傳更多豐富的版本，包含了不同主題跟語言，下載下傳位址：https://echarts.apache.org/zh/download.html。

這些建構好的 echarts 提供了下面這幾種定制：

完全版：<code>echarts/dist/echarts.js</code>，體積最大，包含所有的圖表群組件，所包含内容參見：<code>echarts/echarts.all.js</code>。

常用版：<code>echarts/dist/echarts.common.js</code>，體積适中，包含常見的圖表群組件，所包含内容參見：<code>echarts/echarts.common.js</code>。

精簡版：<code>echarts/dist/echarts.simple.js</code>，體積較小，僅包含最常用的圖表群組件，所包含内容參見：<code>echarts/echarts.simple.js</code>。

以下推薦國外比較穩定的兩個 CDN，國内還沒發現哪一家比較好，目前還是建議下載下傳到本地。

Staticfile CDN（國内） : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js

jsDelivr：https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

&lt;!-- 為ECharts準備一個具備大小（寬高）的Dom --&gt;

&lt;div id="main" style="width: 600px;height:400px;"&gt;&lt;/div&gt;

由于 npm 安裝速度慢，本教程使用了淘寶的鏡像及其指令 cnpm，安裝使用介紹參照：使用淘寶 NPM 鏡像。

npm 版本需要大于 3.0，如果低于此版本需要更新它：

通過 cnpm 擷取 echarts：

安裝完成後 ECharts 和 zrender 會放在 node_modules 目錄下，我們可以直接在項目代碼中使用 require('echarts') 來使用。

var echarts = require('echarts');

// 基于準備好的dom，初始化echarts執行個體

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]

}]

});