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项目打包开启gzip压缩具体使用方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了详解nuxt路由鉴权(express模板)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要介绍了面板拖拽之vue自定义指令,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
vue-resource 拦截器interceptors使用详解
这篇文章主要介绍了vue-resource 拦截器interceptors使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。本文介绍下Vue Router的安装与使用2021-06-06
Element DateTimePicker日期时间选择器的使用示例
这篇文章主要介绍了Element DateTimePicker日期时间选择器的使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了关于Vue中的watch监视属性,Vue中的watch默认不监视对象内部值的改变,当被监视的属性变化时，回调函数自动调用，进行相关操作,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue-router 起步步骤详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要为大家介绍了gulp模块使用方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了vue3在setup中使用mapState方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论