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

原创已于 2023-10-07 15:50:38 修改 · 6.7k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#echarts

收录于

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

文章讲述了在Vue项目中遇到的问题，即页面在服务端响应到达之前就渲染了图表。解决方法包括预先从接口获取图表数据、将图表配置选项封装成方法并监听数据变化，以及使用定时器处理数据未及时更新的情况。

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

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