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"

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

相关文章

  • vue 开发一个按钮组件的示例代码

    vue 开发一个按钮组件的示例代码

    本篇文章主要介绍了vue 开发一个按钮组件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 某些场景下建议vue query代替pinia原理解析

    某些场景下建议vue query代替pinia原理解析

    这篇文章主要为大家介绍了某些场景下建议vue-query代替pinia原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • vue-cli 引入、配置axios的方法

    vue-cli 引入、配置axios的方法

    这篇文章主要介绍了vue-cli 引入axios的方法,文中还给大家提到了vue-cli 配置axios的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • Vue和uniapp中该如何使用canvas详解

    Vue和uniapp中该如何使用canvas详解

    说起canvas是css3新增的标签,而饼状图又是canvas经典,我们公司现在正在用uni-app框架去研发APP,下面这篇文章主要给大家介绍了关于Vue和uniapp中该如何使用canvas的相关资料,需要的朋友可以参考下
    2022-10-10
  • Vue新的状态管理库Pinia入门教程

    Vue新的状态管理库Pinia入门教程

    Pinia不但支持Vue3,同时还支持Vue2,本文主要介绍了Vue新的状态管理库Pinia入门教程,具有一定的参考价值,感兴趣的可以了解下
    2022-02-02
  • vue v-model表单控件绑定详解

    vue v-model表单控件绑定详解

    这篇文章主要为大家详细介绍了vue v-model表单控件绑定的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Vue3中如何使用fullcalendar日历插件

    Vue3中如何使用fullcalendar日历插件

    这篇文章主要介绍了Vue3中如何使用fullcalendar日历插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vue、react等单页面项目应该这样子部署到服务器

    vue、react等单页面项目应该这样子部署到服务器

    这篇文章主要介绍了vue、react等单页面项目应该这样子部署到服务器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 基于Vue的商品主图放大镜方案详解

    基于Vue的商品主图放大镜方案详解

    这篇文章主要介绍了基于 Vue 的商品主图放大镜方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • nginx+vue.js实现前后端分离的示例代码

    nginx+vue.js实现前后端分离的示例代码

    这篇文章主要介绍了nginx+vue.js实现前后端分离的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02

最新评论