uni问题:APP端Echarts图表不显示

uni问题:APP端Echarts图表不显示_第1张图片

 

素材编辑 | 宋大狮

排版运营 | 小唐狮

ONE 问题描述

今天在做uni的APP项目时,遇到了一个令人费解的问题。需求是要在APP端使用折线图对上一个月的利息进行展示,于是很自然的我使用了Echarts进行图表的绘制,参考Echarts官网示例,在H5端很轻松的就将图表画了出来。然后,带着激动的心情,运行到APP端测试,果然不出所料,有问题,页面一片空白。

uni问题:APP端Echarts图表不显示_第2张图片

TWO 解决过程

尝试一:

思路:考虑是否是样式问题,令图表没有显示

实现:调整图表容器的宽高和位置,将容器的层级index调到最高

结果:改变样式图表依旧没有显示,只是容器产生了变化

尝试二:

思路:考虑是否是数据问题,没有拿到x轴和线条的data数据

实现:打印接口返回的数据,发现数据有,然后注释掉接口的数据,将x轴和线条的data数据写死,发现依旧不显示图表

结果:排除掉数据缺失的问题

尝试三:

思路:排除样式和数据问题后,推测大概率是初始化Echarts实例时的问题了

实现:在查阅官方文档后,发现uni中非web端运行在V8引擎中,不支持web端的window、document、navigator等浏览器的API,只支持标准ES语法。因此借助网上的参考,进行Echarts组件封装,借助renderjs 在视图层操作dom ,进行Echarts实例初始化,并将配置数据定义在主script中的data中,在主script中进行数据的处理。

uni问题:APP端Echarts图表不显示_第3张图片

结果:APP端图表成功显示

uni问题:APP端Echarts图表不显示_第4张图片

THERE 知识总结

总结一:

问题复盘

uni中非web端运行在V8引擎中,不支持web端的window、document、navigator等浏览器的API,只支持标准ES语法。不能直接通过document操作dom,只有借助renderjs才能在视图层操作dom,从而进行Echarts实例初始化。

总结二:

renderjs简介

renderjs是一个运行在视图层的js。

主要作用:
大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力
在视图层操作dom

使用方式:
设置 script 节点的 lang 为 renderjs

    export default {
        mounted() {
            // ...
        },
        methods: {
            // ...
        }
    }

总结三:

Echarts示例回顾

// 图表容器
    // 基于准备好的dom,初始化echarts实例     var myChart = echarts.init(document.getElementById('main'));     // 指定图表的配置项和数据     var option = {         title: {             text: 'ECharts 入门示例'         },         tooltip: {},         legend: {             data: ['销量']         },         xAxis: {             data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']         },         yAxis: {},         series: [             {                 name: '销量',                 type: 'bar',                 data: [5, 20, 36, 10, 10, 20]             }         ]     };     // 使用刚指定的配置项和数据显示图表     myChart.setOption(option);  

总结四:

Echart封装组件模板






    // 将npm方式下载的echarts插件引入进来
    import * as echarts from 'echarts';

    export default {
        mounted() {
            let that = this;
            // 通过nextTick异步画图
            this.$nextTick(() => {
                that.initEcharts()
            });

        },
        methods: {
            // 初始化
            initEcharts() {
                this.myChart = echarts.init(document.getElementById('echart'))
                this.myChart.setOption(this.option);

                // 这里是用于窗口变化时的自适应,利用的是echarts自带的resize方法
                window.addEventListener('resize', () => {
                    this.myChart.resize()
                });
            },

            // 监听配置数据变化,并重新渲染
            updateEcharts(newValue, oldValue, ownerInstance, instance) {
                if (this.myChart) {
                    this.myChart.setOption(newValue);
                }
            },
        },
    }



    .echarts {
        width: 100%;
        height: 500rpx;
    }

FOUR 集思广益

欢迎各位大佬对此类问题留言或私信指教,让大家一起学习提高!

- END -

ABOUT 关于作者

  • 宋大狮 | 轻轻松松工作,简简单单生活

  • 小唐狮 | 广场舞大军中最靓的仔

你可能感兴趣的:(前端问题合集,echarts,前端,vue.js)