vue如何解决echarts升级后本地无法启动的问题

 更新时间:2024年06月12日 11:10:30   作者:快乐码农哈哈哈  
这篇文章主要介绍了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,
   };
 },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中如何定义数据示例详解

    Vue中如何定义数据示例详解

    这篇文章主要给大家介绍了关于Vue中如何定义数据的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • Vue-CLI 3 scp2自动部署项目至服务器的方法

    Vue-CLI 3 scp2自动部署项目至服务器的方法

    这篇文章主要介绍了Vue-CLI 3 scp2自动部署项目至服务器的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • VUE 动态组件的应用案例分析

    VUE 动态组件的应用案例分析

    这篇文章主要介绍了VUE 动态组件的应用,结合具体案例形式分析了vue.js动态组件的应用场景、解决方案及相关操作技巧,需要的朋友可以参考下
    2019-12-12
  • FastApi+Vue+LayUI实现前后端分离的示例代码

    FastApi+Vue+LayUI实现前后端分离的示例代码

    本文主要介绍了FastApi+Vue+LayUI实现前后端分离的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • vue+elementui通用弹窗的实现(新增+编辑)

    vue+elementui通用弹窗的实现(新增+编辑)

    这篇文章主要介绍了vue+elementui通用弹窗的实现(新增+编辑),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 基于vue-cli npm run build之后vendor.js文件过大的解决方法

    基于vue-cli npm run build之后vendor.js文件过大的解决方法

    今天小编就为大家分享一篇基于vue-cli npm run build之后vendor.js文件过大的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue报错Not allowed to load local resource的解决办法

    vue报错Not allowed to load local resource的解决办法

    这篇文章主要给大家介绍了关于vue报错Not allowed to load local resource的解决办法,这个错误是因为Vue不能加载本地资源的原因,需要的朋友可以参考下
    2023-07-07
  • Vue3中各种灵活传递数据的方式小结

    Vue3中各种灵活传递数据的方式小结

    Vue 3 提供了多种数据传递的方式,让我们的组件之间可以尽情地交流,接下来,我们就直接一个个来看,这些方式都是怎么工作的,感兴趣的小伙伴跟着小编一起来看看吧
    2024-07-07
  • vue3中vite.config.js相关常用配置超详细讲解

    vue3中vite.config.js相关常用配置超详细讲解

    在Vue3项目中vite.config.js文件是Vite构建工具的配置文件,它用于定义项目的构建和开发选项,这篇文章主要介绍了vue3中vite.config.js相关常用配置的相关资料,需要的朋友可以参考下
    2025-04-04
  • 在vue项目中封装echarts的步骤

    在vue项目中封装echarts的步骤

    这篇文章主要介绍了在vue项目中封装echarts的步骤,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-12-12

最新评论