微信小程序端疫情上报系统

最新推荐文章于 2023-02-04 14:13:04 发布

脆香di鸡块

最新推荐文章于 2023-02-04 14:13:04 发布

阅读量7.6k

点赞数 17

分类专栏：微信小程序前端文章标签：小程序 javascript 经验分享

本文链接：https://blog.csdn.net/qq_43452115/article/details/105759051

版权

本文介绍了使用微信小程序开发的一款疫情上报系统，前端实现了普通用户查看新闻和数据、医生注册及上报案例、管理员审核等功能。前端源码使用了Springboot、redis、SpringSecurity作为后端支持，前端页面设计参考了现有疫情数据展示设计，并使用echarts组件进行数据图表展示，如热力图等。

摘要由CSDN通过智能技术生成

疫情上报系统，微信小程序实现前端

前端源码地址

实现的功能主要有：普通用户查看新闻和数据、医生注册管理上报案例、管理人员审核医生注册、新增新闻和审核案例。

是课程的一个大作业，后端用的是Springboot、redis、SpringSecurity作权限管理等，我这部分的代码主要是前端小程序的页面，花了我两周左右，也挺不容易的。源码待课程结束后再放出。

由于是个人完成，所以图标素材是找自阿里巴巴图标库
，界面设计都有参考现在一些疫情数据展示页的设计。

话不多说，直接上图

数据展示页一（echarts实现）
数据展示页二
个人功能页
医生上报案例页面
登录注册页

还有其他一些页面风格类似，以上为大体的实现图。
功能难点主要在展示页面的展示图表上，我是用了echart组件。下面说一下热力图的使用步骤（其他图同理）。

首先在echart小程序版本
获取demo，把ec-canvas文件夹完整复制到自己的小程序中。
附官方文档：https://www.echartsjs.com/zh/option.html#title
在需要引进图表的js、json和wxml页面分别加入如下代码

import * as echarts from '../../ec-canvas/echarts';
import chinaJson from './chinaMap.js'

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

  <!-- 注意，使用任何图表都先设置高和宽-->
  <view class="container">
    <ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{
    { ec }}"> </ec-canvas>
  </view>

然后在js中添加ec的初始函数initChart，各参数的用法请在官方文档
中查找

//生成地图的初始函数
function initChart(canvas, width, height) {
   
  const chart = echarts.init(canvas, null, {
   
    width: width,
    height: height
  });
  canvas.setChart(chart);
  console.log("热力图")
  echarts.registerMap('china', chinaJson);

  const option = {
   
    // 除地图外的背景颜色
    backgroundColor: "#eee",
    // title
    title: {
   
      text: '当前确诊统计',
      // subtext:"国内数据",
      left: 'center',
      top: '2%',
      textStyle: {
   
        color: 'black',
        fontWeight: "bold",
        fontSize: 15
      },
      // subtextStyle: {
   
      //   color: "grey",
      //   fontSize: 10
      // }

    },
    // visualMap
    visualMap: {
   
      type: 'piecewise',
      splitNumber: 5,
      pieces: [{
   
          min: 2001
        }, // 不指定 max，表示 max 为无限大（Infinity）。
        {
   
          min: 1001,
          max: 2000
        },
        {
   
          min: 501,
          max: 1000
        },
        {
   
          min: 201,
          max: 500
        },
        {
   
          min: 11,
          max: 200
        },
        {
   
          max: 10
        } // 不指定 min，表示 min 为无限大（-Infinity）。
      ],
      itemGap: 5,
      textStyle: {
   
        fontSize: 10,
        width: '70%'
      },
      left: 'left',
      top: 'bottom',
      calculable: true
    },
    // tooltip
    tooltip: {
   
      trigger: 'item',

    },
    //  toolbox,工具栏  可以设置保存地图等
    toolbox: {
   
      show: false,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
   
        dataView: {
   
          readOnly: false
        },
        restore: {
   },
        saveAsImage: {
   }
      }
    },
    series: [{
   
      type: 'map',
      mapType: 'china',
      zoom: 1.15,
      label: {
   
        // normal: {
   
        //   show: false,
        //   fontSize:10
        // },
        emphasis: {
   

          formatter: '{b}: {c}人',

          textStyle: {
   
            color: '#000',
            fontSize: 10,
          }
        },

      },
      itemStyle: {
   
        normal: {
   
          borderColor: '#615E5E',
          areaColor: 'white',
        },
        emphasis: {
   
          areaColor: '#1ABC9C',
          borderColor: '#1ABC9C',
          borderWidth: 0,
          // 真机体验不好
          // shadowColor: 'rgba(0, 0, 0, 0.5)',
          // shadowBlur: 10,
          opacity: 0.4
        }
      },
      animation: false,
		//这里设置展示的数据
      data: app.globalData.mapData

    }],

  };

  chart.setOption(option);

  return chart;
}

不要忘了在data中设置初始化参数ec

data: {
   
    // 热力图
    ec: {
   
      onInit: initChart,
    },
    }

