ECharts 樣式設(shè)置介紹

色主題

ECharts4 開始，除了默認(rèn)主題外，內(nèi)置了兩套主題，分別為 light 和 dark。

使用方式如下：

實(shí)例

裝

npm install echarts@4.8.0 --save

man.js 全局引入

// 安裝echarts圖
import echarts from 'echarts'
Vue.prototype.$echarts=echarts

html 代碼

<div id="myChart" :style="{width: '100%', height: '100%'}"></div>

js 代碼

么是ECharts

ECharts是由百度基于html5 Canvas打造的數(shù)據(jù)可視化圖表，使用 JavaScript 實(shí)現(xiàn)的開源可視化庫。提供了直觀，生動，可交互，可高度個性化定制的數(shù)據(jù)可視化圖表，賦予了用戶對數(shù)據(jù)進(jìn)行挖掘、整合的能力。ECharts支持折線圖、柱狀圖、散點(diǎn)圖、K線圖、餅圖、雷達(dá)圖、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時(shí)提供標(biāo)題、詳情、氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時(shí)間軸、工具箱等可交互組件，豐富了圖表的展現(xiàn)形式并增強(qiáng)了用戶體驗(yàn)。

安裝ECharts

在Vue中使用ECharts可以直接通過npm來安裝echarts及依賴包，添加--save或者-S參數(shù)將其添加到package.json配置文件中。當(dāng)前最新版為echarts4.9.0，3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方維護(hù)的。如果遇到無法下載或者下載很慢的話建議使用國內(nèi)的淘寶鏡像，不懂的可以參考文章：【Vue實(shí)戰(zhàn)059：NPM配置國內(nèi)鏡像源及使用】。

全局引入ECharts

安裝ECharts之后我們就可以在main.js中引入該組件了，并通過vue.prototype來注冊全局組件，這樣就可以在整個項(xiàng)目中使用ECharts了。

創(chuàng)建ECharts圖表

新建一個Echarts.vue組件，在組件中定義一個div來承載Echarts圖表。通過ref、id或class任一屬性定義一個標(biāo)簽來掛載echarts元素，通過echarts的setOption屬性我們可以為該圖表來賦值。setOption可以定義標(biāo)題、詳情、氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時(shí)間軸等等信息，具體內(nèi)容可以根據(jù)你要顯示的圖表來決定。最后在mounted生命周期函數(shù)中實(shí)例化該echarts對象，就可以將echarts掛載到頁面中了。

按需引入ECharts

全局引入ECharts非常的方便，但是該方式會加載ECharts所有圖表和組件，build時(shí)也會將所有的echarts圖表打包導(dǎo)致體積過大直接影響運(yùn)行效率。如果我們用到的圖表不多完全沒必要全局引入，可以在需求的組件中按需引入ECharts。比如我們上面顯示的柱狀圖，我們完全可以直接引入echarts中的bar組件來實(shí)現(xiàn)。

ECharts效果展示

通過上面的元素創(chuàng)建并配置，成功將ECharts掛載到了div元素中。我們在前端就可以看到如下的顯示效果，顯示的圖表類型在option中通過series中的type指定為bar（柱狀圖）。

ECharts參數(shù)設(shè)置技巧

在ECharts中有很多的參數(shù)選項(xiàng)，很容易搞混淆。最簡單的方式就是進(jìn)入ECharts官網(wǎng)，在官網(wǎng)中找到你想要的ECharts模板。在模板的左側(cè)就會提供該示例的option參數(shù)設(shè)置，我們可以對照右圖中的顯示效果修改好之后直接復(fù)制到我們的項(xiàng)目中來。

總結(jié)：

ECharts幾乎?涵蓋各行業(yè)圖表，基本上可以滿足開發(fā)中的各種需求。隨著大數(shù)據(jù)的到來，可視化圖表備受青睞！學(xué)會ECharts還是很有必要的哦，以上內(nèi)容是小編給大家分享的【Vue實(shí)戰(zhàn)090：Vue使用ECharts圖表詳解】。希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。更多Vue實(shí)戰(zhàn)技巧可以參考以下專欄：

為了方便學(xué)習(xí)，下面附上本文用到的源碼：

在線咨詢

上一篇：python 畫圖-餅圖
下一篇：如何編寫一個原生 Web Components 組件

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商