vue如何解决echarts升级后本地无法启动的问题
作者：快乐码农哈哈哈
这篇文章主要介绍了vue如何解决echarts升级后本地无法启动的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue解决echarts升级后本地无法启动
1.老项目原来使用的echarts是v4版本，现升级至v5版本
首先根据echarts官方文档升级
npm install echarts --save
然后修改 引用方式
import * as echarts from 'echarts';
2.完成后使用本地启动
使用npm run serve启动项目，出现报错：
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
升级其它插件后还经常出现找不到样式文件（video.js/dist/video-js.css），此时重装对应版本即可
npm i vue-video-player@5.0.2
echarts4升级echarts5升级记录
升级后优点，默认样式更好看，动效体验更好。
缺点，容错率降低，需要处理新版不支持的代码
1.y周label的纵向位置调整 负值padding不生效
- 旧：
axisLabel: {
padding:[-13,0,0,0],
}
- 新：
axisLabel: {
padding:[-13,0,0,0],
verticalAlign: 'top',
}
2.自定义y轴最大值max与最小值min
- 旧：min/max写反也能正常使用
- 新：无法正常使用
3.饼图label位置调整到引导线上方
- 旧：padding左右双边设为负值
label: {
normal: {
textStyle: {
lineHeight: 14,
fontSize: 12,
padding: [0, -43]
}
}
},
labelLine: {
show: true,
length: 10,
length2: 45
},
- 新：第二段结束点需自行计算
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.饼图引导线指向中间
- 旧：labelLine的length设为负值
labelLine: {
show: true,
length: -35,
length2: -35,
},
- 新：第二段结束点需自行计算
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,
};
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。