echarts自適應(yīng)

ECharts介紹

ECharts入門教程

第一步：下載并引入scharts.js文件

第二步：編寫代碼

目錄結(jié)構(gòu)編寫index.html代碼效果展示

ECharts的基礎(chǔ)配置

主要配置（常用的）案例講解

補(bǔ)充

示例鏈接立即執(zhí)行函數(shù)讓圖表跟隨屏幕自適應(yīng)ECharts介紹

ECharts是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫(kù)，可以流暢地運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫(kù) ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

通俗的理解：

是一個(gè)JS插件

性能好可流暢運(yùn)行PC與移動(dòng)設(shè)備

兼容主流瀏覽器

提供很多常用圖表【折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖】，且可定制（支持自定義）

ECharts入門教程第一步：下載并引入scharts.js文件

1、點(diǎn)擊Dist跳轉(zhuǎn)到Github。

2、點(diǎn)擊點(diǎn)進(jìn)去

3、右鍵單擊Raw，選擇鏈接另存為

4、這樣我們就得到了需要的文件

簡(jiǎn)單粗暴的方式：當(dāng)上面的第一步后第二步直接點(diǎn)擊code然后下載壓縮包，簡(jiǎn)單直接，再在里面找到我們需要的文件即可。

打開壓縮包，找到需要的文件引入到我們項(xiàng)目的js文件夾即可

第二步：編寫代碼目錄結(jié)構(gòu)編寫index.html代碼

根據(jù)上面的步驟2至步驟5編寫代碼。

index.html：

效果展示ECharts的基礎(chǔ)配置

在官網(wǎng)給出了我們?cè)S多示例：鏈接

我們都可以直接拿來用，但是里面的一些配置我們可以根據(jù)自己的需求來修改，所以我們需要了解ECharts的基礎(chǔ)配置。

主要配置（常用的）

需要了解的主要配置：ries xAxis yAxis grid tooltip title legend color

ries

– 系列列表。每個(gè)系列通過 type 決定自己的圖表類型

– 通俗的理解：圖表數(shù)據(jù)，指定什么類型的圖標(biāo)，可以多個(gè)圖表重疊。

xAxis：直角坐標(biāo)系 grid 中的 x 軸

– boundaryGap: 坐標(biāo)軸兩邊留白策略 true，這時(shí)候刻度只是作為分隔線，標(biāo)簽和數(shù)據(jù)點(diǎn)都會(huì)在兩個(gè)刻度之間的帶(band)中間。

yAxis：直角坐標(biāo)系 grid 中的 y 軸

grid：直角坐標(biāo)系內(nèi)繪圖網(wǎng)格。

title：標(biāo)題組件

tooltip：提示框組件

legend：圖例組件

color：調(diào)色盤顏色列表

stack：數(shù)據(jù)堆疊，同個(gè)類目軸上系列配置相同的stack之后 后一個(gè)系列的值會(huì)在前一個(gè)系列的值上相加。

關(guān)于更多的配置項(xiàng)參考官方文檔，十分具體。

案例講解

接下來，通過修改官方示例中的例子折線圖堆疊，來熟悉配置項(xiàng)。

修改前的樣式：

修改后的代碼：

修改后的樣式：

補(bǔ)充

示例鏈接

立即執(zhí)行函數(shù)

為了防止變量污染，減少命名沖突，我們可以采用立即執(zhí)行函數(shù)的寫法，因?yàn)榱⒓磮?zhí)行函數(shù)里的變量都是局部變量。

我們需要var很多option ，我們采用立即執(zhí)行函數(shù)包起來就不會(huì)產(chǎn)生命名沖突了。

格式如下：

讓圖表跟隨屏幕自適應(yīng)

以上就是ECharts實(shí)現(xiàn)數(shù)據(jù)可視化入門教程（超詳細(xì)）的全部?jī)?nèi)容。

看完如果對(duì)你有幫助，感謝點(diǎn)贊支持！如果你是電腦端的話，看到右下角的 “一鍵三連” 了嗎，沒錯(cuò)就是它[哈哈]