Vue使用Echarts图表多次初始化报错问题的解决方法

目录
  • 问题
  • 方法一 销毁实例
  • 方法二 不要频繁创建实例
  • 总结

问题

Vue项目中需要用Echarts的柱状图显示数据，并且每次搜索要更新柱状图。

这时候小编发现在控制台会出现这样的报错：

原来的代码是这样的，页面挂载和搜索时都会调用init方法

initChart (dataSet = [5, 20, 36, 10, 10, 20]) {
      this.barChart = echarts.init(this.$refs.chartBox)
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: dataSet
          }
        ]
      }
      this.barChart.setOption(option)

方法一 销毁实例

在initChart()内第一行打印 console.log(this.barChart)，发现页面挂载的时候输出是：

点击搜索按钮，触发第二次初始化是输出是：

因此考虑在每次初始化echarts实例之前销毁已经存在的实例：

initChart (dataSet = [5, 20, 36, 10, 10, 20]) {
      if (this.barChart) {
        this.barChart.dispose()
        this.barChart = null
      }
      this.barChart = echarts.init(this.$refs.chartBox)
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: dataSet
          }
        ]
      }
      this.barChart.setOption(option)
    }

方法二 不要频繁创建实例

再找解决办法的过程中，小编发现更新数据用setOption就可以，不必频繁创建echarts实例。真是愚蠢的小编。

handleSubmit () {
      this.barChart.setOption({ series: [{ data: [12, 12, 36, 12, 12, 12] }] })
    }

虽然setOption可以在这种场景规避多次实例化，但是有一种场景：当vue的页面切换时echarts实例的dom容器元素被销毁又重新创建了，echarts会因为找不到容器元素而报错。

这种场景可以在init前dispose实例。

之后有时间小编试试重现容器元素重新创建引发问题的这种场景。

总结

vue使用echarts初始化报错可以考虑销毁echarts实例，clear（）方法并不彻底，考虑使用dispose（）。

