Vue图表数据更新：axios获取数据后图表不刷新？

Vue项目中axios.get获取数据后图表无法更新？

你是否遇到过在Vue项目中使用axios.get('http://localhost:8080/table').then((res) => {...})获取数据后，即使成功将数据赋值给option.series[0].data，图表依然没有更新的问题？

问题可能出在option.series[0].data = wenduData;这行代码。在Vue中，直接修改数据可能不会触发视图更新。你需要使用Vue的响应式属性机制来更新图表数据。

以下是用Vue响应式属性解决该问题的代码示例：

export default {
  data() {
    return {
      option: {
        series: [
          {
            data: [] // 初始为空数组
          }
        ]
      }
    }
  },
  mounted() {
    axios.get('http://localhost:8080/table').then((res) => {
      console.log(res.data.object);
      var wenduData = res.data.object.map(item => item.wendu);
      console.log(wenduData);
      this.option.series[0].data = wenduData; // 使用Vue的响应式属性更新数据
    });
  }
}

代码解析：

将option.series[0].data定义为Vue组件的响应式属性： 在data()函数中初始化option对象，并将其中的series[0].data设置为一个空数组。
使用this.option.series[0].data = wenduData;更新数据： 在axios.get()请求成功后，使用this.option.series[0].data将获取到的数据赋值给响应式属性。

通过以上修改，当this.option.series[0].data的值发生变化时，Vue会自动更新组件的视图，从而使图表得到更新。

注意事项：

确保你的代码是在Vue组件中使用的，因为Vue的响应式属性只能在组件内部生效。
确保option.series[0].data在你的图表组件中正确使用，以便图表能够正确地读取和渲染数据。

希望以上信息能够帮助你解决Vue项目中图表数据更新的问题！