vue+ vant + antv开发H5页面,图表在iphone不显示

时间:2024-03-15 08:41:58

在安卓手机上可以正常显示,苹果手机上图表展示不出来。

方案排除:

一、一开始以为是前后都数据交互时,数据没有请求完就开始调取创建 Chart 对象,载入数据源,渲染图表的函数。但,我在vue中当请求数据时,调了另一个函数绘制图表的方法_this.$options.methods.caseChart.bind(this)();,排除
二、vue开发移动端在手机实时预览
1、电脑和手机连接同一个WiFi
2、查询电脑本地IP 地址(WIN + R ,输入 cmd 回车,打开命令提示符,输入 config ,查看本地 IPv4)
3、修改项目中的 IP 地址(找到项目中的config文件夹中的index.js文件)
vue+ vant + antv开发H5页面,图表在iphone不显示
4、制作二维码实现手机预览
访问链接:https://cli.im/ 生成二维码,使用手机扫描即可
vue+ vant + antv开发H5页面,图表在iphone不显示

三、苹果手机Safari的开发工具
1、打开safari浏览器开发者模式
正常再PC的safari的菜单栏里有开发选项,如果没有请参考以下链接进行设置:
https://jingyan.baidu.com/article/6dad507529d1c8a122e36e50.html
2、链接ios设备 通过数据线链接要调试的ios设备
3、配置ios设备
连接设备后,打开系统设置->safari浏览器->高级->网页检查器->打开->PC浏览器点击开发->找到调试设备->点击用于开发->调试设备上点击信任
4、开始调试
打开设备对应web页面,在PC浏览器中找到对应页面,然后点击进行对应调试

通过此方法可以在iphone上看到控制台,通过debugger找到原因:返回的日期格式导致的
之前的返回格式
vue+ vant + antv开发H5页面,图表在iphone不显示
修改返回的格式
vue+ vant + antv开发H5页面,图表在iphone不显示

显示效果

vue+ vant + antv开发H5页面,图表在iphone不显示
vue+ vant + antv开发H5页面,图表在iphone不显示