swiper切換時，echarts圖案與自定義圖案分離

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   width: 3.7rem;
76   margin: 0 auto;
77 }
78 .chart-body {
79   width: 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   width: 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);