Vue는 echart가 element의 tab 전환 시 부정확한 문제를 해결합니다

최근 프로젝트에서 이러한 상황을 만났습니다.tab 컨트롤에 여러 개의 echart 아이콘을 렌더링한 다음 보기를 전환할 때 도표의 폭이 정확하지 않은 것을 발견합니다
원인: 페이지를 불러올 때 숨겨진 도표가 대응하는div 크기를 찾을 수 없기 때문에 기본적으로 크기를 주었습니다.그래서 해야 할 일은 페이지를 불러올 때 도표를 초기화하는 것이다.
인터넷의 해결 방안은 대부분tab의 전환 이벤트를 감청한 다음에 전환된 페이지에 따라 echart 구성 요소를 다시 렌더링하는 것이 비교적 번거롭다.
다음은 개인의 해결 방법입니다.
원리: v-if 속성을 이용하여 대응하는tab로 전환할 때 v-if의 값을true로 설정하면 되며 기본적으로 표시되는tab를 설정합니다
예를 들면 다음과 같습니다.

<el-tabs type="card" v-model="tabItem">
 <el-tab-pane name="heart">
  <span slot="label"><icon name="heart" scale="2"></icon> </span>
  <baseline ref="heart" :chartData="{}" v-if="'heart' === tabItem"></baseline>
 </el-tab-pane>
 <el-tab-pane name="breath">
  <span slot="label"><icon name="breath" scale="2"></icon> </span>
  <baseline ref="breath" :chartData="{}" v-if="'breath' === tabItem"></baseline>
 </el-tab-pane>
 <el-tab-pane label=" " name="move">
  <span slot="label"><icon name="move" scale="2"></icon> </span>
  <baseline ref="move" :chartData="{}" v-if="'move' === tabItem"></baseline>
 </el-tab-pane>
</el-tabs>

기본 탭은 심장 박동률 탭입니다. 전환할 때 같은 시간에 v-if만 true이고 이것을true로 설정하면 Vue는 페이지에서 구성 요소를 다시 렌더링합니다. 즉, 구성 요소를 렌더링하는 절차를 완성합니다.
보충 지식:el-tab-pane에서 echarts 그림에 부딪힌 문제 (element의 Tabs 탭)
프로젝트에서 이상한 문제가 발생했습니다.
element에 있는el-tabs 구성 요소는 el-tab-pane에서 echarts 아이콘을 도입할 때 리셋할 때 아이콘이 나타나지 않습니다. 브라우저 창을 조금 줄이면 보여 줍니다.
솔루션:
echarts에 v-if를 추가하여 해결(또한 프로젝트에서 v-show를 사용해도 상술한 유사한 상황이 발생할 수 있으므로 v-show를 v-if로 바꾸면 해결)

<template>
 <el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label=" " name="first"> </el-tab-pane>
  <el-tab-pane label=" " name="second"> </el-tab-pane>
  <el-tab-pane label=" " name="third"> </el-tab-pane>
  <el-tab-pane label=" " name="fourth">
    <div class="echartsBox" 
      v-loading="loadingDetail"
      element-loading-spinner="el-icon-loading"
      >
      <echart-line 
      v-if="'fourth' === activeName"  // 
      class="CurePicture"
      :category="chartData.category"
      :data="chartData.data"
      :unit="chartData.unit"
      ></echart-line>
     </div>
  </el-tab-pane>
 </el-tabs>
</template>
<script>
import echartLine from "@/components/echarts/line"
 export default {
  components: {
  echartLine
  }, 
  data() {
   return {
    activeName: 'second'
   };
  },
  methods: {
   handleClick(tab, event) {
    console.log(tab, event);
   }
  }
 };
</script>

가져가, 고마워할 필요 없어!!!
이상의 이 Vue는 echart가 element의tab에서 전환할 때 부정확한 문제를 해결하는 것이 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.