数据记录功能(本地缓存实现)

展示图表官网

需要使用 echarts 图表的折线图功能，官网，折线图配置链接

对体积有要求的话使用定制图表 (可能导致图表出不来)

在微信小程序使用

echarts-for-weixin项目提供了一个小程序使用的组件，用这种方式可以方便地使用 ECharts。

使用方式

下载该项目
如有必要，将ec-canvas目录下的echarts.js替换为最新版的 ECharts。如果希望减小包体积大小，可以使用自定义构建生成并替换echarts.js
pages目录下是使用的示例文件，可以作为参考，或者删除不需要的页面。

更详细的说明请参见echarts-for-weixin

注意事项

最新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置force-use-old-canvas="true" 的情况下，使用新的 Canvas 2d（默认）。

使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启。

更详细的说明请参见Canvas 2d 版本要求。

数据读取和放本地缓存

将数据存在本地缓存和 app.js 里全局变量里，来达到每个页面都能增删改查

// 在app.js下面四个变量，分别为温度，湿度，光强，烟雾
globalData: {
  chart_wd: wx.getStorageSync("chart_wd")
    ? JSON.parse(wx.getStorageSync("chart_wd"))
    : [],
  chart_sd: wx.getStorageSync("chart_sd")
    ? JSON.parse(wx.getStorageSync("chart_sd"))
    : [],
  chart_gq: wx.getStorageSync("chart_gq")
    ? JSON.parse(wx.getStorageSync("chart_gq"))
    : [],
  chart_yw: wx.getStorageSync("chart_yw")
    ? JSON.parse(wx.getStorageSync("chart_yw"))
    : [],
},

// 全局隐藏时候存入到本地缓存
onHide() {
  wx.setStorageSync("chart_wd", JSON.stringify(this.globalData.chart_wd));
  wx.setStorageSync("chart_sd", JSON.stringify(this.globalData.chart_sd));
  wx.setStorageSync("chart_gq", JSON.stringify(this.globalData.chart_gq));
  wx.setStorageSync("chart_yw", JSON.stringify(this.globalData.chart_yw));
},

数据存入到全局

// index.js
import { formatTime } from "../../utils/util"; // 引入时间处理方法

// 在接收到的数据里转换成一条为[时间:数据值]的数据并存入到app.globalData
app.globalData[变量名].push([
  formatTime(new Date()).slice(5), // 时间切割 /月/日 时分秒
  值,
]);

在图表页获取数据和显示出来

// 定义的初始折线图数据
const option = {
  xAxis: {
    type: "category",
    data: ["none"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
    data: [0],
    type: "line",
    },
  ],
};

// 在onload里动态改变标题和读取缓存里的数据
onLoad(options) {
  let data = JSON.parse(options.param);
  wx.setNavigationBarTitle({ title: data.parameter + "记录", });

  let canshu =
    data.parameter === "温度" ? "wd" : data.parameter === "湿度" ? "sd" :
    data.parameter === "光强" ? "gq" : "yw";
  console.log("参数名", "chart_" + canshu);
  console.log(app.globalData["chart_" + canshu]);
  this.setData({ chartData: app.globalData["chart_" + canshu] });
},

// data里增加变量
chartData : []

// onReady里拿到数据并渲染出来
onReady: function () {
  // 获取组件
  this.ecComponent = this.selectComponent("#mychart-dom-bar");
  this.init();

  setTimeout(() => {
    console.log(this.data.chartData);
    this.data.chartData.length &&
      this.chart.setOption({
        xAxis: {
          type: "category",
          data: this.data.chartData.map(item => item[0]),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.data.chartData.map(item => item[1]),
            type: "line",
          },
        ],
      });
  }, 500);
},

数据记录功能(本地缓存实现) ​

展示图表官网 ​

在微信小程序使用 ​

使用方式 ​

注意事项 ​

数据读取和放本地缓存 ​

数据存入到全局 ​