到此这篇关于Vue使用Echarts图表多次初始化报错问题解决的文章就介绍到这了,更多相关Vue Echarts图表初始化报错内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue中使用Echarts的两种方式

    1. 直接引入echarts 先npm安装echarts npm install echarts --save 开发: main.js import myCharts from './comm/js/myCharts.js' Vue.use(myCharts) myCharts.js /** * 各种画echarts图表的方法都封装在这里 */ import echarts from 'echarts' (function() { var chart = {}; chart.install =

  • 在vue中添加Echarts图表的基本使用教程

    在vue中添加Echarts图表的基本使用教程

    前言 我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网 现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D

  • vue使用echarts图表的详细方法

    vue使用echarts图表的详细方法

    本文为大家分享了vue使用echarts图表的方法,供大家参考,具体内容如下 该示例使用 vue-cli  脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 使用 cnpm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts fro

  • 在Vue中使用Echarts可视化库的完整步骤记录

    前言 由于最近项目需要做可视化数据展示,也就是用图表展示数据,他还有一个很高端的名字:"大数据可视化"(参考图一),首先考虑选择什么图表库来作为基础开发,目前被普遍认可的是Hcharts.Echarts.AntV. 介绍: Hcharts:国外的一款图表库,是图表库的领头羊 Echarts:百度开发的数据可视化库,国内图表库的 "领军人物" AntV:是蚂蚁金服开发的数据可视化库 总结出以下几个优略点区别Echarts.Hcharts哪个比较合适: 1.学习容易程度

  • 在Vue中使用echarts的实例代码（3种图）

    在Vue中使用echarts的实例代码（3种图）

    前言 公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他进行一些修改.我个人也偏向于原生JS编程,因此没有采用,而是自己在vue中实现了对数据的可视化处理,先来看看效果图 以下数据已做脱敏处理 这是目前用到的三种图. 可以看到,我在图表的外部添加了标题及说明,以及右侧的选择框组件,视图可以根据选择的不同,图表进行动态切换

  • Vue Echarts实现可视化世界地图代码实例

    Vue Echarts实现可视化世界地图代码实例

    Echarts实现可视化世界地图模拟迁徙,以我自己开发过程. 下载Echarts依赖: npm install echarts 成功以后引入依赖: import echarts from 'echarts' peopleInsertCharts为生成echarts容器. let myChart = echarts.init(document.getElementById('peopleInsertCharts')) 容器一定要给宽高,否则echarts生成初始化页面不会显示.需要自适应的可以js

  • Vue使用Echarts图表多次初始化报错问题的解决方法

    Vue使用Echarts图表多次初始化报错问题的解决方法

    目录 问题 方法一 销毁实例 方法二 不要频繁创建实例 总结 问题 Vue项目中需要用Echarts的柱状图显示数据,并且每次搜索要更新柱状图. 这时候小编发现在控制台会出现这样的报错: 原来的代码是这样的,页面挂载和搜索时都会调用init方法 initChart (dataSet = [5, 20, 36, 10, 10, 20]) { this.barChart = echarts.init(this.$refs.chartBox) const option = { title: { tex

  • Vue3刷新页面报错404的解决方法

    Vue3刷新页面报错404的解决方法

    vue-router历史模式 最近在学习Vue3的过程中遇到了一个问题,那就是在写代码的过程中,每当代码发生了变动,页面一刷新,原先的页面就会变成这个样子: 打开控制台一看: 这时候刷新.在浏览器地址栏直接输入地址也不管用. 每次写一点代码,都不能及时看到结果,需要从8080重新进入才可以,其中的崩溃可想而知. 此时判断应该是路由跳转的问题,于是来到router.js文件看一看: import { createRouter, createWebHistory } from 'vue-router

  • react创建项目启动报错的完美解决方法

    react创建项目启动报错的完美解决方法

    目录 一.预备知识: 二.创建项目步骤: 三.启动项目时可能出现的报错: 四.Todolist项目相关库: 五.GitHub搜索案例相关库: 六.尚硅谷路由案例相关库: 七.UI库案例相关库: 八.redux相关库: 一.预备知识: npm (也可以用yarn,本文以npm为例) npm介绍 全称为Node Package Manager,是随同NodeJS一起安装的包管理工具. 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地

  • Yii使用DeleteAll连表删除出现报错问题的解决方法

    本文实例讲述了Yii使用DeleteAll连表删除出现报错问题的解决方法.分享给大家供大家参考,具体如下: 删除数据的时候,经常会遇到连联判断删除数据的条件,今天用Yii 的CDbCriteria生成关连条件.批量删除的时候数据库报错. 页面代码为: $criteria=new CDbCriteria; $criteria->join = ' LEFT JOIN {{positions}} p ON p.zpo_id=t.zpo_id '; $criteria->addCondition(&q

  • Kendo Grid editing 自定义验证报错提示的解决方法

    Kendo Grid editing 自定义验证报错提示的解决方法

    Kendo UI是一个强大的框架用于快速HTML5 UI开发.基于最新的HTML5.CSS3和JavaScript标准. Kendo UI包含了开发现代JavaScript开发所需要的所有一切,包括:强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件. 今天开始就对项目里使用的kendo控件技巧做记录,有个别错误希望大家不吝指出,谢谢. 首先就是Grid控件编辑是,验证错误时弹出的提示居然是中文加字段名字,如下图.抓狂啊!!请问这样的低级的提示能拿得出手吗? 这样的提示

  • PHP 500报错的快速解决方法

    1 先看nginx error.log 指定的错误日记文件路径 找到这个日记文件看 里面信息 2 再看  php-fpm.conf 里面指定的PHP错误日记的路径 具体如下 php_flag[display_errors] = off php_admin_flag[log_errors] = on php_admin_value[error_log] = /data/logs/fpm-php.log 以上就是小编为大家带来的PHP 500报错的快速解决方法全部内容了,希望大家多多支持我们~

  • Android Studio 报错“app:processDebugResources"解决方法

    Android Studio 报错"app:processDebugResources"解决方法 Android Studio项目Build的时候报了这么一个错误: Error:Execution failed for task ':app:processDebugResources'. > com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Pro

  • python安装dlib库报错问题及解决方法

    问题描述 我是debain 系的linux系统没遇到这个问题,在centos系统遇到的 Collecting dlib   Downloading http://mirrors.cloud.aliyuncs.com/pypi/packages/63/92/05c3b98636661cb80d190a5a777dd94effcc14c0f6893222e5ca81e74fbc/dlib-19.19.0.tar.gz (3.2MB)     100% |███████████████████████

  • Pycharm中import torch报错的快速解决方法

    Pycharm中import torch报错 问题描述: 今天在跑GitHub上一个深度学习的模型,需要引入一个torch包,在pycharm中用pip命令安装时报错: 于是我上网寻求解决方案,试了很多都失败了,最后在:Anne琪琪的博客中找到了答案,下面记录一下解决问题的步骤: 1.打开Anaconda prompt执行下面命令: conda install pytorch-cpu torchvision-cpu -c pytorch 等待运行结束. 2. 测试torch是否安装成功 impo

  • Vue-router 报错NavigationDuplicated的解决方法

    版本:3.1.x 报错原因: 使用push().replace()进行导航时,不能重复导航到当前路由. 解决办法: 方法1:在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location) { return originalPush.call(this, location).catch(err => err) } co

随机推荐