vue使用echarts折线图数据渲染问题

使用echarts画折线图问题:

  1. 从新画图时,前一次的还在:
    解决:setOption第二个参数传true

  2. 手动隐藏显示报警线

// 报警线开关 LGKEYSW
        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)
        },

由于数据量大的时候会出现十几二十秒的反应时间,修改代码解决bug

// 报警线开关 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版权协议,转载请附上原文出处链接和本声明。