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

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

echarts文件

<template>
  <div class="pr chart">
    <div ref="chart" class="chart-body"></div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => ({})
    },

    onClick: {
      type: Function,
      default: () => {}
    },
    onDispatchAction: {
      type: Object,
      default: () => ({})
    },
    onMouseover: {
      type: Function,
      default: () => {}
    }
  },
  watch: {
    //观察option的变化const chart = this.$refs["chartContainer"].chart;
    config: {
      handler(newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.chart.setOption(newVal);
          } else {
            this.chart.setOption(oldVal);
          }
        } else {
          this.init();
        }
      },
      deep: true //对象内部属性的监听，关键。
    }
  },

  mounted() {
    if (!this.$echarts) {
      return;
    }

    let echartsWarp = this.$refs["chart"];

    console.log(echartsWarp);

    let chart = (this.chart = this.$echarts.init(echartsWarp));
    chart.setOption(this.config);
    chart.dispatchAction(this.onDispatchAction);

    chart.on("click", params => {
      this.onClick(params);
      chart.setOption(this.config);
    });
    chart.on("mouseover", params => {
      this.onMouseover(params);
    });
    // window.addEventListener("resize", () => {
    //   chart.resize();
    // });
  }
};
</script>

<style scoped>
.chart {
  height: 3.7rem;
  width: 3.7rem;
  margin: 0 auto;
}
.chart-body {
  width: 100%;
  height: 100%;
}
.pr {
  position: relative;
}
</style>

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

<el-row class="pd-insurance-echarts" style="height: 4.8rem" router>
  <template v-for="route in $router.options.routes">
    <!-- {{route.name}} -->
    <swiper
      :options="swiperOption"
      ref="mySwiper"
      v-if="route.name == ‘product2019‘"
      :key="route.path"
      class="menu-temp"
    >
      <swiper-slide v-for="item in route.children" :key="item.path">
        <keep-alive>
          <component :is="item.component"></component>
        </keep-alive>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </template>
</el-row>

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

<Charts
  ref="chartContainer"
  :config="radarOptionConfig"
  :onClick="onChartClick"
  :onDispatchAction="onChartDispatch"
  :onMouseover="onChartMouseover"
>
  <div :class="triangle" ref="triangle"></div>
</Charts>

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

• transform: translate3d(0, 0, 0);

.triangle1 {
  width: 0;
  height: 0;
  border: 0.07rem solid transparent;
  border-left: 0.33rem solid #4ee7cf;
  position: absolute;
  top: 1.77rem;
  left: 3.4rem;
  /* transition: all ease-in-out 0.003s; */
  /* animation: fade 0.01s forwards; */
  z-index: 1000;
  transform: translate3d(0, 0, 0);
}

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

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

原文：https://www.cnblogs.com/sinceForever/p/12162931.html