swiper切换时，echarts图案与自定义图案分离

echarts文件

 1 <template>
 2   <div class="pr chart">
 3     <div ref="chart" class="chart-body"></div>
 4     <slot></slot>
 5   </div>
 6 </template>
 7 <script>
 8 export default {
 9   props: {
10     config: {
11       type: Object,
12       default: () => ({})
13     },
14 
15     onClick: {
16       type: Function,
17       default: () => {}
18     },
19     onDispatchAction: {
20       type: Object,
21       default: () => ({})
22     },
23     onMouseover: {
24       type: Function,
25       default: () => {}
26     }
27   },
28   watch: {
29     //观察option的变化const chart = this.$refs["chartContainer"].chart;
30     config: {
31       handler(newVal, oldVal) {
32         if (this.chart) {
33           if (newVal) {
34             this.chart.setOption(newVal);
35           } else {
36             this.chart.setOption(oldVal);
37           }
38         } else {
39           this.init();
40         }
41       },
42       deep: true //对象内部属性的监听，关键。
43     }
44   },
45 
46   mounted() {
47     if (!this.$echarts) {
48       return;
49     }
50 
51     let echartsWarp = this.$refs["chart"];
52 
53     console.log(echartsWarp);
54 
55     let chart = (this.chart = this.$echarts.init(echartsWarp));
56     chart.setOption(this.config);
57     chart.dispatchAction(this.onDispatchAction);
58 
59     chart.on("click", params => {
60       this.onClick(params);
61       chart.setOption(this.config);
62     });
63     chart.on("mouseover", params => {
64       this.onMouseover(params);
65     });
66     // window.addEventListener("resize", () => {
67     //   chart.resize();
68     // });
69   }
70 };
71 </script>
72 <style scoped>
73 .chart {
74   height: 3.7rem;
75    3.7rem;
76   margin: 0 auto;
77 }
78 .chart-body {
79    100%;
80   height: 100%;
81 }
82 .pr {
83   position: relative;
84 }
85 </style>

父页面切换两个页面的部分代码：

 1 <el-row class="pd-insurance-echarts" style="height: 4.8rem" router>
 2   <template v-for="route in $router.options.routes">
 3     <!-- {{route.name}} -->
 4     <swiper
 5       :options="swiperOption"
 6       ref="mySwiper"
 7       v-if="route.name == 'product2019'"
 8       :key="route.path"
 9       class="menu-temp"
10     >
11       <swiper-slide v-for="item in route.children" :key="item.path">
12         <keep-alive>
13           <component :is="item.component"></component>
14         </keep-alive>
15       </swiper-slide>
16       <div class="swiper-pagination" slot="pagination"></div>
17     </swiper>
18   </template>
19 </el-row>

使用echarts组件的文件中部分代码：

1 <Charts
2   ref="chartContainer"
3   :config="radarOptionConfig"
4   :onClick="onChartClick"
5   :onDispatchAction="onChartDispatch"
6   :onMouseover="onChartMouseover"
7 >
8   <div :class="triangle" ref="triangle"></div>
9 </Charts>

由于加了一个插槽，就是我自己画了一个三角形，然后swiper切换页面时，三角形和环形图老是像同极磁铁一样排斥，并没有紧密的贴在一起，不切换的时候就是紧密贴在一起的。后来发现了问题，原来时切换时，页面重新渲染，然后图层渲染不一致，大概据说类似这个解释吧，解决方式如下：

transform: translate3d(0, 0, 0);

 1 .triangle1 {
 2    0;
 3   height: 0;
 4   border: 0.07rem solid transparent;
 5   border-left: 0.33rem solid #4ee7cf;
 6   position: absolute;
 7   top: 1.77rem;
 8   left: 3.4rem;
 9   /* transition: all ease-in-out 0.003s; */
10   /* animation: fade 0.01s forwards; */
11   z-index: 1000;
12   transform: translate3d(0, 0, 0);
13 }

就是在三角形的类里面加一句css代码： transform: translate3d(0, 0, 0);