最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

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

ECharts 安裝

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

1. 簡(jiǎn)介

圖片描述

幾個(gè)主要版本分別為：

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

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

3. CDN

可以通過(guò) CDN 引入 ECharts 文件：

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

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

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

<!-- cdnjs 服務(wù) -->
<!-- 一個(gè)非常全的CDN服務(wù)，存儲(chǔ)了大多數(shù)主流的js、css、圖片庫(kù) -->
<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';

上述語(yǔ)句引入 node_modules/echarts/index.js 文件，默認(rèn)包含 ECharts 圖表和組件。根據(jù)項(xiàng)目需求，可以選擇引入不同版本：

// 默認(rèn)引入完整版
import echarts from 'echarts';

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

// 引入精簡(jiǎn)版
import * as echarts from 'echarts/echarts.simple.js';

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

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

// 引入柱狀圖
import 'echarts/lib/chart/bar';
// 引入標(biāo)題組件
import 'echarts/lib/component/title';

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

5. 個(gè)人經(jīng)驗(yàn)

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

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

6. 小結(jié)

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