对于不同的地图引入不同的js坐标数据，在初始化ec-charts时注册该地图

echarts.registerMap('china', chinaJson);

这里的是一个中国全地图的js

module.exports = {
   
  "type": "FeatureCollection",
  "features":
    [
      {
    "type": "Feature", "properties": {
    "id": "65", "size": "550", "name": "新疆维吾尔自治区", "cp": [84.9023, 42.148], "childNum": 18 }, "geometry": {
    "type": "Polygon", "coordinates": [[[96.416, 42.7588], [96.416, 42.7148], [95.9766, 42.4951], [96.0645, 42.3193], [96.2402, 42.2314], [95.9766, 41.9238], [95.2734, 41.6162], [95.1855, 41.792], [94.5703, 41.4844], [94.043, 41.0889], [93.8672, 40.6934], [93.0762, 40.6494], [92.6367, 39.6387], [92.373, 39.3311], [92.373, 39.1113], [92.373, 39.0234], [90.1758, 38.4961], [90.3516, 38.2324], [90.6152, 38.3203], [90.5273, 37.8369], [91.0547, 37.4414], [91.3184, 37.0898], [90.7031, 36.7822], [90.791, 36.6064], [91.0547, 36.5186], [91.0547, 36.0791], [90.8789, 36.0352], [90, 36.2549], [89.9121, 36.0791], [89.7363, 36.0791], [89.209, 36.2988], [88.7695, 36.3428], [88.5938, 36.4746], [87.3633, 36.4307], [86.2207, 36.167], [86.1328, 35.8594], [85.6055, 35.6836], [85.0781, 35.7275], [84.1992, 35.376], [83.1445, 35.4199], [82.8809, 35.6836], [82.4414, 35.7275], [82.002, 35.332], [81.6504, 35.2441], [80.4199, 35.4199], [80.2441, 35.2881], [80.332, 35.1563], [80.2441, 35.2002], [79.8926, 34.8047], [79.8047, 34.4971], [79.1016, 34.4531], [79.0137, 34.3213], [78.2227, 34.7168], [78.0469, 35.2441], [78.0469, 35.5078], [77.4316, 35.4639], [76.8164, 35.6396], [76.5527, 35.8594], [76.2012, 35.8154], [75.9375, 36.0352], [76.0254, 36.4746], [75.8496, 36.6943], [75.498, 36.7383], [75.4102, 36.958], [75.0586, 37.002], [74.8828, 36.9141], [74.7949, 37.0459], [74.5313, 37.0898], [74.5313, 37.2217], [74.8828, 37.2217], [75.1465, 37.4414], [74.8828, 37.5732], [74.9707, 37.749], [74.8828, 38.4521], [74.3555, 38.6719], [74.1797, 38.6719], [74.0918, 38.54], [73.8281, 38.584], [73.7402, 38.8477], [73.8281, 38.9795], [73.4766, 39.375], [73.916, 39.5068], [73.916, 39.6826], [73.8281, 39.7705], [74.0039, 40.0342], [74.8828, 40.3418], [74.7949, 40.5176], [75.2344, 40.4297], [75.5859, 40.6494], [75.7617, 40.2979], [76.377, 40.3857], [76.9043, 41.001], [77.6074, 41.001], [78.1348, 41.2207], [78.1348, 41.3965], [80.1563, 42.0557], [80.2441, 42.2754], [80.1563, 42.627], [80.2441, 42.8467], [80.5078, 42.8906], [80.4199, 43.0664], [80.7715, 43.1982], [80.4199, 44.165], [80.4199, 44.6045], [79.9805, 44.8242], [79.9805, 44.9561], [81.7383, 45.3955], [82.0898, 45.2197], [82.5293, 45.2197], [82.2656, 45.6592], [83.0566, 47.2412], [83.6719, 47.0215], [84.7266, 47.0215], [84.9023, 46.8896], [85.5176, 47.0654], [85.6934, 47.2852], [85.5176, 48.1201], [85.7813, 48.4277], [86.5723, 48.5596], [86.8359, 48.8232], [86.748, 48.9551], [86.8359, 49.1309], [87.8027, 49.1748], [87.8906, 48.999], [87.7148, 48.9111], [88.0664, 48.7354], [87.9785, 48.6035], [88.5059, 48.3838], [88.6816, 48.1641], [89.1211, 47.9883], [89.5605, 48.0322], [89.7363, 47.8564], [90.0879, 47.8564], [90.3516, 47.6807], [90.5273, 47.2412], [90.8789, 46.9775], [91.0547, 46.582], [90.8789, 46.3184], [91.0547, 46.0107], [90.7031, 45.7471], [90.7031, 45.5273], [90.8789, 45.2197], [91.582, 45.0879], [93.5156, 44.9561], [94.7461, 44.3408], [95.3613, 44.2969], [95.3613, 44.0332], [95.5371, 43.9014], [95.8887, 43.2422], [96.3281, 42.9346], [96.416, 42.7588]]] } },
      {
    "type": "Feature", "properties": {
    "id"