项目中使用echarts进行图表的展示,当数据量很大的时候,需要配置dataZoom进行图表可滚动,但是数据都挤在一起,严重影响了图表的美观性,所以动态配置dataZoom的start 、 end属性
//设置可以滚动
dataZoom: [
{
type: 'inside',
start: this.startLength,
end: 100
},
{moveOnMouseWheel: false,}
],
在图表option设置前,进行计算startLength的值
//判断数据量,进行不同滚动条的设置
if (this.chartAllData.Measures.length > 50) {
this.startLength = 100 - (25/this.chartAllData.Measures.length * 100)
} else {
this.startLength = 0;
}
这种设置,在数据动态切换时,随着this.startLength的变化,会出现折线图发生部分连接错乱问题,后发现解决方法如下:
//设置可以滚动
dataZoom: [
{
type: 'inside',
start: this.startLength,
end: 100,
filterMode: 'empty'
},
{moveOnMouseWheel: false,}
],
添加filterMode属性为 empty即可解决该问题
网友评论