vue如何解決echarts升級(jí)后本地?zé)o法啟動(dòng)的問題
vue解決echarts升級(jí)后本地?zé)o法啟動(dòng)
1.老項(xiàng)目原來使用的echarts是v4版本，現(xiàn)升級(jí)至v5版本
首先根據(jù)echarts官方文檔升級(jí)
npm install echarts --save
然后修改 引用方式
import * as echarts from 'echarts';
2.完成后使用本地啟動(dòng)
使用npm run serve啟動(dòng)項(xiàng)目，出現(xiàn)報(bào)錯(cuò)：
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.解決方法
升級(jí)@vue\cli-plugin-babel的版本
npm install @vue\cli-plugin-babel
4.我的項(xiàng)目中使用了vue-video-player
升級(jí)其它插件后還經(jīng)常出現(xiàn)找不到樣式文件（video.js/dist/video-js.css），此時(shí)重裝對(duì)應(yīng)版本即可
npm i vue-video-player@5.0.2
echarts4升級(jí)echarts5升級(jí)記錄
升級(jí)后優(yōu)點(diǎn)，默認(rèn)樣式更好看，動(dòng)效體驗(yàn)更好。
缺點(diǎn)，容錯(cuò)率降低，需要處理新版不支持的代碼
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é)束點(diǎn)需自行計(jì)算
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é)束點(diǎn)需自行計(jì)算
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的三個(gè)點(diǎn)的x,y位置
const isLeft = points[1][0] <= center;
points[2][0] = isLeft ? points[1][0] + 35 : points[1][0] - 35
return {
labelLinePoints: points,
};
},
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了基于vue2.x的電商圖片放大鏡插件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了使用vue實(shí)現(xiàn)手寫簽名功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-07-07
Vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定的方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue中使用vue2-perfect-scrollbar制作滾動(dòng)條
這篇文章主要介紹了Vue中使用vue2-perfect-scrollbar滾動(dòng)條,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
vue父組件數(shù)據(jù)更新子組件相關(guān)內(nèi)容未改變問題(用watch解決)
這篇文章主要介紹了vue父組件數(shù)據(jù)更新子組件相關(guān)內(nèi)容未改變問題(用watch解決)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue實(shí)現(xiàn)文字滾動(dòng)(跑馬燈)效果的四種方式
文章介紹了在Vue中實(shí)現(xiàn)文字滾動(dòng)（跑馬燈）的四種方式,包括純CSS實(shí)現(xiàn)、帶有鼠標(biāo)懸浮暫停的滾動(dòng)、真正無縫的滾動(dòng)以及JS控制滾動(dòng),每種方式都有其特點(diǎn)和適用場(chǎng)景,需要的朋友可以參考下2026-04-04
element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問題
當(dāng)頁(yè)面數(shù)據(jù)過多,前端渲染大量的DOM時(shí),會(huì)造成頁(yè)面卡死問題,本文主要介紹了element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問題,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了vue子頁(yè)面控制父頁(yè)面刷新問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Swiper常用于移動(dòng)端網(wǎng)站的內(nèi)容觸摸滑動(dòng),Swiper是純javascript打造的滑動(dòng)特效插件,面向手機(jī)、平板電腦等移動(dòng)終端,下面這篇文章主要給大家介紹了關(guān)于swiper在vue中的簡(jiǎn)單使用方法,需要的朋友可以參考下2022-09-09