vue中echarts视图不更新问题及解决
更新时间：2023年07月01日 09:41:27 作者：屿-·
这篇文章主要介绍了vue中echarts视图不更新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue中echarts视图不更新
最近写了一个可视化，遇到最多的问题就是， 封装成组件 接口返回来 有数据 ， 或者切换数据有数据 ，但可视化视图不更新
问题就是数据只在第一次更新了
我解决的方法有两个：
- v-if判断有数据就显示
- 用watch监听
1、直接在组件里判断有数据就可
2、在组件里监听数据有变化 手动赋值
总结下来就是 监听是真香 后来遇到的很多问题都是用监听解决的
vue echarts视图更新缓慢问题
项目中使用echarts画折线图显示设备上传的数据。
出现bug
1.做条件赛选等操作后需要请求接口从新画图，由于线的数量等会有变化出现了保留上一次画图的折线。
解决办法：使用setOption试添加第二个参数为true
this.myEcharts.setOption(this.chartOption, true)
2.折线图有画警示线markLine，要求可以手动隐藏显示该警示线
原本实现代码：
// 警示线开关
lgkeysw() {
this.alarmLine = !this.alarmLine
if (!this.alarmLine) {
this.chartOption.series.forEach((item) => {
item.markLine.label.show = false
item.markLine.lineStyle.opacity = 0
})
} else {
this.chartOption.series.forEach((item) => {
item.markLine.label.show = true
item.markLine.lineStyle.opacity = 1
})
}
this.myEcharts.setOption(this.chartOption, true)
},后因数据量过大，使用setOption将全部折线图重绘而导致隐藏或显示markLine的时间变长（甚至需要十几二十秒的时间），优化代码实现只修改需要更新的视图，其他部分不变
// 报警线开关 LGKEYSW
lgkeysw(showAlarmBtn) {
if (!this.alarmBtn) {
return false
}
this.alarmLine = !showAlarmBtn
let series = []
if (!this.alarmLine) {
this.chartOption.series.forEach((item) => {
series.push({
markLine: {
label: {
show: false
},
lineStyle: {
opacity: 0
}
}
})
})
} else {
this.chartOption.series.forEach((item) => {
series.push({
markLine: {
label: {
show: true
},
lineStyle: {
opacity: 1
}
}
})
})
}
this.myEcharts.setOption(
{
series: series
},
{ replaceMerge: 'series' }
)
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
这篇文章主要介绍了vue本地构建热更新卡顿的问题“75 advanced module optimization”解决方案,每次热更新都会卡在 "75 advanced module optimization" 的地方不动了，如何解决这个问题呢，下面小编给大家带来了解决方案，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了mpvue中使用flyjs全局拦截的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue动态组件之:is在组件中的使用场景,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
Vue CLI是一个强大的开发工具,可用于快速搭建Vue.js项目,在Vue CLI中使用自定义组件是构建交互式和模块化Web应用的重要一环,下面我们就来看看vue cli中如何使用自定义的组件吧2023-11-11
这篇文章主要介绍了关于element Drawer抽屉的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
本文给大家介绍了在vue项目中使用svg图标的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2022-04-04
Vue中使用a标签下载静态资源文件(如excel、pdf等)纯前端操作方法
这篇文章主要介绍了Vue中使用a标签下载静态资源文件(如excel、pdf等)纯前端操作方法的相关资料,需要的朋友可以参考下2025-02-02
有时候给页面内容添加一个关键词搜索功能,如果搜索结果能够像浏览器搜索一样高亮显示,那找起来就会很明显体验会好很多,本文就来介绍一下vue搜索高亮popsearch组件的实现示例,感兴趣的可以了解一下2023-09-09
这篇文章主要介绍了vue中如何使用math.js问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
这篇文章主要介绍了vue-cli3.0如何使用CDN区分开发、生产、预发布环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论