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

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

ECharts 安裝

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

1. 簡介

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

慕課解釋：

  1. 除官網(wǎng)提供的兩種安裝方式外，還可以選擇使用各類免費的 CDN 服務(wù)，以獲得更佳的 HTTP 性能。
  2. 官網(wǎng)提供了簡潔的安裝示例，但并沒有詳細介紹各編譯版本之間的區(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 的是對應(yīng)版本的英文版；名字帶 min 的是對應(yīng)版本的壓縮版。下載完成后，需要在頁面使用 <script src="echarts.js"></script> 標簽引入代碼文件。

3. CDN

可以通過 CDN 引入 ECharts 文件：

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

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

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

<!-- cdnjs 服務(wù) -->
<!-- 一個非常全的CDN服務(wù)，存儲了大多數(shù)主流的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 圖表和組件。根據(jù)項目需求，可以選擇引入不同版本：

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

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

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

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

// 引入基礎(chǔ)模塊
import echarts from 'echarts/lib/echarts';

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

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

5. 個人經(jīng)驗

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

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

6. 小結(jié)

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