[Bug] Vue3 + uniapp + 移动端H5 设置 dataZoom 属性后不生效 （type: 'inside'; // 水平滑动 start；end;）都不生效

[zh17625375207]

Version

5.4.3

Link to Minimal Reproduction

// prettier-ignore let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放']; // prettier-ignore let data = [22, 18, 19, 23, 29, 33, 31, 12, 12, 21, 20, 19, 10, 22, 33, 34, 18, 13, 15, 22]; let yMax = 5; let dataShadow = []; for (let i = 0; i < data.length; i++) { dataShadow.push(yMax); } option = { title: { text: '特性示例：渐变色 阴影 点击缩放', subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom' }, xAxis: { data: dataAxis, axisLabel: { color: '#999' }, axisTick: { show: true }, axisLine: { show: true }, }, yAxis: { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: '#999' } }, grid: [ { left: '10%', right: '10%', bottom: 90 }, { left: '10%', right: '10%', height: 8, bottom: 8 } ], dataZoom: [ { type: 'inside', moveOnMouseMove: true, start: 70, end: 100 } ], series: [ { type: 'bar', showBackground: true, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, { offset: 1, color: '#188df0' } ]) }, emphasis: { itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#2378f7' }, { offset: 0.7, color: '#2378f7' }, { offset: 1, color: '#83bff6' } ]) } }, data: data } ] };

Steps to Reproduce

Vue3 + uniapp + 移动端H5

Current Behavior

设置 dataZoom 属性后不生效
都不生效
dataZoom: [
{
type: 'inside',
moveOnMouseMove: true,
start: 70,
end: 100,
},
],
正常官方案例 web端设置上 dataZoom 属性 配置上 type: 'inside', 设置上 开始和结束 首先 渲染的时候 就会根据设置的 start: 40,
end: 100, 展示可视区域 比如 X轴一共17条数据 默认加载只展示 7条 然后 在H5中完全不生效 直接全部17条数据都加载出来了

Expected Behavior

希望能正常兼容 h5 水平滑动 就像K线图那样 默认展示7天 水平滑动查看历史数据

***上面发的案例 在web端确实可以滑动 生效 但在 Vue3 + uniapp + 移动端H5 不生效

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[echarts-bot]

@zh17625375207 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] Vue3 + uniapp + mobile H5 does not take effect after setting the dataZoom attribute (type: 'inside'; // horizontal sliding start; end;) does not take effect

BODY

Version

5.4.3

Link to Minimal Reproduction

// prettier-ignore let dataAxis = ['point', 'hit', 'column', 'child', 'or', '人', 'two', 'finger', 'in', 'touch', ' screen', 'up', 'sliding', 'moving', 'can', 'enough', 'auto', 'moving', 'shrink', 'put']; // prettier-ignore let data = [22 , 18, 19, 23, 29, 33, 31, 12, 12, 21, 20, 19, 10, 22, 33, 34, 18, 13, 15, 22]; let yMax = 5; let dataShadow = [] ; for (let i = 0; i < data.length; i++) { dataShadow.push(yMax); } option = { title: { text: 'Feature Sample: Gradient Shadow Click to Zoom', subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom' }, xAxis: { data: dataAxis, axisLabel: { color: '#999' }, axisTick: { show: true }, axisLine: { show: true }, }, yAxis: { axisLine : { show: false }, axisTick: { show: false }, axisLabel: { color: '#999' } }, grid: [ { left: '10%', right: '10%', bottom: 90 }, { left: '10%', right: '10%', height: 8, bottom: 8 } ], dataZoom: [ { type: 'inside', moveOnMouseMove: true, start: 70, end: 100 } ], series : [ { type: 'bar', showBackground: true, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, { offset: 1, color: '#188df0' } ]) }, emphasis: { itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#2378f7' }, { offset: 0.7, color: '#2378f7' }, { offset: 1, color: '#83bff6' } ]) } }, data: data } ] };

Steps to Reproduce

Vue3 + uniapp + mobile H5

Current Behavior

It does not take effect after setting the dataZoom attribute
None of them take effect
dataZoom: [
{
type: 'inside',
moveOnMouseMove: true,
start: 70,
end: 100,
},
],
Normal official case: set the dataZoom attribute on the web side, configure the type: 'inside', and set the start and end. First, when rendering, it will be based on the set start: 40,
end: 100, display the visible area. For example, there are 17 pieces of data in the X-axis. By default, only 7 pieces of data are displayed. Then it does not take effect at all in H5. All 17 pieces of data are loaded directly.

Expected Behavior

I hope it can be normally compatible with h5. Horizontal sliding is just like the K-line chart. The default display is 7 days. Horizontal sliding to view historical data.

***The case posted above can indeed be slid on the web side and takes effect, but it does not take effect on Vue3 + uniapp + mobile H5

Environment

-OS:
-Browser:
- Framework:

Any additional comments?

No response

[echarts-bot]

@zh17625375207 Please provide a demo for the issue either with Official Editor, CodePen, CodeSandbox or JSFiddle.