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还是React，都有组件的概念。组件，就是能和别人组合在一起的物件。在前端页面开发过程中，将一个页面划分成一个个小的模块，每个模块单独定义，每个模块就是一个组件。组件可以进行复用，A页面和B页面有一个相似的模块，可以抽离成一个可局部修改的组件。2021-05-05
这篇文章主要介绍了为大家函数式组件劫持替代json封装element表格的过程思路及示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本篇文章主要介绍了Vue filter介绍及其使用详解，VueJs 提供了强大的过滤器API，能够对数据进行各种过滤处理。一起跟随小编过来看看吧2017-10-10
这篇文章主要给大家介绍了关于vue+echarts实现动态折线图的方法与注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要为大家详细介绍了如何在Vue3中使用富文本编辑器,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以参考一下2024-01-01
这篇文章主要介绍了Vue的混合继承，有需要的朋友可以借鉴参考下，希望能够有所帮助，希望能够给你带来帮助2021-11-11
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
这篇文章主要介绍了Vue中使用create-keyframe-animation与动画钩子完成复杂动画，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了vue中 v-for循环的用法详解,本文通过实例代码的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
这篇文章主要给大家介绍了vue3前端实现微信支付的详细步骤,随着移动端的普及和互联网购买需求的增加,微信支付在电商领域中发挥着越来越重要的作用,文中给出了详细的代码示例,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了详解vue中v-on事件监听指令的基本用法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
最新评论