uniapp中加载Echarts图表H5可以显示正常图表， 打包app图表不显示的问题_uniapp打包发布至app端 echarts图表不显示问题

uniapp 打包成apk echarts需要使用render.js

在使用 UniApp 将应用打包成 APK 时，如果你在应用中使用了 ECharts 图表库，可能会需要使用 render.js 文件。ECharts 是一个基于 JavaScript 的数据可视化库，它可以用于在网页中创建各种类型的交互式图表和数据可视化展示。

在 UniApp 中，由于多端适配的特性，ECharts 需要通过 render.js 文件来进行多端的适配工作。这个 render.js 文件会根据当前的运行环境来选择合适的渲染方式，以确保 ECharts 在不同平台下都能正常显示和交互。这意味着在打包成 APK 时，需要确保 render.js 文件能够正确地适配到 Android 平台。

因此，如果你在 UniApp 中使用 ECharts，并且希望将应用打包成 APK，确保在打包过程中包含了 render.js 文件，并且在使用 ECharts 时按照文档要求正确配置 render.js，以确保图表库能够在 APK 中正常运行和显示。

<template>
    <view class="content">
        <view
          :prop="option"
          :change:prop="echarts.updateEcharts"
          id="echartsa"
          class="echarts"
        ></view>
    </view>
</template>
 
<script>
    export default {
		props: {
			echartsPhaseData1: Object,
			phaseCont:String
		},
        data() {
            return {
				seriesTemp:[[],[],[]],
                option :  {
				    animation: false,
					title:{
						subtext: "t(ms)",
						right: 0,
						bottom: 0,
						subtextStyle: {
						  fontSize: 12,
						  fontWeight:"normal"
						},
					},
				    grid: {
						top: 40,
						left: 20,
						right: 45,
						bottom: 4,
						show: true,
						borderColor:"#000",
						borderWidth:1,
						zlevel:99,
						containLabel: true
				    },
				    xAxis: [{
						name: '',
						nameTextStyle:{
							color:"#999"
						},
						type: 'category',				
						boundaryGap: false,
						axisTick: {
							show:false,
							alignWithLabel: true
						},
						axisLine: {
							lineStyle: {
							  color: "#000"
							}
						},
						axisLabel: {
						  interval: 6,
						} ,
						splitLine: {
							show: true,
						},
						// prettier-ignore
						data: ['0', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '20']
					}],
					yAxis: [{
						name: 'U(V)',
						nameTextStyle:{
							color:"#999"
						},
						minorTick: {
						  show: false
						},
						type: "value",
						axisTick: {
						  show: false
						},
						splitLine: {
						  show: true,
						},
						axisLine: {
						  show: false,
							lineStyle: {
							  color: "#000"
							}
						},
					}],
				    series: [
						{
							type: 'line',
							showSymbol: false,
							smooth: 1,
							color:"#FFB900",
							clip: true,	
							data: []
						},
						{
							type: 'line',
							showSymbol: false,
							smooth: 1,
							color:"#17874A",
							clip: true,
							data: []
						},
						{
							type: 'line',
							showSymbol: false,
							smooth: 1,
							color:"#CD3F3F",
							clip: true,
							data: []
						}
				    ]
				},}
        },
		
		watch: {
			//watch事件监听，可以监听data里的值，可以监听props里传来的值
			
			phaseCont:{
				handler(newValue, oldValue) {
				},
				deep: true
			},
			echartsPhaseData1: {
				handler(newValue, oldValue) {
					
				},
				deep: true
			},
		},
		
		
		methods: {	
		}
    }
</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/js/echarts.min.js'
                script.onload = this.initEcharts.bind(this)
                document.head.appendChild(script)
            }
       
        },
        methods: {
			func2(x) {
			  x /= 10;
			  return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
			},
			generateData2() {
			  let data = [];
			  for (let i = 0; i <= 200; i += 0.1) {
			    data.push([i, this.func2(i)]);
			  }
			  return data;
			},
			
			func3(x) {
			  x /= 20;
			  return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
			},
			generateData3() {
			  let data = [];
			  for (let i = 0; i <= 200; i += 5) {
			    data.push([i, this.func3(i)]);
			  }
			  return data;
			},
            initEcharts() {
                setTimeout(() => {
                  myChart = echarts.init(document.getElementById('echartsa'))
                  // 观测更新的数据在 view 层可以直接访问到
                  myChart.setOption(this.option)
				  myChart.resize()
				  // this.option.series[1].data = "";
                },300)
                // 这里是用于窗口变化时的自适应，利用的是echarts自带的resize方法
                window.addEventListener('resize', () => {
                    myChart.resize()
                });
                
            },
            updateEcharts(newValue, oldValue, ownerInstance, instance) {
                // 监听 service 层数据变更
                if(myChart) {
					setTimeout(() => {
						console.log(newValue,"series11")
						myChart.setOption(newValue)
						myChart.resize()
					},300)
                  
                  window.addEventListener('resize', () => {
                      myChart.resize()
                  });
                }
            },
            onClick(event, ownerInstance) {
                // 调用 service 层的方法
                ownerInstance.callMethod('onViewClick', {
                    test: 'test'
                })
            }
        }
    }
</script>
 
<style>
    .echarts {
        width: 690upx;
        height: 434rpx;
    }
</style>