vuetab 전환, echartst 도표 폭이 100px에 불과한 문제 해결

해결 사고방식: 도표의 넓이를 직접적으로 죽이고 실제 코드에 따라 개작하여 하나의 사고방식을 제공한다.
1. 도표를 div에 넣기

<div class="echarts">
 <div id="myChart" :style="{width: '100%', height: '150px'}"></div>
</div>

2. 방법을 정의하고 mounted 보기가 업데이트될 때 실행

<script>
export default {
 mounted() {
 this.setMyChart();
 },
 methods: {
 setMyChart() {
 // jq 
 //  
 var echarts = $('.echarts');
 //  
 var echartsWidth = echarts.outerWidth(true);
 var echartsHeight = echarts.outerHeight(true);
 //  
 var myChart = $('#myChart');
 //  
 myChart.css('width', myChart);
 myChart.css('height', myChart);
 
 //  js 
 //  
 // var echarts = document.querySelector('.echarts');
 //  
 // var echartsWidth = getStyle(echarts,'width');
 // var echartsHeight = getStyle(echarts,'height');
 //  
 // var myChart = document.querySelector('#myChart');
 //  
 // myChart.style.width = echartsWidth;
 // myChart.style.height = echartsHeight;

 //  ， IE， ，element,  ，css 
 // function getStyle(obj, attr) { 
 // if (obj.currentStyle) { 
 // return obj.currentStyle[attr]; 
 // } else { 
 // return document.defaultView.getComputedStyle(obj,null)[attr]; 
 // } 
 // }
 }
 }
};
</script>

3. 스타일

<style scoped>
.echarts {
 width:300px;
 height:150px;
} 
</style>

만약 이 문장이 당신에게 도움이 된다면, 당신을 도울 수 있어서 매우 기쁩니다.
보충 지식: vue 프로젝트tab 전환 echart 도표 전환 폭 축소 및 도표 내용 부정확한 해결
코드:
레이아웃:

<TabButton :btnValue1="' '" :btnValue2="' '" @watchFlag="handler"></TabButton>
 <div class="it_content">
 <div class="picture" id="work" ref="work" v-show="flag===false"></div>
 <div class="picture" id="workTotal" ref="workTotal" v-show="flag===true"></div>
 </div>

처리 함수:

handler(flag){
 this.flag=flag;
 if(!this.flag){
 this.$nextTick(() => {
    this.drawwork(); //  
   });
 }else{
 this.$nextTick(() => {
    this.drawworkTotal(); //  
   });
 }
 },

1. 폭 축소 문제 해결
원래는 vue 명령을 사용하는 v-if였지만, v-if로 폭이 줄어드는 문제가 발견되었다.나중에 v-show로 바꿨어요.이것은 v-if 명령이 Dom 요소를 위치 공간에서 제거하는 것이고, v-show는 Dom 요소의 위치 공간을 보존하지만 렌더링하지 않기 때문이다.v-show는 정의된 스타일을 보존하고 공간 위치도 보존합니다. echarts 도표의 너비는 여전히 이전과 같기 때문에 축소되지 않습니다.
2. 도표의 내용이 정확하지 않다
this.$를 이용하여nextTick(() => {}).Vue 응답식은 데이터가 변경된 후 DOM이 즉시 변경되는 것이 아니라 일정한 정책에 따라 DOM을 업데이트하는 것입니다. $nextTick은 다음 DOM 업데이트 순환이 끝난 후에 지연 리셋을 실행하고, 데이터를 수정한 후에 $nextTick을 사용하면 리셋에서 업데이트된 DOM을 얻을 수 있습니다.flag가 변경된 후,Dom은 즉시 업데이트되지 않았습니다. $nextTick 리셋 함수를 통해echarts의 그림을 실행합니다.
nextTick의 유래:
VUE의 데이터 구동 보기 업데이트는 비동기적이기 때문에 수정된 데이터의 현재 보기는 즉시 업데이트되지 않고 동일한 이벤트 순환 중의 모든 데이터 변화가 끝난 후에 보기 업데이트를 통일합니다.
nextTick의 트리거 시기:
같은 이벤트 순환에서 데이터가 바뀌면 DOM이 업데이트를 완료하고 nextTick(callback) 내의 리셋을 실행합니다.
nextTick의 유래와 결합하여 모든 이벤트 순환에서 nextTick이 촉발하는 시기를 제시할 수 있습니다.
동일한 이벤트 순환 중 코드 실행 완료 -> DOM 업데이트 -> nextTick callback 트리거
장면 적용:
보기가 업데이트된 후에 새로운 보기를 기반으로 조작해야 합니다.
이상의 vuetab 전환은 echartst 도표의 폭이 100px밖에 안 되는 문제를 해결하는 데 작은 편집자가 모두에게 공유한 모든 내용을 참고할 수 있고 많은 응원을 바랍니다.