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);