微信小程序中ECharts的数据绑定的一种方法

最新推荐文章于 2025-04-29 16:59:08 发布

置顶

Hello_JayJay

最新推荐文章于 2025-04-29 16:59:08 发布

阅读量4.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序 ECharts 数据绑定

本文链接：https://blog.youkuaiyun.com/Hello_JayJay/article/details/80861060

本文探讨了在微信小程序中解决ECharts数据绑定问题的方法。由于ECharts初始化与页面数据加载在同一生命周期内，导致数据无法正常绑定。通过在app.js的globalData中存储服务器获取的数据，然后在图表页面中引用这些全局数据，可以实现数据的正确绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文介绍微信小程序中ECharts的数据绑定的一种方法。

在微信小程序中使用ECharts时，官方教程的数据是固定的，并没有提到如何获取数据。

问题描述：

我们把数据放在和图表同一个页面，数据会无法绑定上，是因为ECharts初始化和页面数据创建是同一个生命周期钩子中：

  data: {
    ec: {
      onInit: initChart
    },

解决方案：

在微信小程序中，我们还有一个可以存储App全局变量的地方：app.js。

我们可以在图表展示的前一个界面，将数据先从服务器获取到，存入app.js的globalData{}：

util.HttpRequst(true, 'YourUrl', 1, YourCookie, { YourData }, 'GET', false, function (data) {
      if (JSON.parse(data)[0].msghead == 'success') {
        let dataStr = JSON.parse(data)[0].msgbody;
        let dataObj = JSON.parse(dataStr);                        //获取数据
        for (var idx in dataObj) {                                //数据分别存入globalData

最低0.47元/天解锁文章