第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

范文杰_fe · 更新于 2020-09-27

ECharts 安裝

從上一個小節(jié)學習，相信大家已經了解到了 ECharts 的作用以及它的優(yōu)勢。那么本小節(jié)我們就來看一下 學習 ECharts 的第一步 “安裝”。ECharts 也像其他的 JavaScript 庫那樣，它的安裝及其簡單且多種多樣，如果你想要及快速的使用，只需一行代碼就夠了！快來一起看看吧。

1. 簡介

官方解釋：
支持直接下載編譯文件或通過 npm 安裝 ECharts 包。

慕課解釋：

  1. 除官網提供的兩種安裝方式外，還可以選擇使用各類免費的 CDN 服務，以獲得更佳的 HTTP 性能。
  2. 官網提供了簡潔的安裝示例，但并沒有詳細介紹各編譯版本之間的區(qū)別，本文將就此展開討論。

2. 下載編譯包

可直接到 github 下載 ECharts 編譯文件，以 4.5.0 為例，下載地址：https://github.com/apache/incubator-echarts/tree/4.5.0/dist，打開頁面可看到多個編譯版本：

圖片描述

幾個主要版本分別為：

  1. echarts.js：完整版，壓縮后約 744KB，包含所有圖表和組件；
  2. echarts.common.js：常用版，壓縮后約 471KB，只包含常用的圖表和組件，包括： line、bar、pie、scatter；
  3. echarts.simple.js：精簡版，壓縮后約 305KB，只包含最常用的圖表和組件，包括： line、bar、pie。

剩下的文件中，名字帶 en 的是對應版本的英文版；名字帶 min 的是對應版本的壓縮版。下載完成后，需要在頁面使用 <script src="echarts.js"></script> 標簽引入代碼文件。

3. CDN

可以通過 CDN 引入 ECharts 文件：

<!-- bootstrap 服務 -->
<!-- bootstrap 提供的免費CDN服務，親測非常穩(wěn)定 -->
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>

<!-- 七牛云存儲服務 -->
<!-- 國內速度穩(wěn)定，開放性強 -->
<script src="//cdn.staticfile.org/echarts/4.5.0/echarts.common.js"></script>

<!-- jsdeliver 服務 -->
<!-- 微軟的CDN服務，雖然國內訪問速度比不上國內CDN，但速度不至于太慢，有國際化需求的可以試試 -->
<script src="//cdn.jsdelivr.net/npm/echarts@4.5.0/echarts.common.js"></script>

<!-- cdnjs 服務 -->
<!-- 一個非常全的CDN服務，存儲了大多數主流的js、css、圖片庫 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/echarts/4.5.0/echarts.common.js"></script>

4. NPM or Yarn

安裝命令：

npm install echarts

// 或
yarn add echarts

安裝完畢后，使用如下代碼引入：

// 使用commonjs：
const echarts = require('echarts');

// 支持ES6的環(huán)境也可以使用
import echarts from 'echarts';

上述語句引入 node_modules/echarts/index.js 文件，默認包含 ECharts 圖表和組件。根據項目需求，可以選擇引入不同版本：

// 默認引入完整版
import echarts from 'echarts';

// 引入常用版
import * as echarts from 'echarts/echarts.common.js';

// 引入精簡版
import * as echarts from 'echarts/echarts.simple.js';

如果上述版本均不符合需求，可選擇按需引入：

// 引入基礎模塊
import echarts from 'echarts/lib/echarts';

// 引入柱狀圖
import 'echarts/lib/chart/bar';
// 引入標題組件
import 'echarts/lib/component/title';

支持按需引入的模塊，可參考 示例。

5. 個人經驗

如果項目需求比較簡單，建議直接下載使用編譯文件。如果項目環(huán)境允許使用公共 CDN，建議使用 CDN 方式引入編譯文件，可獲得更好 HTTP 性能。如果開發(fā)環(huán)境已經配備 webpack、rollup 等工程化環(huán)境，則應優(yōu)先使用 npm安裝，并將 ECharts 與項目中使用到的其他第三方框架一起打包，減少客戶端請求數。

使用時，可根據需求，在 echarts.js、echarts.common.js、echarts.simple.js 之間選擇最合適的編譯版本。個人經驗是優(yōu)先使用 echarts.common.js，但需求無法滿足時再使用 echarts.js，如果運行環(huán)境比較苛刻，如 3G 網絡下，則自行構建最輕量級的版本，構建方式可參閱第二節(jié) ECharts 自定義構建。

6. 小結

圖片描述
本節(jié)主要介紹如何在各種環(huán)境下使用 ECharts，包括本地文件引用、CDN、npm 等方式，讀者可根據實際場景參考使用。