在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圖表打包，導(dǎo)致體積過大，我解決這一問題，可以使用require按需引入即是需要什么就引入什么：
即是：
let echarts = require('echarts/lib/echarts')
3. 直接引用
在index.html文件中全局引入，使用script標(biāo)簽引入
<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',
}
}；
總結(jié)
以上所述是小編給大家介紹的在Vue中使用echarts的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- 詳解Vue中使用Echarts的兩種方式
- 使用Vue開發(fā)動態(tài)刷新Echarts組件的教程詳解
- vue結(jié)合Echarts實現(xiàn)點擊高亮效果的示例
- vue中echarts3.0自適應(yīng)的方法
- 在vue中通過axios異步使用echarts的方法
- 解決vue 路由變化頁面數(shù)據(jù)不刷新的問題
- 詳解刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面的解決
- vue使用keep-alive實現(xiàn)數(shù)據(jù)緩存不刷新
- 關(guān)于頁面刷新vuex數(shù)據(jù)消失問題解決方案
- 解決VUEX刷新的時候出現(xiàn)數(shù)據(jù)消失
- vue.js中使用echarts實現(xiàn)數(shù)據(jù)動態(tài)刷新功能
相關(guān)文章
Vue項目三級聯(lián)動路由跳轉(zhuǎn)與傳參的思路詳解
這篇文章主要介紹了Vue項目三級聯(lián)動的路由跳轉(zhuǎn)與傳參的思路詳解,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要為大家介紹了使用Vite處理css?less及postcss的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue中常用的縮寫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了vue打包時不刪除dist里的原有文件配置方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-11-11
這篇文章主要介紹了vscode下的vue文件格式化問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
Vue3 ref構(gòu)建響應(yīng)式變量失效問題及解決
這篇文章主要介紹了Vue3 ref構(gòu)建響應(yīng)式變量失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
element?ui中el-form-item的屬性rules的用法示例小結(jié)
這篇文章主要介紹了element?ui中el-form-item的屬性rules的用法,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07
這篇文章主要介紹了Animate.css在vue中的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue在項目中如何引入本地Json數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue3響應(yīng)式高階用法之markRaw()的使用
在Vue3中,markRaw()用于防止對象被轉(zhuǎn)換為響應(yīng)式,適用于管理大型庫對象或靜態(tài)數(shù)據(jù),有助于優(yōu)化性能和防止不必要的修改,本文就來詳細(xì)的介紹一下,感興趣的可以了解一下2024-09-09