Echarts在Vue3中的使用问题

一、调整浏览大小使图表自适应

1.首先图表大小使用百分比设置大小

2.设置监听

//自适应图表
const myChartOnresize = () => {
  var tempmyChart = toRaw(myChart.value);
  tempmyChart.resize();
};
window.addEventListener("resize", myChartOnresize, false);

// 在界面切换时记得销毁监听事件哦，节约内存
onBeforeUnmount(() => {
  //myChartOnresize 方法是刷新
  myChart.value.dispose();
  window.removeEventListener("resize",myChartOnresize,false);
});

//切记尽量不要使用下面这个，如果你有多个图表，事件会被覆盖
window.onresize=function(){
	//SomeJavaScriptCode
};

二、打包后部署出现图表不显示问题

onBeforeUnmount事件中销毁myChart对象

onBeforeUnmount(() => {
  //myChart是Echarts初始化的对象
  myChart.value.dispose();
});

三、浮态框/悬浮框/提示框 不显示问题

//上述图片红圈的"浮态框/悬浮框/提示框"不显示原因是因为，在Vue3 中的变量都会变成Proxy,使用toRaw函数，使Proxy变为js对象
import { onMounted, toRaw } from "vue";
const myChart = ref();
const reload = () => {
  //设置一个div标签id为"columnGraph"
  myChart.value = echarts.init(document.getElementById("columnGraph"));
  //这里使用了toRaw变为原始对象，在进行赋值，就正常了
  //-----------这两个步骤很关键---------
  let tempmyChart = toRaw(myChart.value);
  tempmyChart.setOption(datas);
  //-----------这两个步骤很关键---------
}

//onMounted在此元素中加载，否者找不到元素
onMounted(() => {
  reload();
)