Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发)

 更新时间:2022年10月11日 09:25:16   作者:sanye丶  
这篇文章主要介绍了Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue使用Echarts5.0的一些问题

问题

最新版的 Echarts5.0 使用 import echarts from 'echarts' 导入,会发现导出的 echarts 是 undefined 的情况,无法正常使用。

解决方案一

新版本有问题就用旧版本咯

# 卸载 Echarts5.0
npm uninstall echarts
# 规定版本来安装(选择自己喜欢的版本安装)
npm install echarts@4.8.0 --save
 # 导入使用
import echarts from 'echarts'

解决方案二

还是使用 Echarts5.0 但是导入方式换为:

import * as echarts from 'echarts'

为什么会出现这种情况?

对比一下 源码就知道咯,5.0 版本的 dist 目录多了个 .esm.js 文件 ,之前的版本是没有的,这是个特意给 ESM 模块导入使用的,截图如下,所以以前的导入方法就不行咯,因为使用了 export 而不是 export default (可以去了解下 ESM,就知道这两个导出有啥区别了) 

vue使用echarts 5.0“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

有原来的引入方式改为

import  * as echarts from "echarts"

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

相关文章

  • 使用ElementUI el-upload实现一次性上传多个文件

    使用ElementUI el-upload实现一次性上传多个文件

    在日常的前端开发中,文件上传是一个非常常见的需求,尤其是在用户需要一次性上传多个文件的场景下,ElementUI作为一款非常优秀的Vue.js 2.0组件库,为我们提供了丰富的UI组件,本文介绍了如何使用ElementUI el-upload实现一次性上传多个文件,需要的朋友可以参考下
    2024-08-08
  • vue+node+webpack环境搭建教程

    vue+node+webpack环境搭建教程

    这篇文章主要为大家详细介绍了vue+node+webpack环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue项目实现m3u8流媒体播放详细图文教程

    vue项目实现m3u8流媒体播放详细图文教程

    m3u8是一种常用的视频流媒体格式,通常用于在Web上播放视频,这篇文章主要给大家介绍了关于vue项目实现m3u8流媒体播放的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • vue3+vite2+mqtt连接遇到的坑及解决

    vue3+vite2+mqtt连接遇到的坑及解决

    这篇文章主要介绍了vue3+vite2+mqtt连接遇到的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 使用elementUI table展开行内嵌套table问题

    使用elementUI table展开行内嵌套table问题

    这篇文章主要介绍了使用elementUI table展开行内嵌套table问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue通过自定义指令实现内容替换的示例代码

    Vue通过自定义指令实现内容替换的示例代码

    这篇文章主要介绍了利用Vue通过自定义指令实现内容替换的方法,通过Vue.directive指令定义函数来实现内容自定义,通过指令定义函数的三个钩子函数(inserted、componentUpdated、unbind)来实现自定义内容的挂载、更新和销毁,需要的朋友可以参考下
    2025-03-03
  • vue使用axios时关于this的指向问题详解

    vue使用axios时关于this的指向问题详解

    最近在学习使用vue+axios,在使用中发现了一个问题,下面总结分享给大家,这篇文章主要给大家介绍了关于vue使用axios时this的指向问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
    2017-12-12
  • 详解Vue.use自定义自己的全局组件

    详解Vue.use自定义自己的全局组件

    本篇文章主要介绍了Vue.use自定义自己的全局组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue中el-table实现可拖拽移动列和动态排序字段

    vue中el-table实现可拖拽移动列和动态排序字段

    最近公司需要做个项目,需要拖拽表格和自定义表格字段,本文主要介绍了vue中el-table实现可拖拽移动列和动态排序字段,具有一定吃参考价值,感兴趣的可以了解一下
    2023-12-12
  • vue中el-table实现自动吸顶效果(支持fixed)

    vue中el-table实现自动吸顶效果(支持fixed)

    本文主要介绍了vue中el-table实现自动吸顶效果,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论