uniapp手机APP webview使用echarts显示问题（腾讯X5内核）

一、问题描述

webview页面中引用了一些基于echarts封装的js文件，用于在手机上展示仪表盘

在iQOO8 pro上显示并无问题，而在vivo x21A上显示有问题，如下图所示

vivo x21A

iQOO8 pro

二、解决过程

先说结论，出现这个问题是因为echarts和手机浏览器内核不兼容，webview组件默认使用的是手机系统自带浏览器内核，将app使用的内核更换为腾讯X5内核并重启手机即可解决问题。

首先，我尝试通过下载chrome浏览器和QQ浏览器来更新手机的浏览器内核，但是都没有生效，也尝试过手动更新webview内核，但是因为方法过于繁琐就放弃了。

后来发现uniapp可以将webview使用的内核修改为腾讯X5内核，只需在manifest的app模块配置中，勾选Android X5 Webview（腾讯TBS）即可，具体方法和注意事项参考uni-app官网

勾选之后一定要重新制作自定义基座或者云打包，否则不会生效。

最后，将APP安装到手机之后一定要重启手机。

三、与内核相关的一些尝试

微信，最开始尝试在微信中打开X5内核调试专用页、debugmm.qq.com/?forcex5=true和X5内核调试专用页等页面查看微信使用的X5内核版本，但是由于新版本的微信已经不再使用X5内核所以从微信得到的结论只是需要下载X5内核（如果有朋友知道旧版本的微信能不能查看X5内核版本可以留个评论）。

系统设置，在开发者选项中可以查看手机使用的webview内核，但是即便App使用了X5内核，这里也只会显示Android System Webview及其版本。

uniapp，从uni-app官网中得知，可以在uniapp中打印这段代码plus.navigator.getUserAgent()，如果在打印的文字中出现了MQQBrowser关键字，则代表当前的app使用了X5内核。