uni问题:APP端Echarts图表不显示
发布网友
发布时间：2024-10-02 14:51
共1个回答
热心网友
时间：2024-10-25 08:33
今天在做uni的APP项目时，遇到了一个令人费解的问题。需求是要在APP端使用折线图对上一个月的利息进行展示，于是很自然的我使用了Echarts进行图表的绘制，参考Echarts官网示例，在H5端很轻松的就将图表画了出来。然后，带着激动的心情，运行到APP端测试，果然不出所料，有问题，页面一片空白。
TWO 解决过程
尝试一：
思路：考虑是否是样式问题，令图表没有显示
实现：调整图表容器的宽高和位置，将容器的层级index调到最高
结果：改变样式图表依旧没有显示，只是容器产生了变化
尝试二：
思路：考虑是否是数据问题，没有拿到x轴和线条的data数据
实现：打印接口返回的数据，发现数据有，然后注释掉接口的数据，将x轴和线条的data数据写死，发现依旧不显示图表
结果：排除掉数据缺失的问题
尝试三：
思路：排除样式和数据问题后，推测大概率是初始化Echarts实例时的问题了
实现：在查阅官方文档后，发现uni中非web端运行在V8引擎中，不支持web端的window、document、navigator等浏览器的API，只支持标准ES语法。因此借助网上的参考，进行Echarts组件封装，借助renderjs 在视图层操作dom ，进行Echarts实例初始化，并将配置数据定义在主script中的data中，在主script中进行数据的处理。
结果：APP端图表成功显示
THERE 知识总结
总结一：
问题复盘
uni中非web端运行在V8引擎中，不支持web端的window、document、navigator等浏览器的API，只支持标准ES语法。不能直接通过document操作dom，只有借助renderjs才能在视图层操作dom，从而进行Echarts实例初始化。
总结二：
renderjs简介
总结三：
Echarts示例回顾
总结四：
Echart封装组件模板
FOUR 集思广益
欢迎各位大佬对此类问题留言或私信指教，让大家一起学习提高！
