项目中使用echarts画折线图显示设备上传的数据。
出现bug
- 做条件赛选等操作后需要请求接口从新画图,由于线的数量等会有变化出现了保留上一次画图的折线。解决办法:使用
setOption试添加第二个参数为true
this.myEcharts.setOption(this.chartOption, true)
- 折线图有画警示线
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版权协议,转载请附上原文出处链接和本声明。