vue 결합 원생 js 해결 echarts resize 문제

페이지 echarts 도표 크기 조정 문제 해결

왼쪽 메뉴 표시 줄 모듈 은 줄 일 수 있 습 니 다.왼쪽 상단 의 icon 을 클릭 하면 줄 일 수 있 습 니 다.그러나 왼쪽 상단 의 icon 을 클릭 한 후에 오른쪽 echarts 그림 은 해당 하 는 수축 을 하지 않 았 습 니 다.element-resize-detector 플러그 인 을 사용 하면 문 제 를 해결 할 수 있 습 니 다Vue 프로젝트 에서 echarts 를 사용 하 는 방법,너비 변화 로 인해 그림 의 크기 를 조정 할 수 없습니다..그러나 약간 끊 길 수 있 기 때문에 원생 의 방법 으로 처리 합 니 다.windows 자체 테이프 의 원생 resize 이벤트 처리 브 라 우 저 너비 높이 변 화 를 결합 하여 플러그 인 을 사용 하지 않 고 문 제 를 처리 할 수 있 습 니 다.

<template>
 <div
 id="leftEchartPie"
 ref="leftEchartPie"
 ></div>
</template>

<script>
export default {
 props: {
 leftPieData: {
  type: Object,
  default: {}
 }
 },
 data() {
 return {
  myChart: null,
  option: null,
  observe: null,
  optionData: []
 };
 },
 watch: {
 leftPieData: {
  deep: true,
  handler(leftPieData) {
  if (leftPieData) {
   this.initChart(leftPieData);
  }
  }
 }
 },
 mounted() {
 const option = {
  title: {
  zlevel: 0,
  text: null,
  rich: {
   value: {
   color: "#3F495A",
   fontSize: 14,
   lineHeight: 16
   },
   name: {
   color: "#3F495A",
   fontSize: 14,
   lineHeight: 16
   }
  },
  top: "center",
  left: "19.3%",
  textAlign: "center",
  textStyle: {
   rich: {
   value: {
    color: "#3F495A",
    fontSize: 14,
    lineHeight: 16
   },
   name: {
    fontSize: 16,
    color: "#3F495A",
    lineHeight: 30
   }
   }
  }
  },
  tooltip: {
  show: true,
  trigger: "item",
  formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {},
  series: [
  {
   name: "Security Status",
   type: "pie",
   center: ["20%", "50%"],
   radius: ["80%", "45%"],
   itemStyle: {
   borderWidth: 6,
   borderColor: "#fff"
   },
   hoverAnimation: false,
   avoidLabelOverlap: false,
   label: {
   show: false,
   position: "center"
   },
   emphasis: {
   label: {
    show: false,
    fontSize: "30",
    fontWeight: "bold"
   }
   },
   labelLine: {
   show: false
   },
   data: []
  }
  ]
 };
 this.option = option;
 var dom = document.getElementById("leftEchartPie");
 var myChart = this.echarts.init(dom);
 this.myChart = myChart;
	
	//         MutationObserver    
 const observer = new MutationObserver(() => {
  setTimeout(this.myChart.resize, 201);
 });
 const config = { attributes: true, childList: true, subtree: false };
 this.observe = observer;
 observer.observe(document.getElementsByClassName("spoc-menu")[0], config);
 	//              resize 
 window.addEventListener("resize", this.resizeEchart, true);
 },
 beforeDestroy() {
 this.observe.dis;
 window.removeEventListener("resize", this.resizeEchart, true);
 },
 methods: {
 resizeEchart() {
  this.myChart.resize();
 },
 initChart(leftPieData) {
  this.option.text = [
  "{name|Total}",
  "{value|" + leftPieData.totalNum + "}"
  ].join("
");
  this.option.legend.data = [
  `Very High Risk`,
  `High Risk`,
  `Medium Risk`,
  `Low Risk`,
  `Very Low Risk`
  ];

  this.option.series[0].data = [
  {
   value: this.leftPieData.veryHighRiskNum,
   name: `Very High Risk`,
   itemStyle: {
   color: "#FF4D4F"
   }
  },
  {
   value: this.leftPieData.highRiskNum,
   name: `High Risk`,
   itemStyle: {
   color: "#FA9314"
   }
  },
  {
   value: this.leftPieData.mediumRiskNum,
   name: `Medium Risk`,
   itemStyle: {
   color: "#FACB14"
   }
  },
  {
   value: this.leftPieData.lowRiskNum,
   name: `Low Risk`,
   itemStyle: {
   color: "#4ED6CC"
   }
  },
  {
   value: this.leftPieData.veryLowNum,
   name: `Very Low Risk`,
   itemStyle: {
   color: "#2BD374"
   }
  }
  ];

  this.optionData = this.option.series[0].data;
  const optionData = this.optionData;
  this.option.legend = {
  textStyle: {
   fontSize: 14,
   color: "#3F495A"
  },
  orient: "vertical",
  left: "60%",
  itemGap: 30, //   
  top: "middle",
  icon: "circle",
  itemHeight: 10, //      
  // data: [],
  formatter(params) {
   if (optionData.length) {
   switch (params) {
    case "Very High Risk":
    return params + "  " + optionData[0].value;
    break;
    case "High Risk":
    return params + "    " + optionData[1].value;
    break;
    case "Medium Risk":
    return params + "  " + optionData[2].value;
    break;
    case "Low Risk":
    return params + "    " + optionData[3].value;
    break;
    case "Very Low Risk":
    return params + "  " + optionData[4].value;
    break;
    default:
    return "";
   }
   }
  }
  };
  //     
  this.myChart.setOption(this.option);
 }
 }
};
</script>

<style>
#leftEchartPie {
 width: 100%;
 height: calc(100% - 60px);
}
</style>

핵심 코드

 //         MutationObserver    
 const observer = new MutationObserver(() => {
  setTimeout(this.myChart.resize, 201);
 });
 const config = { attributes: true, childList: true, subtree: false };
 this.observe = observer;
 observer.observe(document.getElementsByClassName("spoc-menu")[0], config);
 //              resize 
 window.addEventListener("resize", this.resizeEchart, true);

MutationObserver에 대한 사용 참고
마지막 으로 beforeDestroy 에서 감청 시간 과 Mutation Observer 가 감청 한 사건 을 없 애 야 합 니 다.사건 이 페이지 에 계속 있 고 메모리 가 소모 되 지 않도록 해 야 합 니 다.
마지막 으로 개발 한 후에 예전 에 사 용 했 던 플러그 인과 비 교 했 습 니 다.원생 js 처리 체험 은 플러그 인보 다 반응 이 빠 르 고 플러그 인 이 사람 에 게 주 는 느낌 방패 입 니 다.
ok 이것 이 바로 vue 가 원생 js 와 결합 하여 echarts resize 문 제 를 해결 하 는 데 관 한 개발 소감 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.