uni-app VUE3项目对接秋云ECharts的时候不好使

开发环境	版本号	项目创建方式
Windows	win11	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows
PC开发环境操作系统版本号：win11
HBuilderX类型：正式
HBuilderX版本号：4.76
手机系统：Android
手机系统版本号：Android 15
手机厂商：华为
手机机型：nova13pro
页面类型：vue
vue版本：vue3
打包方式：云端

示例代码：

```html
<template>  
    <view class="page">  
        <guogong-navbar :shadow="false" content-background='transparent'></guogong-navbar>  
        <image :src="STATIC_URL + 'iot/param-icon.png'" style="width: 220rpx;height: auto;position: fixed;right: 32rpx;z-index: -1" :style="{top: CustomBar + 'px'}" mode="widthFix"></image>  

<!--        <view class="param_title">{{ pageData.deviceName }}</view>-->
        <view class="param_title">平行反应仪详情</view>  

        <view class="param_detail_item" v-if="pageData">  
            <view class="flex align-center justify-between">  
<!--                <view class="param_detail_title">{{pageData.stationName}}</view>-->
                <view class="param_detail_title">通道#1</view>  
                <view @tap.stop="handleJump" :data-url="`/pages/device/paramSetting?id=${props.id}&amp;deviceId=${props.deviceId}`">  
                    <uni-icons type="more-filled" size="28rpx" style="transform: rotate(90deg)" color="var(--font-color-content)"></uni-icons>  
                </view>  
            </view>  

            <view class="flex align-start u-m-t-32">  
                <image :src="STATIC_URL + 'iot/param-icon.png'" style="width: 160rpx;height: auto" mode="widthFix"></image>  
                <view class="param-area">  
                    <template v-for="itemP in pageData.outParametersRunningRecordsVOList" :key="itemP.id">  
                        <view class="flex align-center" v-if="itemP.displayType === '4'" style="margin-left: 24rpx;margin-top: 12rpx">  
                            {{ itemP.parameterName }}：<image :src="STATIC_URL + (itemP.parameterValue === '1' ? 'iot/warning.png' : 'iot/normal.png')" style="width: 40rpx;height: 40rpx"></image>  
                        </view>  
                    </template>  
                </view>  
            </view>  

            <view class="monitor-data">  
                <!--    只展示动态的 dataType为2   -->  
                <!--    左   -->  
                <view class="monitor-data-col">  
                    <view class="monitor-data-item" v-for="(item, index) in pageData.left" :key="'inner' + index">  
                        <view class="monitor-data-row">  
                            <image :src="STATIC_URL + 'iot/temp.png'" style="width: 33%;height: auto;margin-right: 20rpx;aspect-ratio: 1 / 1;" alt="" v-if="item.capabilityIconName==='temp.png'"></image>  
                            <image :src="STATIC_URL + 'iot/rpm.png'" style="width: 33%;height: auto;margin-right: 20rpx;aspect-ratio: 1 / 1;" alt="" v-if="item.capabilityIconName==='rpm.png'"></image>  
                            <image :src="STATIC_URL + 'iot/pressure.png'" style="width: 33%;height: auto;margin-right: 20rpx;aspect-ratio: 1 / 1;" alt="" v-if="item.capabilityIconName==='pressure.png'"></image>  
                            <view class="monitor-data-text">  
                                <view class="monitor-data-title">{{ item.parameterName }}</view>  
                                <view class="monitor-data-content">{{ item.parameterValue }}{{ item.unit || '' }}</view>  
                            </view>  
                        </view>  
                        <!--     展示设定的静态数据 dataType为1 双方能力id相同     -->  
                        <template v-for="(itemS, indexS) in pageData.innerParametersRunningRecordsVOList">  
                            <view class="monitor-data-setting" :key="'innerStatic' + indexS" v-if="itemS.displayType !== '3' && itemS.dataType === '1' && itemS.capabilityId === item.capabilityId">  
                                {{ itemS.parameterName }}：{{ itemS.parameterValue }}{{ item.unit || '' }}  
                            </view>  
                        </template>  
                        <!--     展示按钮数据 双方能力id相同  displayType：展示类型【1 文本 2 数值 3 开关 4 状态】   -->  
                        <template v-for="(itemS, indexS) in pageData.innerParametersRunningRecordsVOList">  
                            <view class="monitor-data-switch" :key="'innerSwitch' + indexS" v-if="itemS.displayType === '3' && itemS.capabilityId === item.capabilityId">  
                                <text style="width: 120rpx;">{{ itemS.parameterName }}:</text>  
                                <switch style="transform: scale(0.7)" @change="switchChange($event, itemS)" disabled />  
                            </view>  
                        </template>  
                    </view>  
                </view>  
                <!--    右   -->  
                <view class="monitor-data-col">  
                    <view class="monitor-data-item" v-for="(item, index) in pageData.right" :key="'inner' + index">  
                        <view class="monitor-data-row">  
                            <image :src="STATIC_URL + 'iot/temp.png'" style="width: 33%;height: auto;margin-right: 20rpx;aspect-ratio: 1 / 1;" alt="" v-if="item.capabilityIconName==='temp.png'"></image>  
                            <image :src="STATIC_URL + 'iot/rpm.png'" style="width: 33%;height: auto;margin-right: 20rpx;aspect-ratio: 1 / 1;" alt="" v-if="item.capabilityIconName==='rpm.png'"></image>  
                            <image :src="STATIC_URL + 'iot/pressure.png'" style="width: 33%;height: auto;margin-right: 20rpx;aspect-ratio: 1 / 1;" alt="" v-if="item.capabilityIconName==='pressure.png'"></image>  
                            <view class="monitor-data-text">  
                                <view class="monitor-data-title">{{ item.parameterName }}</view>  
                                <view class="monitor-data-content">{{ item.parameterValue }}{{ item.unit || '' }}</view>  
                            </view>  
                        </view>  
                        <!--     展示设定的静态数据 dataType为1 双方能力id相同     -->  
                        <template v-for="(itemS, indexS) in pageData.innerParametersRunningRecordsVOList">  
                            <view class="monitor-data-setting" :key="'innerStatic' + indexS" v-if="itemS.displayType !== '3' && itemS.dataType === '1' && itemS.capabilityId === item.capabilityId">  
                                {{ itemS.parameterName }}：{{ itemS.parameterValue }}{{ item.unit || '' }}  
                            </view>  
                        </template>  
                        <!--     展示按钮数据 双方能力id相同  displayType：展示类型【1 文本 2 数值 3 开关 4 状态】   -->  
                        <template v-for="(itemS, indexS) in pageData.innerParametersRunningRecordsVOList">  
                            <view class="monitor-data-switch" :key="'innerSwitch' + indexS" v-if="itemS.displayType === '3' && itemS.capabilityId === item.capabilityId">  
                                <text style="width: 120rpx;">{{ itemS.parameterName }}:</text>  
                                <switch style="transform: scale(0.7)" @change="switchChange($event, itemS)" disabled />  
                            </view>  
                        </template>  
                    </view>  
                </view>  
            </view>  
        </view>  

        <view class="echart-container" v-if="eChartArr" v-for="(item, index) in eChartArr" :key="item.parameterId">  
            <view class="echart-title">{{ item.parameterName }}</view>  
            <image :src="STATIC_URL + 'iot/full-screen.png'" style="width: 48rpx;height: 48rpx;position: absolute;right: 24rpx;top: 24rpx" @tap="handleJump" :data-url="`/pages/device/eChartPage?id=${item.parameterId}&amp;deviceId=${props.deviceId}`"></image>  
            <l-echart ref="myChartRef" :beforeDelay='1000' :id="'chart' + index" />  
        </view>  
    </view>  
</template>

操作步骤：

真机调试成功后，后台划掉app并重新进入

预期结果：

正常显示图表

实际结果：

无法正常显示，也不报错

bug描述：

h5显示一切正常，到了APP调试就犯病了
刚刷进去就是好的，一旦从后台划掉App再进去就不显示图表了，而且控制台不报错
数据量大概是四个图表，每个图表120个点位

更多关于uni-app VUE3项目对接秋云ECharts的时候不好使的实战教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 1楼

三方插件的相关问题可以反馈到插件社区，或者联系插件作者解决

更多关于uni-app VUE3项目对接秋云ECharts的时候不好使的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼

这个不是三方插件问题，echarts在真机里就会遇到，wo就是写死数据也会遇到这个问题。我更换其他插件依旧有问题

eggper 3楼

试下这个uni-echarts

caililin 4楼作者

还是不行，不是插件的事情，换了也是一样的

phonegap100 5楼

在uni-app Vue3项目中集成秋云ECharts时遇到App端图表不显示的问题，主要涉及以下几个关键点：

组件初始化时机问题
App端从后台重新进入时，l-echart组件可能未正确重新初始化。建议在页面的onShow生命周期中手动触发图表重绘：
```
onShow() {
  this.$nextTick(() => {
    this.$refs.myChartRef?.forEach(chart => chart.init())
  })
}
```
组件引用方式
Vue3中需通过ref获取图表实例。确保在模板中正确声明：
```
<l-echart ref="myChartRef" :id="'chart' + index" />
```
并在onMounted中初始化图表数据绑定。
渲染延迟处理
秋云ECharts在App端需要确保DOM完全渲染。可尝试增加初始化延迟：
```
setTimeout(() => {
  this.initCharts()
}, 100)
```
内存管理
每个图表120个点位的数据量较大，需在onHide中手动销毁图表实例：
```
onHide() {
  this.$refs.myChartRef?.forEach(chart => chart.dispose())
}
```
平台差异处理
H5与App端底层渲染机制不同，建议在初始化时添加平台判断：
```
#ifdef APP-PLUS
// App端特殊处理
#endif
```