vue-echarts在vue中的使用

• 2019 年 10 月 11 日
• 筆記

安裝依賴：

【win】npm install echarts vue-echarts  【mac】sudo npm install echarts vue-echarts

Vue-ECharts 默認在 webpack 環境下會引入未編譯的源碼版本，Vue CLI 創建項目可能會遇到默認配置把 node_modules 中的文件排除在 Babel 轉譯範圍以外的問題。 修復方法是在vue.config.js中添加如下代碼：

1 // For Vue CLI 3+, add vue-echarts and resize-detector into transpileDependencies in vue.config.js like this:  2 transpileDependencies: [  3     'vue-echarts',  4     'resize-detector'  5 ]

引入：

import ECharts from 'vue-echarts'

各零件按需加載，手動引入 ECharts 各模塊來減小打包體積：

import "echarts/lib/chart/line"; // 線圖  import "echarts/lib/chart/bar"; // 柱圖  import 'echarts/lib/component/legend' // 圖例  import 'echarts/lib/component/tooltip' //提示框

etc…

註冊：

Vue.component('myEchart', ECharts)

使用組件：

<myEchart :options="echartsOptions" ref="myCharts" />

vue-echarts的options設置基本同echarts，配置文檔看echarts官網即可。