Echarts 有数据，但图不显示（完美解决方案）

问题产生：页面不等服务端响应就已经渲染图表

解决思路：1.创建一个数组从接口获取到图表的数据，2.把option单独放到一个方法中，3.监听接收数据的数组，发生变化时调用存放option的方法（如果不懂可以看下下面的代码示例），如果还是不行，你可以试试定时器

<template>
  <div class="echatBox">
    <Echarts
      :myOption="state.chartOpt"
      :myStyle="{ width: '100%', height: '200px' }"
    ></Echarts>
  </div>
</template>
 
<script setup>
import { ref, onMounted, reactive, watch } from "vue";
import { getData } from "@/api/bridge";
 
const state = reactive({
  chartOpt: {},
  echartList: []
});
 
watch(
  () => state.echartList,
  (v) => {
    if (v) {
      echartData();
    }
  }
);
 
// 获取数据
const getListFun = (sizeVal) => {
  const data = {
    // 需要上传的参数
  };
  getData(data).then((res) => {
    state.echartList= res.data
  });
};
 
// 图标配置
const echartData = () => {
  state.chartOpt = {
    tooltip: {},
    xAxis: {},
    yAxis: {},
    series: [],
  };
};
 
onMounted(() => {
  getListFun();
});
</script>