vue如何解決echarts升級后本地?zé)o法啟動的問題
vue解決echarts升級后本地?zé)o法啟動
1.老項目原來使用的echarts是v4版本，現(xiàn)升級至v5版本
首先根據(jù)echarts官方文檔升級
npm install echarts --save
然后修改 引用方式
import * as echarts from 'echarts';
2.完成后使用本地啟動
使用npm run serve啟動項目，出現(xiàn)報錯：
Module build failed (from ./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js):
Error: C:\Users\src\util\table-sort.js: You gave us a visitor for the node type StaticBlock but it's not a valid type at verify (C:\Users\node_modules\@vue\cli-plugin-babel\node_modules\@babel\traverse\lib\visitors.js:116:13)
3.解決方法
升級@vue\cli-plugin-babel的版本
npm install @vue\cli-plugin-babel
4.我的項目中使用了vue-video-player
升級其它插件后還經(jīng)常出現(xiàn)找不到樣式文件（video.js/dist/video-js.css），此時重裝對應(yīng)版本即可
npm i vue-video-player@5.0.2
echarts4升級echarts5升級記錄
升級后優(yōu)點，默認(rèn)樣式更好看，動效體驗更好。
缺點，容錯率降低，需要處理新版不支持的代碼
1.y周label的縱向位置調(diào)整 負(fù)值padding不生效
- 舊：
axisLabel: {
padding:[-13,0,0,0],
}
- 新：
axisLabel: {
padding:[-13,0,0,0],
verticalAlign: 'top',
}
2.自定義y軸最大值max與最小值min
- 舊：min/max寫反也能正常使用
- 新：無法正常使用
3.餅圖label位置調(diào)整到引導(dǎo)線上方
- 舊：padding左右雙邊設(shè)為負(fù)值
label: {
normal: {
textStyle: {
lineHeight: 14,
fontSize: 12,
padding: [0, -43]
}
}
},
labelLine: {
show: true,
length: 10,
length2: 45
},
- 新：第二段結(jié)束點需自行計算
label: {
normal: {
textStyle: {
lineHeight: 14,
fontSize: 12,
}
}
},
labelLine: {
show: true,
length: 10,
length2: 0
},
labelLayout: (params)=> {
const isLeft = params.labelRect.x < canvas.getWidth() / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points,
};
},
4.餅圖引導(dǎo)線指向中間
- 舊：labelLine的length設(shè)為負(fù)值
labelLine: {
show: true,
length: -35,
length2: -35,
},
- 新：第二段結(jié)束點需自行計算
label: {
padding: [0, -35],
},
labelLine: {
show: true,
length: -35,
length2: 0,
},
labelLayout: function (params) {
let center = position[0]//餅圖中心x位置
const points = params.labelLinePoints;
//points line的三個點的x,y位置
const isLeft = points[1][0] <= center;
points[2][0] = isLeft ? points[1][0] + 35 : points[1][0] - 35
return {
labelLinePoints: points,
};
},
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue中如何定義數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-09-09
Vue-CLI 3 scp2自動部署項目至服務(wù)器的方法
這篇文章主要介紹了Vue-CLI 3 scp2自動部署項目至服務(wù)器的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了VUE 動態(tài)組件的應(yīng)用,結(jié)合具體案例形式分析了vue.js動態(tài)組件的應(yīng)用場景、解決方案及相關(guān)操作技巧,需要的朋友可以參考下2019-12-12
FastApi+Vue+LayUI實現(xiàn)前后端分離的示例代碼
本文主要介紹了FastApi+Vue+LayUI實現(xiàn)前后端分離的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
vue+elementui通用彈窗的實現(xiàn)(新增+編輯)
這篇文章主要介紹了vue+elementui通用彈窗的實現(xiàn)(新增+編輯)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
基于vue-cli npm run build之后vendor.js文件過大的解決方法
今天小編就為大家分享一篇基于vue-cli npm run build之后vendor.js文件過大的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue報錯Not?allowed?to?load?local?resource的解決辦法
這篇文章主要給大家介紹了關(guān)于vue報錯Not?allowed?to?load?local?resource的解決辦法,這個錯誤是因為Vue不能加載本地資源的原因,需要的朋友可以參考下2023-07-07
Vue3中各種靈活傳遞數(shù)據(jù)的方式小結(jié)
Vue 3 提供了多種數(shù)據(jù)傳遞的方式,讓我們的組件之間可以盡情地交流,接下來,我們就直接一個個來看,這些方式都是怎么工作的,感興趣的小伙伴跟著小編一起來看看吧2024-07-07
vue3中vite.config.js相關(guān)常用配置超詳細(xì)講解
在Vue3項目中vite.config.js文件是Vite構(gòu)建工具的配置文件,它用于定義項目的構(gòu)建和開發(fā)選項,這篇文章主要介紹了vue3中vite.config.js相關(guān)常用配置的相關(guān)資料,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了在vue項目中封裝echarts的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12