在Vue中使用echarts的方法

更新時間：2018年02月05日 10:38:45 作者：小人物的秘密花園

這篇文章主要介紹了Vue中使用echarts的方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下

上篇文章給大家介紹了在 webpack 中使用 ECharts的實例詳解，可以點擊查看。

1. 使用NPM安裝（全局引入）

執(zhí)行下面的命令：

npm install echarts--save

引入echarts模塊

在Vue項目的main.js中引入echarts模塊，即是寫入如下代碼：

import echarts from 'echarts'
Vue.prototype.$echarts = echarts；

2. 按需引入

上面全局引入會將所有的echarts圖表打包，導致體積過大，我解決這一問題，可以使用require按需引入即是需要什么就引入什么：

即是：

let echarts = require('echarts/lib/echarts')

3. 直接引用

在index.html文件中全局引入，使用script標簽引入

<script src="/static/js/echarts/echarts.js"></script>

注意：src中寫入echarts的路徑；

然后再vue項目build目錄下找到webpack.base.conf.js，配置文件，在module.exports對象中添加externals屬性，然后配置echarts所在的路徑：

module.exports = {
.....
externals: {
// 路徑：命名空間
 'echarts/dist/echarts':'echarts',
}
}；

總結

以上所述是小編給大家介紹的在Vue中使用echarts的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

vue
echarts

Vue項目三級聯(lián)動路由跳轉與傳參的思路詳解
這篇文章主要介紹了Vue項目三級聯(lián)動的路由跳轉與傳參的思路詳解,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-08-08
使用Vite處理css?less及postcss示例詳解
這篇文章主要為大家介紹了使用Vite處理css?less及postcss的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
vue中常用的縮寫方式
這篇文章主要介紹了vue中常用的縮寫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue打包時不刪除dist里的原有文件配置方法
這篇文章主要為大家介紹了vue打包時不刪除dist里的原有文件配置方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-11-11
vscode下的vue文件格式化問題
這篇文章主要介紹了vscode下的vue文件格式化問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-11-11
Vue3 ref構建響應式變量失效問題及解決
這篇文章主要介紹了Vue3 ref構建響應式變量失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
element?ui中el-form-item的屬性rules的用法示例小結
這篇文章主要介紹了element?ui中el-form-item的屬性rules的用法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧
2024-07-07
Animate.css在vue中的使用方式
這篇文章主要介紹了Animate.css在vue中的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vue在項目中如何引入本地Json數(shù)據(jù)
這篇文章主要介紹了Vue在項目中如何引入本地Json數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
Vue3響應式高階用法之markRaw()的使用
在Vue3中,markRaw()用于防止對象被轉換為響應式,適用于管理大型庫對象或靜態(tài)數(shù)據(jù),有助于優(yōu)化性能和防止不必要的修改,本文就來詳細的介紹一下,感興趣的可以了解一下
2024-09-09