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

最新推荐文章于 2025-02-12 09:18:53 发布

原创

最新推荐文章于 2025-02-12 09:18:53 发布 · 置顶 · 4.9k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #ECharts #数据绑定

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

本文介绍微信小程序中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);                      &n