该微信小程序前端框架全局展示如上，包含五个部分，均可自定义修改替换图片、颜色或数据。

一、标题签名部分

在index.wxml文件中可修改标题签名部分，替换Monitor文本。

替换代码块如下：

<!--index.wxml-->
<view class="container">
  <view class="title">Monitor</view>

二、地图展示部分

将需要展示的任意图片复制到image项目文件夹中，并在index.wxml中替换图片名和图片标题。

替换代码块如下：

<view class="map">
    <view class="title">DETECTION MAP</view>
    <image src="../../image/map.png"
    mode="widthFix"></image>

  </view>

三、按钮选择部分

index.wxml文件中设置六个按钮，可替换按钮名字ABCD等，可替换按钮标题。在index.js文件中设置按钮的触发和数据联动。

替换代码块如下：

  </view>
  <view class="node">
    <view class="title">SELECT THE AREA</view>   
    <view class="btnBox">
      <view bindtap="nodeChange" data-name="A" class="btn {{nodeActive=='A'?'active':''}}">A</view>
      <view bindtap="nodeChange" data-name="B" class="btn {{nodeActive=='B'?'active':''}}">B</view>
      <view bindtap="nodeChange" data-name="C" class="btn {{nodeActive=='C'?'active':''}}">C</view>
      <view bindtap="nodeChange" data-name="D" class="btn {{nodeActive=='D'?'active':''}}">D</view>
      <view bindtap="nodeChange" data-name="E" class="btn {{nodeActive=='E'?'active':''}}" >E</view>
      <view bindtap="nodeChange" data-name="F" class="btn {{nodeActive=='F'?'active':''}}">F</view>
    </view>
  </view>

四、数据圆环百分比展示与联动

不同按钮会展示不同的数据组，使用了canvas组件来实现圆环百分比，可在index.js文件中替换数据，在index.wxml中替换数据标题。按钮与数据联动已在.js中设置好,并且可实现使用按钮刷新。

wxml替换代码块如下：

<view class="chartbox">
      <view class="chart1">
        <ec-canvas id="mychart-demo1" canvas-id="mychart1" ec="{{ec1}}" force-use-old-canvas="{{true}}"></ec-canvas>
        <view class="title">
          ELECTRICITY
        </view>
      </view>
      <view class="chart2">
        <ec-canvas id="mychart-demo2" canvas-id="mychart2" ec="{{ec2}}" force-use-old-canvas="{{true}}"></ec-canvas>
        <view class="title">
          TEMPERATURE
        </view>
      </view>
      <view class="chart3">
        <ec-canvas id="mychart-demo3" canvas-id="mychart3" ec="{{ec3}}" force-use-old-canvas="{{true}}"></ec-canvas>
        <view class="title">
          HUMIDITY
        </view>
      </view>
    </view>

js替换代码块如下：

Page({
  data: {
    monitorData:{
      A:{
        elec:30,
        temp:16,
        hum:49
      },
      B:{
        elec:50,
        temp:13,
        hum:45
      },
      C:{
        elec:40,
        temp:33,
        hum:45
      },
      D:{
        elec:44,
        temp:20,
        hum:66
      },
      E:{
        elec:22,
        temp:44,
        hum:32
      },
      F:{
        elec:20,
        temp:23,
        hum:55
      },
    },
  },

五、数据曲线部分

使用canvas组件设置了两组数据曲线，以不同颜色展示，各点数值均可在.js文件中替换，标题可在index.wxml文件中替换。

wxml替换代码块如下：

<view class="curve">
    <view class="title">HISTORY CURVE</view>
    <ec-canvas id="mychart-demo" canvas-id="mychart" ec="{{ec}}" force-use-old-canvas="{{true}}"></ec-canvas>
  </view>

js替换代码块如下：

function getOption() {
  let colors = ['#ff9fa7', '#abb3ff'];
  let yNameOne = 'TEMP(℃)';
  let yNameTwo = 'HUMI(%）';
  let xData = [9,8,7,6,5,4,3,2,1,0];
  let yData = {
    one: [50, 72, 70,88,64,35,55,74,50,77],
    two: [88,64,35,55,74,50,77,52, 39, 100],
  };
  let splitNumber = 10; 

六、进度条展示部分

该部分可用于功能拓展，点击开始按钮后，进度条会从0动态变化到100，可在index.wxml中修改标题。

替换代码块如下：

<view class="progress-box">
      <text>PROGRESS</text>
      <progress percent="{{percent}}" color="#b7d9ff" active backgroundColor="#485c75" stroke-width="10" />
</view>

七、补充说明

框架中所有组件的大小或颜色均可在index.wxss中修改，包括但不限于大小、字体、颜色、相对位置等等。