vue3封装echarts图表数据无法渲染到页面问题

 更新时间:2024年09月07日 14:48:47   作者:Asus.Blogs  
这篇文章主要介绍了vue3封装echarts图表数据无法渲染到页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3封装echarts图表数据无法渲染到页面

问题是后端的数据已经成功返回到前端了,但是Echarts图表一直不能被渲染,卡了一个多小时,最后问gpt才解决(gptyyds!!!)

 methods: {
    loadGet() {
      this.$axios.get(this.$httpUrl + '/goods/count').then(res => res.data).then(res => {
        console.log(res)
        // this.cntdata = res.data
        if (res.code == 200) {
          // this.yData = res.data
          // this.cntData.length=0;
          for (let i = 0; i < res.data.length; i++) {
            this.cntData.push(res.data[i]);
          }
          console.log("data = =" + this.cntData + res.data.length)
          this.$message({
            message: '操作成功!',
            type: 'success'
          });
        } else {
          this.$message({
            message: '操作失败!',
            type: 'error'
          });
        }

      })
    },
    init() { //调用session中的用户数据
      this.user = JSON.parse(sessionStorage.getItem('CurUser'))
    },
    initEcharts() {
      let option = {
        title: {
          text: "现存物资量"
        },
        tooltip: {},
        legend: {
          data: [""]
        },
        xAxis: {
          data: ["鼠标", "帐篷", "键盘", "口罩", "矿泉水", "棉被"]
        },
        yAxis: {},
        series: [
          {
            name: "发放量",
            type: "bar", //类型为柱状图
            // data: [5, 20, 36, 10, 10, 20]
            data: this.cntData  //问题出在这 data一直不能被后端返回的this.cntData渲染!
          }
        ]
      };
      const myChart = echarts.init(this.$refs.mychart);// 图标初始化

      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  created() {
    this.init()
  }
}
</script>

原文

  • 我:这份代码中ECharts图标中的 series 中的data无法被后端传来的数据渲染怎么办
  • gpt:在你提供的代码中,ECharts 图表的数据被初始化为 this.cntData,但 this.cntData 在组件创建时是一个空数组。要使图表能够根据后端传来的数据进行渲染,你需要确保在数据加载完成后再初始化图表。
  • 为了实现这一点,你可以在 loadGet 方法成功获取数据后调用 initEcharts 方法来初始化图表。这确保了数据已经准备好并且可以在图表中使用。

下面是修改后的代码片段:

methods: {
  loadGet() {
    this.$axios.get(this.$httpUrl + '/goods/count').then(res => res.data).then(res => {
      console.log(res);
      if (res.code === 200) {
        this.cntData = res.data; // 将数据赋值给 cntData
        this.initEcharts(); // 初始化图表 !!!!!!这里!
        this.$message({
          message: '操作成功!',
          type: 'success'
        });
      } else {
        this.$message({
          message: '操作失败!',
          type: 'error'
        });
      }
    });
  },
  initEcharts() {
    let option = {
      // ... 其余图表配置 ...
      series: [
        {
          name: "发放量",
          type: "bar", //类型为柱状图
          data: this.cntData // 使用从后端获取的数据
        }
      ]
    };
    const myChart = echarts.init(this.$refs.mychart);
    myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  },
  // ... 其他方法 ...
},

我:其中的mounted方法是先于beforeMount运行的吗

gpt:不对,beforeMount 方法在 mounted 方法之前执行。

Vue.js 生命周期中的顺序是如下的:

  • beforeCreate:在实例初始化之后,数据观测 (data observation) 和事件配置 (event/watcher setup) 之前被调用。这时实例还没有初始化完成,数据和事件方法尚不可用。
  • created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测(data observation),属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,DOM 元素也还没有被创建。
  • beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
  • mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。

所以,beforeMount 在 mounted 之前执行,它们分别位于 Vue 实例生命周期的不同阶段。

–没看懂。。。。

我:那为什么this.cntData不能去填充图标的data

gpt:问题可能是由于异步操作的原因。在你的代码中,loadGet 方法通过异步请求从后端获取数据,并在获取数据后调用initEcharts 方法。然而,由于异步请求的性质,initEcharts 方法可能在数据还没有获取到时就被调用了,导致 this.cntData 仍然是空数组。

要解决这个问题,你可以确保在数据成功获取后再调用 initEcharts 方法。你已经在 loadGet

方法中进行了这个调用,但是需要注意确保数据获取成功后才执行这个调用。

看懂了好像…

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue实现低版本浏览器升级提示的代码示例

    Vue实现低版本浏览器升级提示的代码示例

    在现代Web开发中,浏览器兼容性是一个重要的问题,尽管大多数用户已经转向了现代浏览器,但仍有一部分用户可能仍在使用老旧的浏览器版本,本文将详细介绍如何在Vue项目中实现低版本浏览器升级提示,并通过多个代码示例来展示不同的应用场景和技术点,需要的朋友可以参考下
    2024-10-10
  • 本地运行vue打包的dist文件实现方式

    本地运行vue打包的dist文件实现方式

    这篇文章主要介绍了本地运行vue打包的dist文件实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2026-03-03
  • vue实现选项卡案例

    vue实现选项卡案例

    这篇文章主要为大家详细介绍了vue实现选项卡案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 详解mpvue scroll-view自动回弹bug解决方案

    详解mpvue scroll-view自动回弹bug解决方案

    设置了scroll-top的scroll-view组件,在组件所在vue实例data发生改变时会自动回弹到最上方,非常具有实用价值,需要的朋友可以参考下
    2018-10-10
  • vue3实现多条件搜索功能的示例代码

    vue3实现多条件搜索功能的示例代码

    搜索功能在后台管理页面中非常常见,这篇文章就着重讲一下vue3-admin-element框架中如何实现一个顶部多条件搜索功能,感兴趣的小伙伴可以了解一下
    2023-08-08
  • Vue2+element-ui实现面包屑导航

    Vue2+element-ui实现面包屑导航

    这篇文章主要为大家详细介绍了Vue2+element-ui使用面包屑导航的正确姿势,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue3实现pdf在线预览的三种方式

    Vue3实现pdf在线预览的三种方式

    这篇文章主要为大家详细介绍了使用Vue3实现pdf在线预览的三种常用方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-02-02
  • vue+element tree懒加载更新数据的示例代码

    vue+element tree懒加载更新数据的示例代码

    这篇文章主要介绍了vue+element tree懒加载更新数据,文中给大家补充介绍了Vue Element Ui 树形表懒加载新增、修改、删除等操作后局部数据更新的详细代码,感兴趣的朋友跟随小编一起看看吧
    2022-09-09
  • Vue2(三)实现子菜单展开收缩,带动画效果实现方法

    Vue2(三)实现子菜单展开收缩,带动画效果实现方法

    这篇文章主要介绍了vue实现收缩展开效果的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue3 中 watch的 flush 选项(默认无/`post`/`sync`)的区别全解析

    Vue3 中 watch的 flush 选项(默认无/`post`/`sync`

    文章介绍了Vue3中watch的flush选项,解释了三种模式(默认pre、post、sync)的工作机制和适用场景,并提供了代码示例进行对比,强调了在90%的场景下选择post模式以确保操作DOM的正确性,感兴趣的朋友跟随小编一起看看吧
    2026-03-03

最新评论