移动端使用 echarts中 滚动条 dataZoom 改造为内容区域可以左右滚动
直接上图 ：
主要是下面这段代码：
"dataZoom": [
{
"type": "inside",
"show": false,
"xAxisIndex": [
0
],
"zoomOnMouseWheel": false,
"moveOnMouseWheel": true,
"moveOnMouseMove": true,
"z": 4,
"filterMode": "filter",
"startValue": 0,
"endValue": 4,
"disabled": false,
"zoomLock": true,
"preventDefaultMouseMove": true,
"throttle": 100
},
{
"type": "slider",
"realtime": true,
"show": false,
"height": 6,
"width": 56,
"xAxisIndex": [
0
],
"fillerColor": "rgba(96, 172, 252,0.8)",
"borderColor": "rgba(96, 172, 252,0.6)",
"backgroundColor": "rgba(96, 172, 252,0.3)",
"showDataShadow": false,
"showDetail": false,
"left": 0,
"bottom": 6,
"moveHandleSize": 0,
"z": 4,
"filterMode": "filter",
"startValue": 0,
"endValue": 4,
"borderRadius": 3,
"handleSize": "0",
"zoomLock": true,
"brushSelect": false,
"throttle": 100
}
],
下面的代码仅供参考：
let dataZoomSlider = {
"type": "slider",
"realtime": true,//拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。
"show": false,//是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
"height": normalFontSize(12),//滚动条高度
"width": normalFontSize(112),//滚动条长度
"xAxisIndex": [
0
],
"fillerColor": "rgba(96, 172, 252,0.8)",//滑块填充颜色
"borderColor": "rgba(96, 172, 252,0.6)",//滚动条边框颜色
"backgroundColor": "rgba(96, 172, 252,0.3)",//滚动条背景颜色
"showDataShadow": false,
"showDetail": false,
// "right": 50,
"left": 0,
"bottom": normalFontSize(12),
"moveHandleSize": 0,
"z": 4,
"filterMode": "filter",
// "start": 0,
// // "end": 6,
// "end": 4,
startValue: 0, // 重点在这 -- 开始的值
endValue: 4, // 重点在这 -- 结束的值
"borderRadius": normalFontSize(6),//滚动条圆角
// "dataBackground": {
// "lineStyle": {
// "color": "#ccc",
// "width": 0.5
// },
// "areaStyle": {
// "color": "#ccc",
// "opacity": 0.2
// }
// },
// "selectedDataBackground": {
// "lineStyle": {
// "color": "#eee",
// // "width": 0.5
// },
// "areaStyle": {
// "color": "#eee",
// "opacity": 0.2
// }
// },
// "handleIcon": "path://M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z",
"handleSize": "0",//滑块左右两侧手柄大小，设为0则不显示
// "handleStyle": {
// "color": "#fff",
// "borderColor": "#ccc"
// },
// "moveHandleIcon": "path://M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z",
// "moveHandleStyle": {
// "color": "#999",
// "opacity": 0.7
// },
"zoomLock": true,//true 则锁定选择区域的大小，也就是说，只能平移，不能缩放
// "textStyle": {
// "color": "#333"
// },
"brushSelect": false,
// "brushStyle": {
// "color": "rgba(96, 172, 252,0.3)"
// },
// "emphasis": {
// "handleStyle": {
// "borderColor": "#ccc"
// },
// "moveHandleStyle": {
// "color": "#ccc"
// }
// },
"throttle": 100,
// "startValue": 0,
// "endValue": val
}
let dataZoomInside = {
"type": "inside",
// width: 50,
"show": false,
"xAxisIndex": [
0
],
"zoomOnMouseWheel": false,//滚轮是否触发缩放
"moveOnMouseWheel": true,//鼠标滚轮能否触发平移
"moveOnMouseMove": true,//鼠标移动能否触发平移
"z": 4,
"filterMode": "filter",
// "start": 0,
// // "end": 6,
// "end": 5,
startValue: 0, // 重点在这 -- 开始的值
endValue: 4, // 重点在这 -- 结束的值
"disabled": false,
"zoomLock": true,//true 则锁定选择区域的大小，也就是说，只能平移，不能缩放
"preventDefaultMouseMove": true,
"throttle": 100,
}
option = {
"color": [
"#60acfc"
],
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
},
"confine": true,
"extraCssText": "max-width:100%; white-space:pre-wrap"
},
"legend": {
"right": "0%",
"top": "2%",
"itemWidth": 6,
"itemHeight": 6,
"icon": "rect",
"textStyle": {
"color": "rgba(96, 172, 252,0.5)",
"width": 300,
"overflow": "truncate",
"ellipsis": "..."
}
},
"grid": {
"left": "3%",
"right": "3%",
"bottom": "40",
"top": "20%",
"containLabel": true
},
"xAxis": [
{
"type": "category",
"data": [
"类型1",
"类型2",
"类型3",
],
"axisTick": {
"show": false
},
"axisLine": {
"show": true,
"lineStyle": {
"color": "#ccc"
}
},
"splitLine": {
"show": false
},
"axisLabel": {
"show": true,
"color": "rgba(96, 172, 252,0.3)",
"fontSize": 13,
"margin": 8,
"showMaxLabel": true,
"interval": 0
}
}
],
"yAxis": [
{
"type": "value",
"name": "单位：",
"position": "left",
"nameTextStyle": {
"color": "rgba(96, 172, 252,0.5)",
"with": 80,
"align": "left"
},
"splitLine": {
"show": true,
"lineStyle": {
"type": "dashed",
"color": "#ccc"
}
},
"axisTick": {
"show": false
},
"axisLabel": {
"show": true,
"color": "rgba(96, 172, 252,0.6)",
"fontSize": 14
},
"minInterval": 1,
"alignTicks": false,
"max": 200
}
],
"dataZoom": [
{
"type": "inside",
"show": false,
"xAxisIndex": [
0
],
"zoomOnMouseWheel": false,
"moveOnMouseWheel": true,
"moveOnMouseMove": true,
"z": 4,
"filterMode": "filter",
"startValue": 0,
"endValue": 4,
"disabled": false,
"zoomLock": true,
"preventDefaultMouseMove": true,
"throttle": 100
},
{
"type": "slider",
"realtime": true,
"show": false,
"height": 6,
"width": 56,
"xAxisIndex": [
0
],
"fillerColor": "rgba(96, 172, 252,0.8)",
"borderColor": "rgba(96, 172, 252,0.6)",
"backgroundColor": "rgba(96, 172, 2520.3)",
"showDataShadow": false,
"showDetail": false,
"left": 0,
"bottom": 6,
"moveHandleSize": 0,
"z": 4,
"filterMode": "filter",
"startValue": 0,
"endValue": 4,
"borderRadius": 3,
"handleSize": "0",
"zoomLock": true,
"brushSelect": false,
"throttle": 100
}
],
"series": [
{
"data": [
"100",
"101",
"102",
],
"type": "bar",
"symbol": "none",
"name": "数量",
"barWidth": 12,
"yAxisIndex": 0,
"label": {
"show": true,
"position": "top",
"color": "rgba(96, 172, 252,0.6)",
"fontSize": 14
},
"areaStyle": {
"opacity": 0,
"color": {
"colorStops": [
{
"offset": 0,
"color": "rgba(96, 172, 252,0.3)"
},
{
"offset": 1,
"color": "rgba(96, 172, 252,0)"
}
],
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false
}
}
}
]
}
