vue使用echarts视图更新缓慢问题

项目中使用echarts画折线图显示设备上传的数据。
出现bug

  1. 做条件赛选等操作后需要请求接口从新画图,由于线的数量等会有变化出现了保留上一次画图的折线。解决办法:使用setOption试添加第二个参数为true
this.myEcharts.setOption(this.chartOption, true)
  1. 折线图有画警示线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' }
            )
        },

版权声明:本文为weixin_44801790原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。