自己写了个曲线图,用随机生成2条线分别为1000个点做测试,在华为p10+和ios模拟器以及微信小程序上,touchmove显示tooltip时会比较卡。而用浏览器本身做测试2条线每条先数据可以到3000点还很顺畅。 下面这两张图是2条线,每条线分别为3000点的数据测试。 这张是浏览器模拟器: 这张是ios模拟器:
移动端的性能比pc弱 app和小程序的架构是视图层和逻辑层分离的,触摸事件需要异步通信:触摸->视图层->通知->逻辑层->计算->通知->视图层->渲染。逻辑层和视图层通信损耗比较大,需要注意减少交互频次。 使用web-view组件,里面的js和渲染层是不分离的,交互效率更高
通过不断测试,在当前情况下找到的最优解决方案: 1、取得用户的touch或者click等坐标传给绘图组件; 2、在绘图组件里获取图表对应的数据(包括图表的边界,x、y轴数据点等)然后传回给前端; 3、在页面通过css绘制提示 效果可以看下面两张图,演示图中分别为每条线5000个数据点: web模拟器的: ios模拟器的: