## Vue 中使用 Axios 和 ECharts 渲染图表时，数据显示不出的问题该如何解决？

vue 中使用 axios 异步请求并渲染 echarts 图表的常见问题

在 vue 项目中，结合 axios 和 echarts 库加载动态数据并展示图表时，可能会遇到数据显示不出的问题。

问题分析：

根据您提供的代码，问题可能出在以下两方面：

立即学习“前端免费学习笔记（深入）”；

歌者PPT

歌者PPT，AI 写 PPT 永久免费

下载

1. 数据请求时机不当：
   您在 mounted() 生命周期钩子中调用 drawline() 方法，但由于数据请求是异步的，它可能在图表初始化后才完成。因此，图表无法及时获取有效数据。
2. 图表渲染时机不当：
   在您的 drawline() 方法中，您在数据请求成功后才执行 mychart.setoption(option)，这会导致图表一开始显示为空。

解决方案：

要解决这些问题，您可以按照以下步骤进行优化：

1. 将 arrtest() 函数移至 methods 对象中，以便可以在需要时随时调用。
2. 在 mounted() 生命周期钩子中调用 arrtest()，启动数据请求。
3. 在数据请求成功回调中，调用 drawline() 方法来渲染图表。
4. 在 mychart.setoption(option) 之前先赋值给 x_city 和 y_people 数组，确保图表数据是最新的。

以下是对您的代码进行修改的示例：

export default {
  data() {
    return {
      x_city: [],
      y_people: [],
    };
  },

  mounted() {
    this.arrtest();
  },

  methods: {
    arrtest() {
      let that = this;

      axios.get('http://localhost:3000/src/statics/test1.php').then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          that.x_city.push(res.data[i].city);
          that.y_people.push(parseInt(res.data[i].y_people));
        }

        this.drawLine();
      });
    },

    drawLine() {
      let myChart = echarts.init(document.getElementById('myChart'));

      let option = {
        tooltip: {
          show: true,
        },
        legend: {
          data: ['people'],
        },
        xAxis: [
          {
            type: 'category',
            data: that.x_city,
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: 'people',
            type: 'bar',
            data: that.y_people,
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};

通过对这些修改，您的图表应该能够正确地加载动态数据并进行渲染。