ECharts 安裝

1、獨立版本

我們可以在直接下載 echarts.min.js 並用 <script> 標籤引入。

echarts.min.js

另外，開發環境下可以使用源代碼版本 echarts.js 並用 <script> 標籤引入，源碼版本包含了常見的錯誤提示和警告。

echarts.js

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

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

  • 完全版：echarts/dist/echarts.js，體積最大，包含所有的圖表和組件，所包含內容參見：echarts/echarts.all.js。
  • 常用版：echarts/dist/echarts.common.js，體積適中，包含常見的圖表和組件，所包含內容參見：echarts/echarts.common.js。
  • 精簡版：echarts/dist/echarts.simple.js，體積較小，僅包含最常用的圖表和組件，所包含內容參見：echarts/echarts.simple.js。

2、使用 CDN 方法

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

Staticfile CDN（國內）

<!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div>

百度

<!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div>

cdnjs

<!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div>

3、NPM 方法

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

npm 版本需要大於 3.0，如果低於此版本需要升級它：

# 查看版本
$ npm -v
2.3.0

#升級 npm
cnpm install npm -g


# 升級或安裝 cnpm
npm install cnpm -g

通過 cnpm 獲取 echarts：

# 最新穩定版
$ cnpm install echarts --save

安裝完成後 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] }] });