VUE 단일 페이지 echart 창 변경 시 사용

VUE 프로젝트 에 서 는 echart 가 창 이 변 할 때 적응 할 수 있 도록 window.resize=function(){......}을 사용 해 야 합 니 다.
하지만 저 는 프로젝트 시작 시간 에 한 곳 의 높이 변화 가 있 었 습 니 다.window.resize 를 사 용 했 습 니 다.안에서 다시 사용 하면 원래 의 것 을 덮어 쓸 수 있 기 때문에 안에서 도 표를 사용 할 때 사용 할 수 있 습 니 다.
window.addEventListener('resize',this.resizeFu,false);
resixeFu 는 도표 가 변 할 때의 방법 이다.

resizeFu(){
 let div = document.getElementById('changeData');
 if(div && this.changeData.DataTime.length>0){
 this.chartsDiv.changeData.resize();
 }
}

그러나 문 제 는 현재 페이지 에 들 어 올 때마다 window.addEventListener 를 실행 한 다 는 것 이다.
해결 방법 은 경로 체크 함수 에서 그것 을 제거 하 는 것 입 니 다.방법 은?

beforeRouteLeave(to, from, next) {
 //           
 window.removeEventListener("resize", this.resizeFu,false);
 next()
},

추가 지식:vue+echart 그래프 는 화면 크기 에 적응 하고 사 이 드 바 를 클릭 하여 수축 그래프 를 펼 쳐 크기 에 적응 합 니 다.
개발 에 echart 도 표를 사 용 했 습 니 다.도표 가 크기 resize 에 적응 해 야 합 니 다.처음에 사용 한 방법 은:

window.onresize = function () {
    this.myChart.resize();
};

그러나 또 하나의 문제 가 발생 했 습 니 다.사 이 드 바 의 전 개 를 클릭 하여 접 을 때 도표 의 크기 가 적응 되 지 않 았 습 니 다.(창의 크기 가 변 하지 않 았 기 때 문 입 니 다)
vue+element+admin 프레임 워 크 의 적응 을 참고 합 니 다.

index.vue 파일
차 트 도표 도입`

여 기 는 데이터 입 니 다.

chartData: {
    title: {
     text: '3-1(2)',
     textStyle: {
      color: '#979797',
      fontSize: 14
     }
    },
    tooltip: {
     trigger: 'axis'
    },
    legend: {
     icon: 'rect',
     itemWidth: 4, //          
     itemHeight: 11,
     textStyle: {
      lineHeight: 65,
      fontSize: 14
     },
     data: ['    ', '    ', '    ', '    ', '    ']
    },
    grid: {
     left: '3%',
     right: '4%',
     bottom: '3%',
     containLabel: true
    },
    xAxis: {
     type: 'category',
     boundaryGap: false,
     data: ['  ', '  ', '  ', '  ', '  ', '  ', '  ']
    },
    yAxis: {
     type: 'value'
    },
    series: [
     {
      name: '    ',
      type: 'line',
      stack: '  ',
      data: [0, 132, 101, 134, 90, 230, 210]
     },
     {
      name: '    ',
      type: 'line',
      stack: '  ',
      data: [220, 12, 191, 234, 20, 330, 10]
     },
     {
      name: '    ',
      type: 'line',
      stack: '  ',
      data: [15, 232, 201, 154, 190, 330, 110]
     },
     {
      name: '    ',
      type: 'line',
      stack: '  ',
      data: [320, 420, 301, 334, 60, 330, 320]
     },
     {
      name: '    ',
      type: 'line',
      stack: '  ',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
     }
    ]
 }

chart.vue

<template>
 <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
 mixins: [resize],
 props: {
  className: {
   type: String,
   default: 'chart'
  },
  width: {
   type: String,
   default: '100%'
  },
  height: {
   type: String,
   default: '300px'
  },
  autoResize: {
   type: Boolean,
   default: true
  },
  chartData: {
   type: Object,
   required: true
  }
 },
 data() {
  return {
   chart: null
  }
 },
 watch: {
  chartData: {
   deep: true,
   handler(val) {
    this.setOptions(val)
   }
  }
 },
 mounted() {
  this.$nextTick(() => {
   this.initChart()
  })
 },
 beforeDestroy() {
  if (!this.chart) {
   return
  }
  this.chart.dispose()
  this.chart = null
 },
 methods: {
  initChart() {
   this.chart = echarts.init(this.$el, 'macarons')
   this.setOptions(this.chartData)
  },
  setOptions(chartData) {
   this.chart.setOption(chartData)
  }
 }
}
</script>

resize.js

import { debounce } from './debounce'

export default {
 data() {
  return {
   $_sidebarElm: null
  }
 },
 mounted() {
  this.$_initResizeEvent()
  this.$_initSidebarResizeEvent()
 },
 beforeDestroy() {
  this.$_destroyResizeEvent()
  this.$_destroySidebarResizeEvent()
 },
 // to fixed bug when cached by keep-alive
 // https://github.com/PanJiaChen/vue-element-admin/issues/2116
 activated() {
  this.$_initResizeEvent()
  this.$_initSidebarResizeEvent()
 },
 deactivated() {
  this.$_destroyResizeEvent()
  this.$_destroySidebarResizeEvent()
 },
 methods: {
  // use $_ for mixins properties
  // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
  $_resizeHandler() {
   return debounce(() => {
    if (this.chart) {
     this.chart.resize()
    }
   }, 100)()
  },
  $_initResizeEvent() {
   window.addEventListener('resize', this.$_resizeHandler)
  },
  $_destroyResizeEvent() {
   window.removeEventListener('resize', this.$_resizeHandler)
  },
  $_sidebarResizeHandler(e) {
   if (e.propertyName === 'width') {
    this.$_resizeHandler()
   }
  },
  $_initSidebarResizeEvent() {
   this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
   this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
  },
  $_destroySidebarResizeEvent() {
   this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
  }
 }
}

debounce.js

/**
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(func, wait, immediate) {
 let timeout, args, context, timestamp, result

 const later = function() {
  //           
  const last = +new Date() - timestamp

  //                last          wait
  if (last < wait && last > 0) {
   timeout = setTimeout(later, wait - last)
  } else {
   timeout = null
   //      immediate===true，                  
   if (!immediate) {
    result = func.apply(context, args)
    if (!timeout) context = args = null
   }
  }
 }

 return function(...args) {
  context = this
  timestamp = +new Date()
  const callNow = immediate && !timeout
  //        ，      
  if (!timeout) timeout = setTimeout(later, wait)
  if (callNow) {
   result = func.apply(context, args)
   context = args = null
  }

  return result
 }
}

이상 의 VUE 단일 페이지 에서 echart 창 을 사용 하여 변화 할 때 사용 하 는 방법 은 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주시 기 바 랍 니 다.