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

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

问题分析：

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

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

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 <p>通过对这些修改，您的图表应该能够正确地加载动态数据并进行渲染。</p>

以上就是## Vue 中使用 Axios 和 ECharts 渲染图表时，数据显示不出的问题该如何解决？的详细内容，更多请关注php中文网其它相关文章！

https://www.php.cn/faq/1063127.html