Vue使用Echarts图表多次初始化报错问题的解决方法
更新时间：2022年05月09日 16:42:20 作者：兰儿兰上天太阳肩并肩
最近在学习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: {
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图表初始化报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本vue移动端项目设置全屏背景,关键是要找对文件,然后添加background属性即可,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
Vue中router-view和component :is的区别解析
这篇文章主要介绍了Vue中router-view和component :is的区别解析,router-view用法直接填写跳转路由,路由组件会渲染<router-view></router-view>标签,本文给大家介绍的非常详细,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了自定义input组件如何实现拖拽文件上传问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到的结果不是我们想要的,并且对性能也有非常大的影响,这篇文章主要给大家介绍了关于axios取消请求与避免重复请求的相关资料,需要的朋友可以参考下2021-06-06
在同一个Vue项目中的不同vue和HTML页面之间进行跳转方式
这篇文章主要介绍了在同一个Vue项目中的不同vue和HTML页面之间进行跳转方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了在Vue中使用icon 字体图标的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
vue修改this.$confirm的文字样式、自定义样式代码实例
this.$confirm是一个 Vue.js 中的弹窗组件,其样式可以通过 CSS 进行自定义,下面这篇文章主要给大家介绍了关于vue修改this.$confirm的文字样式、自定义样式的相关资料,需要的朋友可以参考下2024-02-02
在遇到chunk-vendors.js文件的语法错误时,可以尝试在vue.config.js文件中添加transpileDependencies参数进行配置,这通过明确指示哪些依赖需要被babel转译,从而帮助解决编译过程中的语法问题,此方法适用于Vue项目中遇到的相关错误,希望能帮助到遇到同样问题的开发者2024-10-10
这篇文章主要介绍了vue前端代码如何通过maven打成jar包运行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
作为一个曾经的Java coder,当第一次看到js里面的装饰器Decorator,就马上想到了Java中的注解,当然在实际原理和功能上面,Java的注解和js的装饰器还是有很大差别的,这篇文章主要给大家介绍了关于Vue项目之ES6装饰器在项目实战中应用的相关资料,需要的朋友可以参考下2022-06-06
最新评论