taro微信小程序中使用 taro-react-echarts 展示图表数据，因为数据量大，需要使用dataZoom来左右滑动图表。
实现效果
解决
首先在echarts的options中添加
xAxis:...
yAxis:...
dataZoom: [
{
type: 'inside',
start: 0,
end: data.time?.length > 20 ? (20 / data.time?.length) * 100 : 100,
filterMode: 'none'
},
],
series:...
发现在开发者工具和真机上，均不能滚动，没反应！！！
之后查看 taro-react-echarts 包的代码，修改如下
修改文件 taro-react-echarts/dist/index.js
function touchStart({ chart, event }) {
if (chart && event.touches.length > 0) {
const touch = event.touches[0];
console.log('touch', touch)
const handler = chart.getZr().handler;
handler.dispatch('mousedown', {
zrX: touch.x,
zrY: touch.y,
preventDefault: () => { },
stopImmediatePropagation: () => { },
stopPropagation: () => { },
});
// handler.dispatch('mousemove', {
// zrX: touch.x,
// zrY: touch.y,
// preventDefault: () => { },
// stopImmediatePropagation: () => { },
// stopPropagation: () => { },
// });
handler.processGesture(wrapTouch(event), 'start');
}
}
function touchMove({ chart, event }) {
if (chart && event.touches.length > 0) {
const touch = event.touches[0];
const handler = chart.getZr().handler;
// handler.dispatch('mousedown', {
// zrX: touch.x,
// zrY: touch.y,
// preventDefault: () => { },
// stopImmediatePropagation: () => { },
// stopPropagation: () => { },
// });
handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y,
preventDefault: () => { },
stopImmediatePropagation: () => { },
stopPropagation: () => { },
});
handler.processGesture(wrapTouch(event), 'start');
}
}
代码行数见截图
