问题描述:
由于是有echarts图表的数据较多,所以使用了dataZoom 组件,用户可以根据自身喜好选择要查看的时间段。
于是参照官方 example,
代码如下:
dataZoom: [
{
show: true,
start: 0,
end: 15
},
{
type: 'inside',
start: 0,
end: 15
},
{
type: 'slider',
start: 0,
end: 15
}
],
添加了dataZoom组件。初步使用时也达到了预期的效果,但是今天在测试时,发现一个问题:
当将dataZoom的icon拉满至整个dataZoom条时,左侧会出现两个icon,且只有一个可以正常的拖到,感觉类似于显示卡住了。
分析问题:
既然是dataZoom出现了问题,那么就从官方的dataZoom的文档查起,但是查了一圈发现并没有那个属性是用来设置这个显示个数的,于是又查看了官方的issue,搜索dataZoom,结果如下:
全部查看完,感觉也不现实!!!
既然这个方法不行,就换一个方法查找解决方法,最简答的方法还是从官方示例入手,既然官方示例中存在大量数据时,拖拽也不会出现这个问题,那么是否我们的写法存在问题呢?顺着这个思路,尝试修改了实现的代码,居然解决了! 参考示例
解决方案:
直接上代码:
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 0,
end: 35
},
{
type: 'inside',
show: true,
xAxisIndex: [0],
start: 0,
end: 35
}
]
效果图:
总结:
官方的示例是基于文档最好的,但是也不是每一个都可以完全使用的,所以遇到一些莫名其妙的问题时,还是先从官方文档入手(一般比较喜欢百度,但此次百度不到关键字)。也算是一个小经验吧,希望以后尽量的多查看示例的源码,避免出现此次的问题!!!
tips:
如果本文给你带来了帮助,还请支持一下!!!