色主題

ECharts4 開始，除了默認主題外，內置了兩套主題，分別為 light 和 dark。

使用方式如下：

實例

裝

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打造的數據可視化圖表，使用 JavaScript 實現的開源可視化庫。提供了直觀，生動，可交互，可高度個性化定制的數據可視化圖表，賦予了用戶對數據進行挖掘、整合的能力。ECharts支持折線圖、柱狀圖、散點圖、K線圖、餅圖、雷達圖、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題、詳情、氣泡、圖例、值域、數據區域、時間軸、工具箱等可交互組件，豐富了圖表的展現形式并增強了用戶體驗。

安裝ECharts

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

全局引入ECharts

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

創建ECharts圖表

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

按需引入ECharts

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

ECharts效果展示

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

ECharts參數設置技巧

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

總結：

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

為了方便學習，下面附上本文用到的源碼：