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

目录
  • Vue使用Echarts5.0的一些问题
    • 问题
    • 解决方案一
    • 解决方案二
    • 为什么会出现这种情况？
  • vue使用echarts 5.0“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

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"

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目中vue-echarts讲解及常用图表实现方案(推荐)

    vue项目中vue-echarts讲解及常用图表实现方案(推荐)

    目录 1.图表主题颜色的修改 2.XY轴体颜色和文本颜色修改 3.横向柱状图的显示 4.过滤xy轴文本内容 5.Y轴文本显示在轴线内 6.在柱状条头部添加标签内容 7.自定义图例修改 8.环比图中间显示内容 图表类的项目操作一般常见于管理平台系统,移动端项目中并不是特别常见,不常见不代表没有,在一些商城类应用中,商家需要看到商品的销量分析,盈利分析等,就需要用到图标,比较常用的图标库,像百度的ECHARTS,蚂蚁金服的AntV都是不错的图标库,感兴趣的读者可以直接到他们的官网阅读相关的资料,笔者

  • Vue引入echarts方法与使用介绍

    Vue引入echarts方法与使用介绍

    目录 1. 引入echarts 2. 将echarts设置为全局 3. 在相关组件中使用 在Vue中引入echarts以及使用 今天来告诉大家如何将echart引入vue并巧妙利用钩子函数对表格数据进行渲染. 1. 引入echarts npm install echarts --save 在vue项目中安装 2. 将echarts设置为全局 main.js(项目入口文件) //引入echarts文件 import * as echarts from 'echarts' Vue.prototype

  • Vue 项目中Echarts 5使用方法详解

    Vue 项目中Echarts 5使用方法详解

    目录 前言 创建项目 基本使用 安装 使用方法 柱状图 动态排序柱状图 前言 Echarts 是一个纯JavaScript的图表库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. 创建项目 先使用vue-cli创建一个新的项目,配置按照自己的需要选择,默认的也可 vue create vue_echarts cd vue_echarts npm run serve 基本使用 安装 首先安装echarts npm i

  • vue+echarts5实现中国地图的示例代码

    vue+echarts5实现中国地图的示例代码

    使用echarts5.0版本实现中国地图,E charts在5.0版本之后,地图不能直接引入了,需要自己去下载. 地图文件下载地址:下载地址(http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5) 注意: 将下载后的json文件放置/public目录下 map类型的地图 <template> <

  • Vue中使用Echarts可视化图表宽度自适应的完美解决方案

    Vue中使用Echarts可视化图表宽度自适应的完美解决方案

    目录 一.问题阐述: 二.解决思路: 三.最终效果: 一.问题阐述: 开发H5项目中应用到Echarts数据可视化,由于H5主要使用在手机,屏幕宽度大大限制了图表的展现,问题如下. 上图中x轴的数据是动态的,从2022年切换到2021年数据变化,此时如果x轴的数据过多就会显得格外拥挤. 二.解决思路: 我的解决方案是,在放置Echarts的容器(div)外层再套一层容器(div),外层容器宽度固定设置手机屏幕宽,并设置溢出显示滚动条(width: 100%;overflow: auto),内层E

  • vue中Echarts使用动态数据的两种实现方式

    vue中Echarts使用动态数据的两种实现方式

    目录 Echarts使用动态数据的两种方式 1.通过computed 2.在data中定义option vue Echarts几种常用图表动态数据切换 1.柱状图 2.平滑折线面积图 3.折线图堆叠 4.饼状图 Echarts使用动态数据的两种方式 在使用Echarts时我们数据一般不是静态写死的,而是通过后端接口动态获取的,在此总结两种在vue框架下Echarts使用动态数据的方式. 1.通过computed computed: {     options() {       let that

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

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

    目录 Vue使用Echarts5.0的一些问题 问题 解决方案一 解决方案二 为什么会出现这种情况? vue使用echarts 5.0“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘ Vue使用Echarts5.0的一些问题 问题 最新版的 Echarts5.0 使用 import echarts from 'echarts' 导入,会发现导出的 echarts 是 undefined 的情况,无法正常使用.

  • 解决vue中使用swiper插件问题及swiper在vue中的用法

    Swiper简介 Swiper常用于移动端网站的内容触摸滑动. Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题 这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template> <div clas

  • vue中echarts3.0自适应的方法

    前端时间做一个vue的项目,echart是按需引入的如下: // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts' // 引入折线图 import 'echarts/lib/chart/line' // 引入提示框和图例组件 import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legendScroll' 然后发现在缩放浏览器窗口时折线图并不会自适应

  • Vue 2.0学习笔记之使用$refs访问Vue中的DOM

    通过前面对Vue的学习,到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法.首先要了解的是$refs属性.但是在深入到JavaScript部分之前,我们先看看模板. <div id="app"> <h1>{{ message }}</h1> <button @click="clickedButton">点击偶</button> </div> let app = new Vue({ e

  • 浅谈vue中慎用style的scoped属性

    在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为在我们需要修改公共组件(三方库或者项目定制的组件)的样式的时候,scoped往往会造成更多的困难,需要增加额外的复杂度. scoped实现私有化样式的原理 为什么会说,会增加复杂度?那么我们先从的实现模块的原理说起.为了方便称呼,我们假设把这种组件叫做模块私有组件,其他的未加scoped的叫做模块一般组件. 通过查看DO

  • 在Vue中使用highCharts绘制3d饼图的方法

    在Vue中使用highCharts绘制3d饼图的方法

    highcharts是国外知名基于javascript的图表库.由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖,所以弃用. 接下来,给各位伙伴简要的讲叙下highcharts在vue中的使用和配置方法. 首先使用 npm在你的项目中安装vue-highcharts npm install vue-highcharts --save 由于vue-highcharts依赖于highcharts,我们还需要安装后者 npm install highcharts

  • vue中axios解决跨域问题和拦截器的使用方法

    vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

  • 在 Vue 中使用 JSX 及使用它的原因浅析

    本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西. Vue.js 具有简单的 API 和几个选项,可用于在我们的组件中定义HTML模板. 我们可以使用 <template> 标签选项,在根组件实例上定义 template 属性,或者使用单文件组件. 上面的选项很棒并且可以完美地工作,但是,在您的应用程序的生命周期中,有时会

  • Vue 中 template 有且只能一个 root的原因解析(源码分析)

    引言 今年, 疫情 并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...).然后,在前段时间也看到一个这样的关于 Vue 的问题, 为什么每个组件 template 中有且只能一个 root? 可能,大家在平常开发中,用的较多就是 template 写 html 的形式.当然,不排除用 JSX 和 render() 函数的.但是,究其本质,它们最终都会转化成 render() 函数.然后,再由 render() 函数转为 Vritual DOM (以下统称 VNode ).而 rende

  • vue中是怎样监听数组变化的

    我们知道通过Object.defineProperty()劫持数组为其设置getter和setter后,调用的数组的push.splice.pop等方法改变数组元素时并不会触发数组的setter,这就会造成使用上述方法改变数组后,页面上并不能及时体现这些变化,也就是数组数据变化不是响应式的(对上述不了解的可以参考这篇文章).但实际用vue开发时,对于响应式数组,使用push.splice.pop等方法改变数组时,页面会及时体现这种变化,那么vue中是如何实现的呢? 通过vue源码可以看出,vue

随机推荐