子应用降级+保活模式下使用Echarts时渲染异常，且保活模式下无法记住子应用滚动条位置

xiechao1211 commented 1 year ago

描述bug 清晰准确的描述bug 1、使用官方仓库里的example本地运行，在Vue3子项目中新增了echart图表，在切换到其他项目或者主应用路径，再切回之后，echart图渲染异常 2、子应用滚动到底部后，再次切回，滚动条回到顶部去了 如何复现 给出详细的复现步骤 1、下载官网仓库，安装依赖，主应用的vue3组件配置degrade=true(保活模式在主应用的main.js已设置)

// examples/main-vue/src/views/Vue3.vue
<template>
  <!--保活模式，name相同则复用一个子应用实例，改变url无效，必须采用通信的方式告知路由变化 -->
  <WujieVue width="100%" height="100%" name="vue3" :url="vue3Url" :sync="true" :degrade="true"></WujieVue>
</template>

<script>
import hostMap from "../hostMap";
export default {
  data() {
    return {
      vue3Url: hostMap("//localhost:7300/"),
    };
  },
};
</script>

<style lang="scss" scoped></style>

2、vue3子项目单独安装echarts依赖且渲染一个简单折线图,Home文件修改如下

// examples/vue3/src/views/Home.vue
<template>
    <div>
        <HelloWorld msg="Vue3示例"></HelloWorld>
        <div id="chart" style="width: 100%; height: 400px;"></div>
        <div class="content" style="text-align: center">
            <p>
                当前vue版本
                <el-tag style="vertical-align: text-top" size="small">3.2.24</el-tag>
            </p>
            <p>
                当前element-plus版本
                <el-tag style="vertical-align: text-top" size="small">2.2.6</el-tag>
            </p>
            <p>
                当前ant-design-vue版本
                <el-tag style="vertical-align: text-top" size="small">2.2.8</el-tag>
            </p>
            <p>
                <el-button
                    @click="() => open('https://github.com/Tencent/wujie/tree/master/examples/vue3')">仓库地址</el-button>
            </p>
        </div>
    </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
import * as echarts from 'echarts';

export default {
    data() {
        return {
            open: window.open,
        };
    },
    components: {
        HelloWorld,
    },
    mounted() {
        var chartDom = document.getElementById('chart');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'axis',
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                },
                {
                    data: [230, 260, 224, 260, 135, 147, 135],
                    type: 'line'
                }
            ]
        };

        option && myChart.setOption(option);
    }
};
</script>

<style>
:root {
    --host-color: #f16b5f;
}
</style>

3、启动项目，打开vue3子应用，切换到主应用的【介绍】路径，再次点击【vue3】路径，即可发现图表加载异常，截图如下：