uni-app javascript 129.《uniapp在移动端app使用echarts白屏问题解决方案》

文章目录

方案一：优点缺点

方案二：优点缺点

在我们uniapp开发中,难免会使用到 echarts 图标，这些图表在我们浏览器端编译没有任何问题，但是一旦编译到手机端app就会出现白屏问题，报错是没有 document 显而易见，手机端是没有dom节点的，为了解决这个问题，提供了两种解决方案，各有优劣

方案一：

使用 HBuilder X 导入插件在页面直接使用就行，

方案一插件地址https://ext.dcloud.net.cn/plugin?id=8017完整代码

页面使用：

优点

1.能够像在pc端使用 echarts 一样，任意配置，没有额外的学习成本

2.使用简单 uniapp 插件市场提供了插件开箱即用

缺点

echarts中 dataZoom属性在移动端失效，无法在移动端拖拽，在sersor中使用渐变色 new echarts无法生效，报错

方案二：

通过原生的方法解决

完成代码

优点

1.因为使用了 原生的方法，所以兼容性相对方案一来说相对好点，其中的 dataZoom 属性正常生效

2.不需要安装任何插件，直接导入页面替换 option 使用就行

缺点

正因为使用原生方法，所以导致使用起来麻烦点，没有方案一中那样，直接配置就行

参考阅读

 您阅读本篇文章共花了：