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

温柔于心动

已于 2023-10-07 15:50:38 修改

阅读量5.2k

点赞数 4

文章标签： echarts

于 2023-10-07 15:49:57 首次发布

本文链接：https://blog.csdn.net/frazier1995/article/details/133642337

版权

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

解决思路：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>