在Vue中使用echarts的方法
上篇文章給大家介紹了 在 webpack 中使用 ECharts的實(shí)例詳解 ，可以點(diǎn)擊查看。
1. 使用NPM安裝（全局引入）
執(zhí)行下面的命令：
npm install echarts--save
引入echarts模塊
在Vue項(xiàng)目的main.js中引入echarts模塊，即是寫入如下代碼：
import echarts from 'echarts' Vue.prototype.$echarts = echarts；
2. 按需引入
上面全局引入會(huì)將所有的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項(xiàng)目build目錄下找到webpack.base.conf.js，配置文件，在module.exports對(duì)象中添加externals屬性，然后配置echarts所在的路徑：
module.exports = {
.....
externals: {
// 路徑：命名空間
'echarts/dist/echarts':'echarts',
}
}；
總結(jié)
以上所述是小編給大家介紹的在Vue中使用echarts的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 詳解Vue中使用Echarts的兩種方式
- 使用Vue開發(fā)動(dòng)態(tài)刷新Echarts組件的教程詳解
- vue結(jié)合Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果的示例
- vue中echarts3.0自適應(yīng)的方法
- 在vue中通過axios異步使用echarts的方法
- 解決vue 路由變化頁(yè)面數(shù)據(jù)不刷新的問題
- 詳解刷新頁(yè)面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁(yè)面的解決
- vue使用keep-alive實(shí)現(xiàn)數(shù)據(jù)緩存不刷新
- 關(guān)于頁(yè)面刷新vuex數(shù)據(jù)消失問題解決方案
- 解決VUEX刷新的時(shí)候出現(xiàn)數(shù)據(jù)消失
- vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能
相關(guān)文章
這篇文章主要介紹了Vue中的filter與directive的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
這篇文章主要介紹了Vue的編碼技巧與規(guī)范使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue3中的ref,toRef,toRefs三個(gè)的作用使用小結(jié)
Vue3中ref、reactive、toRef、toRefs都是與響應(yīng)式數(shù)據(jù)相關(guān)的，就此做一份筆記作為區(qū)別，本文重點(diǎn)給大家講解vue3中的ref，toRef，toRefs三個(gè)是干嘛的，有什么作用，感興趣的朋友跟隨小編一起看看吧2022-11-11
Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng),比如通過JSON文件生成對(duì)應(yīng)的區(qū)域下拉框，element-china-are插件，包括distpicker插件，通過代碼講解如何使用distpicker插件實(shí)現(xiàn)省市級(jí)三聯(lián)跳動(dòng)，需要的朋友可以參考下2023-02-02
今天小編就為大家分享一篇Vue 監(jiān)聽列表item渲染事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
快速解決vue在ios端下點(diǎn)擊響應(yīng)延時(shí)的問題
今天小編就為大家分享一篇快速解決vue在ios端下點(diǎn)擊響應(yīng)延時(shí)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了解決threeJS加載obj?gltf模型后顏色太暗的方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
詳解Vue前端生產(chǎn)環(huán)境發(fā)布配置實(shí)戰(zhàn)篇
這篇文章主要介紹了詳解Vue前端生產(chǎn)環(huán)境發(fā)布配置實(shí)戰(zhàn)篇，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
vue.js利用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
本篇文章主要介紹了用Node.js當(dāng)作后臺(tái)、jQuery寫前臺(tái)AJAX代碼實(shí)現(xiàn)用戶登錄和注冊(cè)的功能的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
在Vue中實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮
這篇文章主要介紹了在Vue中實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮的方法，文中還通過實(shí)例代碼給大家介紹了vue關(guān)于點(diǎn)擊菜單高亮與組件切換的相關(guān)知識(shí),需要的朋友可以參考下2020-03-03