(本文档仅供参考)
问题1:
如何实现多数据的时候,能够设置滚动条,实现区域缩放:
解决方案
可以使用扩展属性实现,
若需要实现x轴缩放可参考此wiki文档:https://history.wiki.smartbi.com.cn/pages/viewpage.action?pageId=35750507
若要实现x轴不缩放,可参考以下扩展属性:
1 |
|
注:如果要datazoom完全锁定缩放,只能平移,可参考:
{ "dataZoom": [{ "type": "slider",
"show": true,
"xAxisIndex": [0],
"start": 1,
"end": 35,
"zoomLock": true,
zoomOnMouseWheel: false, // 禁用滚轮缩放
moveOnMouseMove: true, // 启用鼠标移动时平移
brushSelect: false // 禁用鼠标框选 }] }
问题2
横向柱图在数据比较多的情况下,显示都挤在一起,要如何设置才能显示上下滚动条?
解决方案
可通过添加如下扩展属性:
{ "dataZoom": [{ "type": "slider", "showDetail": false, /*滚动条鼠标提示不显示*/ "show": true, "yAxisIndex": [0], //数据窗口范围的起始数值和结束数值 "startValue": 0, "endValue": 6, "handleSize": 7, //自定义宽高 "hight": '600px', "width": '10px' }] }
效果:
如果想要实现滚动条在下方,可以参考下面的扩展属性:
{ "dataZoom": [{ "type": "slider", "showDetail": false, /*滚动条鼠标提示不显示*/ "show": true, "xAxisIndex": [0], //数据窗口范围的起始数值和结束数值 "startValue": 0, "endValue": 6, "handleSize": 7, }] }
如果想要实现滚动条起始位置在最上方,可以参考下面的扩展属性:
关于“dataZoom-slider.start”具体可见Echarts文档:https://echarts.apache.org/zh/option.html#dataZoom-slider.start
{ "dataZoom": [{ "type": "slider", "showDetail": false, /*滚动条鼠标提示不显示*/ "show": true, "yAxisIndex": [0], //数据窗口范围的起始百分和结束百分比 "start": 100, "end": 70, "handleSize": 7, //自定义宽高 "hight": '600px', "width": '10px' }] }
效果:
问题3
echarts中设置普通横条图,然后想Y轴滚动展示,但是我不想要出现那个滚动条,需要怎么实现
解决方案
可以使用下面的扩展属性实现:
{ "dataZoom": [{ "type": "inside", "yAxisIndex": [0], }] }
问题3
echarts中设置柱状图,然后想X轴滚动展示,但是我不想要出现那个滚动条,需要怎么实现
解决方案
可以使用下面的扩展属性:
{ "dataZoom": [{ "type": "inside", }] }