uniapp打包发布至app端 echarts图表不显示问题

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

解决方法：

        renderjs

一、xml        

 二、data数据

 三、script导入

 

 四、源码

<template>
    <view class="content">
        <view
          :prop="option"
          :change:prop="echarts.updateEcharts"
          id="echarts"
          class="echarts"
        ></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                option : {
                    grid: {
                    top: '0',
                    left: '0',
                    right: '0',
                    bottom: '0',
                    },
                    title: {
                      text: '',
                      subtext: '',
                      x: 'center'
                    },
                    legend: {
                      orient: 'horizontal',
                      icon: "circle",
                      textStyle: { 
                          color: 'rgba(102, 102, 102, 1)',
                            padding: [0, 0, 0, -8],
                          fontSize: 12
                      },
                      itemHeight: 6,
                      left: '10%',  //图例距离左的距离
                      y: '90%',  //图例上下居中
                      data: ["投礁型","田园型","游钓型","底播型","装备型"]
                    },
                    color: ['rgba(156, 107, 250, 1)', 'rgba(88, 227, 154, 1)', 'rgba(248, 202, 93, 1)',
                            'rgba(105, 222, 219, 1)', 'rgba(218, 114, 204, 1)'],//五个数据，五个颜色
                    series: [
                      {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '65%'],  //图的大小
                        center: ['50%', '50%'], //图的位置，距离左跟上的位置
                        data:[
                          {
                            name:"投礁型",
                            value:'10'
                          },
                          {
                            name:"田园型",
                            value:'8'
                          },
                          {
                            name:"游钓型",
                            value:'9'
                          },
                          {
                            name:"底播型",
                            value:'5'
                          },
                          {
                            name:"装备型",
                            value:'6'
                          }
                        ]
                      }
                    ]
                },}
        }
    }
</script>

<script module="echarts" lang="renderjs">
    let myChart
    export default {
        mounted() {
            if (typeof window.echarts === 'function') {
                this.initEcharts()
            } else {
                // 动态引入较大类库避免影响页面展示
                const script = document.createElement('script')
                // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
                script.src = 'static/echarts.js'
                script.onload = this.initEcharts.bind(this)
                document.head.appendChild(script)
            }
       
        },
        methods: {
            initEcharts() {
                setTimeout(() => {
                  myChart = echarts.init(document.getElementById('echarts'))
                  // 观测更新的数据在 view 层可以直接访问到
                  myChart.setOption(this.option)
                })
                // 这里是用于窗口变化时的自适应，利用的是echarts自带的resize方法
                window.addEventListener('resize', () => {
                    myChart.resize()
                });
                
            },
            updateEcharts(newValue, oldValue, ownerInstance, instance) {
                // 监听 service 层数据变更
                if(myChart) {
                  myChart.setOption(newValue)
                  window.addEventListener('resize', () => {
                      myChart.resize()
                  });
                }
            },
            onClick(event, ownerInstance) {
                // 调用 service 层的方法
                ownerInstance.callMethod('onViewClick', {
                    test: 'test'
                })
            }
        }
    }
</script>

<style>
    .echarts {
        width: 100%;
        height: 434rpx;
    }
</style>