實(shí)現(xiàn)一下效果, 主要是通過dataZoom來實(shí)現(xiàn) dataZoom: [{id: 'dataZoomX',type: 'slider',xAxisIndex: [0],filterMode: 'filter'},{id: 'dataZoomY',type: 'slider',yAxisIndex: [0],filterMode: 'empty'} ],dataZoom: [//1.橫向使用滾動條{type: 'slider',//有單獨(dú)的滑動條，用戶在滑動條上進(jìn)行縮放或漫游。inside是直接可以是在內(nèi)部拖動顯示show: true,//是否顯示 組件。如果設(shè)置為 false，不會顯示，但是數(shù)據(jù)過濾的功能還存在。start: 0,//數(shù)據(jù)窗口范圍的起始百分比0-100end: 50,//數(shù)據(jù)窗口范圍的結(jié)束百分比0-100xAxisIndex: [0],// 此處表示控制第一個(gè)xAxis，設(shè)置 dataZoom-slider 組件控制的 x軸 可是已數(shù)組[0,2]表示控制第一，三個(gè)；xAxisIndex: 2 ，表示控制第二個(gè)。yAxisIndex屬性同理bottom: -10 //距離底部的距離},//2.在內(nèi)部可以橫向拖動{type: 'inside',// 內(nèi)置于坐標(biāo)系中start: 0,end: 30,xAxisIndex: [0]},//3.縱向使用滾動條{type: 'slider',show: true,yAxisIndex: [0],//設(shè)置組件控制的y軸left: '93%',//距離左側(cè)的距離 可以使百分比，也可以是像素 left: '30'（30像素）start: 29,end: 36},//4.在內(nèi)部可以縱向拖動{type: 'inside',yAxisIndex: [0],start: 29,end: 36} ],

總結(jié)

以上是生活随笔為你收集整理的Echarts实现X轴拖动显示效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。