7天打造微信小程序空气质量监测系统：从PM2.5采集到可视化全流程

你还在为找不到简单易用的微信小程序图表解决方案而烦恼吗？还在为空气质量数据可视化效果差而头疼吗？本文将带你用7天时间，从0到1构建一套完整的微信小程序空气质量监测系统，实现PM2.5、PM10等关键指标的实时采集与专业可视化展示。读完本文，你将掌握Apache ECharts微信小程序版的核心用法，学会数据采集、图表渲染、用户交互等全流程开发技能。

项目概述与准备工作

项目简介

本项目基于Apache ECharts的微信小程序版本构建，通过微信小程序的跨平台特性和ECharts强大的可视化能力，打造一个集空气质量数据采集、处理、展示于一体的移动应用。该系统能够实时显示PM2.5、PM10、AQI等关键空气质量指标，并通过多种图表形式直观展示数据变化趋势和分布情况。

环境准备

在开始项目前，请确保你已安装以下开发工具和环境：

1. 微信开发者工具（最新版）
2. Node.js环境（v14+）
3. Git工具

项目下载与配置

首先，通过以下命令克隆项目代码库：

git clone https://gitcode.com/gh_mirrors/ec/echarts-for-weixin

项目的核心组件是ec-canvas目录，它包含了ECharts微信小程序版的所有必要文件。你可以参考README.md了解更多项目细节。

第1-2天：数据采集模块开发

空气质量API接口选择

空气质量数据可以通过第三方API获取，推荐使用以下几种免费API：

1. 国家环境监测总站API
2. 高德地图开放平台空气质量API
3. 百度地图开放平台空气质量API

微信小程序网络请求实现

在微信小程序中，我们可以使用wx.request API发起网络请求获取空气质量数据。以下是一个简单的示例：

// pages/airQuality/index.js
getAirQualityData: function(city) {
  wx.request({
    url: 'https://api.example.com/airquality',
    data: {
      city: city
    },
    success: function(res) {
      console.log(res.data);
      // 处理空气质量数据
    }
  })
}

本地缓存策略实现

为了减少API请求次数和提高小程序性能，我们可以使用微信小程序的本地缓存API：

// 保存数据到本地缓存
wx.setStorageSync('airQualityData', res.data);

// 从本地缓存读取数据
var airQualityData = wx.getStorageSync('airQualityData');

第3-4天：ECharts组件集成与基础图表开发

ECharts组件引入

首先，在需要使用图表的页面配置文件中引入ECharts组件。以pages/airQuality/index.json为例：

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

基础折线图实现

折线图适合展示空气质量指标随时间的变化趋势。以下是一个PM2.5趋势折线图的实现示例，代码参考自pages/line/index.js：

// pages/airQuality/index.js
import * as echarts from '../../ec-canvas/echarts';

function initPM25Chart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: 'PM2.5趋势图',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
    },
    yAxis: {
      type: 'value',
      name: '浓度(μg/m³)'
    },
    series: [{
      data: [50, 60, 70, 80, 75, 65, 55, 50],
      type: 'line',
      smooth: true
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initPM25Chart
    }
  }
});

基础饼图实现

饼图适合展示空气质量等级分布情况。以下是一个空气质量等级占比饼图的实现示例，代码参考自pages/pie/index.js：

// pages/airQuality/pieChart.js
import * as echarts from '../../ec-canvas/echarts';

function initAQIPieChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '空气质量等级占比',
      left: 'center'
    },
    series: [{
      type: 'pie',
      data: [
        {value: 30, name: '优'},
        {value: 40, name: '良'},
        {value: 20, name: '轻度污染'},
        {value: 10, name: '中度污染'}
      ]
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initAQIPieChart
    }
  }
});

第5-6天：高级图表与交互功能开发

多图表展示实现

在一个页面中展示多个图表，可以参考pages/multiCharts/index.js的实现方式。以下是一个简单示例：

// pages/airQuality/multiCharts.js
Page({
  data: {
    ecPM25: {
      onInit: initPM25Chart
    },
    ecAQI: {
      onInit: initAQIChart
    }
  }
});

对应的WXML文件：

<view class="chart-container">
  <ec-canvas id="pm25Chart" canvas-id="pm25Chart" ec="{{ ecPM25 }}"></ec-canvas>
  <ec-canvas id="aqiChart" canvas-id="aqiChart" ec="{{ ecAQI }}"></ec-canvas>
</view>

图表交互功能实现

ECharts提供了丰富的交互功能，如 tooltip、数据区域缩放等。以下是一个添加 tooltip 功能的示例：

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  // 其他配置...
};

图表数据动态更新

实现图表数据的动态更新，可以参考pages/lazyLoad/index.js的延迟加载方式。以下是一个简单示例：

// 更新图表数据
updateChartData: function(newData) {
  this.chart.setOption({
    series: [{
      data: newData
    }]
  });
}

第7天：系统整合与优化

页面布局优化

使用Flex布局优化小程序页面，确保在不同设备上都有良好的显示效果：

/* pages/airQuality/index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
}

.chart-container {
  width: 100%;
  height: 400rpx;
  margin-bottom: 20rpx;
}

性能优化

1. 图表懒加载：参考pages/lazyLoad/index.js实现图表的延迟加载。
2. 数据缓存：使用微信小程序的本地缓存API减少网络请求。
3. ECharts文件优化：可以通过ECharts在线定制工具减小echarts.js文件体积。

测试与发布

1. 使用微信开发者工具进行本地测试
2. 生成体验版小程序进行内测
3. 提交审核并发布正式版

总结与展望

通过7天的学习，我们成功构建了一个功能完善的微信小程序空气质量监测系统。该系统实现了空气质量数据的采集、处理和可视化展示，充分发挥了Apache ECharts微信小程序版的强大功能。

未来，我们可以进一步扩展系统功能，如添加空气质量预警功能、多城市对比分析、历史数据查询等。同时，也可以优化用户界面，提升用户体验。

希望本文能够帮助你快速掌握ECharts微信小程序版的使用方法，开发出更多优秀的可视化应用。如果觉得本文对你有帮助，请点赞、收藏、关注三连支持一下！

下期预告：《微信小程序图表性能优化实战》