当前位置：网站首页>防疫登记小程序
防疫登记小程序
2022-04-23 09:42:00 【code袁】
防疫登记小程序
看效果
代码
<!--index.wxml-->
<view class="page-wrapper">
<!-- 导航栏 -->
<view class="nav-title">
<view class="title-line"></view>
<view>国内疫情地图</view>
</view>
<!-- 这是地图 -->
<view class="container1">
<ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{
{ ec }}"></ec-canvas>
</view>
<!-- 导航栏 -->
<view class="nav-title">
<view class="title-line"></view>
<view>每日趋势</view>
</view>
<view class="category">
<view class="{
{lineSelected==index?'category-item-selected':'category-item'}}" wx:for-items="{
{linegoryArr}}" bindtap="changeLine" wx:key="index" data-id="{
{index}}">{
{
item}}</view>
</view>
<!-- 折线图1新增确诊和累计确诊 -->
<view class="container2" wx:if="{
{lineSelected==0?true:false}}">
<ec-canvas id="mychart-dom-line1" canvas-id="mychart-line1" ec="{
{ ec1 }}"></ec-canvas>
</view>
<!-- 折线图2累计治愈/死亡 -->
<view class="container2" wx:if="{
{lineSelected==1?true:false}}">
<ec-canvas id="mychart-dom-area2" canvas-id="mychart-area2" ec="{
{ ec2 }}"></ec-canvas>
</view>
</view>
import * as echarts from '../../ec-canvas/echarts';
import chinaJson from './chinaMap.js'
var mapData=[]
var city_url = "https://www.hkzhaoscut.top/normalUser/getCityData"
var province_url = "https://www.hkzhaoscut.top/normalUser/getProvinceData"
var gender_url = "https://www.hkzhaoscut.top/normalUser/getGenderData"
var age_url = "https://www.hkzhaoscut.top/normalUser/getAgeData"
var level_url = "https://www.hkzhaoscut.top/normalUser/getLevelData"
var util = require("../utils/chinaMap")
const app = getApp();
Page({
data: {
// 热力图
ec: {
onInit: initChart,
},
// 折线图1之累计确诊
ec1: {
onInit: initChart1,
},
// 折线图2之死亡治愈
ec2: {
onInit: initChart2,
},
linegoryArr: ["新增/累计确诊", "死亡/治愈"], //折线图的选择数组
lineSelected: 0, //0表示第一个折线图，以此类推
categoryArr: ["按省份", "按性别", "按年龄段"], //疫情数据的选择数组
categorySelected: 0, //0表示按省份，以此类推
displayData: [], //展示的数据
dataDate: '', //数据日期
headData:[],//头部的程度数据
provincesData: [], //缓存一下省份数据，也就是切换时不会触发后台数据访问
genderData: [], //性别数据，同上
ageData: [], //年龄段数据，同上
},
// 更换显示的数据种类
changeCategory(e) {
var id = e.currentTarget.dataset.id;
this.setData({
categorySelected: id
})
if (id == 1) {
this.getGender()
} else if (id == 0) {
this.getDetailData()
} else if (id == 2) {
this.getAge()
}
},
// 更换显示的折线图
changeLine(e) {
var id = e.currentTarget.dataset.id;
this.setData({
lineSelected: id
})
},
// 获取疫情数据
getData() {
this.getDetailData()
this.getHeadData()
this.getMapData()
},
// 获取疫情数据栏数据
getDetailData() {
var that = this
if (that.data.provincesData.length != 0) {
that.setData({
displayData: that.data.provincesData
})
} else {
wx.request({
url: city_url,
success(res) {
// console.log(res)
if (res.data.code == 200) {
var formattedData = util.formatProvince(res.data.data)
that.setData({
displayData: formattedData,
provincesData: formattedData
})
} else {
wx.showToast({
title: '数据获取失败',
icon: 'none'
})
}
}
})
}
},
// 获取性别信息
getGender() {
var that = this
if (that.data.genderData.length != 0) {
that.setData({
displayData: that.data.genderData
})
} else {
wx.request({
url: gender_url,
success(res) {
console.log(res)
if (res.data.code == 200) {
var formattedData = util.formatGender(res.data.data)
that.setData({
displayData: formattedData,
genderData: formattedData
})
} else {
wx.showToast({
title: '数据获取失败',
icon: 'none'
})
}
}
})
}
},
// 当前的头部数据
getHeadData(){
var that = this
if (that.data.headData.length != 0) {
that.setData({
headData: that.data.headData
})
} else {
wx.request({
url: level_url,
success(res) {
console.log(res)
if (res.data.code == 200) {
console.log(res.data.data)
var data = JSON.parse(JSON.stringify(res.data.data).replace(/人数/g, "num"))
that.setData({
headData: data
})
} else {
wx.showToast({
title: '数据获取失败',
icon: 'none'
})
}
}
})
}
},
// 热力图数据
getMapData(){
var that=this
getMapData1().then(res=>{
console.log(res)
mapData=res
setTimeout(function () {
that.setData({
ec: {
onInit: initChart,
}
})
}, 200) //延迟时间 这里是1秒
})
},
// 获取年龄段信息
getAge() {
var that = this
if (that.data.ageData.length != 0) {
console.log("huancun")
that.setData({
displayData: that.data.ageData
})
} else {
wx.request({
url: age_url,
success(res) {
console.log(res)
if (res.data.code == 200) {
var formattedData = util.formatAge(res.data.data)
that.setData({
displayData: formattedData,
ageData: formattedData
})
} else {
wx.showToast({
title: '数据获取失败',
icon: 'none'
})
}
}
})
}
},
onLoad() {
this.getData()
var date = new Date()
this.setData({
dataDate: util.formatTimeWithoutYear(date)
})
}
})
//生成地图的初始函数
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
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: mapData
}],
};
chart.setOption(option);
return chart;
}
// 折线图1初始化
function initChart1(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
backgroundColor: "#eee",
color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
tooltip: {
trigger: 'axis',
show: true,
axisPointer: {
type: "line",
},
},
legend: {
data: ['新增确诊', '现有确诊', '累计确诊']
},
grid: {
containLabel: true,
top: '20%',
left: '5%',
right: "5%",
bottom: "10%",
},
xAxis: {
// 字体设置
axisLabel: {
fontSize: 10
},
axisPointer: {
label: {
show: true,
margin: -50,
formatter: function(params) {
// 假设此轴的 type 为 'time'。
console.log(params)
return params.seriesData[0].seriesName + ' ' + params.seriesData[0].data + '\n' + params.seriesData[1].seriesName + ' ' + params.seriesData[1].data + '\n' + params.seriesData[2].seriesName + ' ' + params.seriesData[2].data
;
},
backgroundColor: "white",
color: "#13227a"
}
},
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
axisLabel: {
},
axisPointer: {
},
minInterval: 1,
x: 'center',
type: 'value',
// 字体设置
axisLabel: {
fontSize: 10
},
},
series: [{
name: '新增确诊',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: '现有确诊',
type: 'line',
smooth: true,
data: [12, 50, 51, 35, 70, 30, 20]
}, {
name: '累计确诊',
type: 'line',
smooth: true,
data: [10, 30, 31, 50, 40, 20, 10]
}, ]
};
chart.setOption(option);
return chart;
}
// 折线图2初始化
function initChart2(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
backgroundColor: "#eee",
color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
tooltip: {
trigger: 'axis',
show: true,
axisPointer: {
type: "line",
},
},
legend: {
data: ['死亡', '治愈']
},
grid: {
containLabel: true,
top: '20%',
left: '5%',
right: "5%",
bottom: "10%",
},
xAxis: {
// 字体设置
axisLabel: {
fontSize: 10
},
axisPointer: {
label: {
show: true,
margin: -50,
formatter: function(params) {
// 假设此轴的 type 为 'time'。
console.log(params)
return params.seriesData[0].seriesName + ' ' + params.seriesData[0].data + '\n' + params.seriesData[1].seriesName + ' ' + params.seriesData[1].data
;
},
backgroundColor: "white",
color: "#13227a"
}
},
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
axisLabel: {
},
axisPointer: {
},
minInterval: 1,
x: 'center',
type: 'value',
// 字体设置
axisLabel: {
fontSize: 10
},
},
series: [{
name: '死亡',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: '治愈',
type: 'line',
smooth: true,
data: [12, 50, 51, 35, 70, 30, 20]
}, ]
};
chart.setOption(option);
return chart;
}
// 获取疫情热力地图数据
function getMapData1() {
return new Promise(function(reslove,rejected){
wx.request({
url: province_url,
success(res) {
console.log(res)
if (res.data.code == 200) {
reslove(util.formatMap(res.data.data))
} else {
wx.showToast({
title: '数据获取失败',
icon: 'none'
})
}
}
})
})
};
总结
记得点赞哦
版权声明
本文为[code袁]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_48164590/article/details/124303427
边栏推荐
- Number theory blocking (integer division blocking)
- How to use SQL statement union to get another column of another table when the content of a column in a table is empty
- RSA encryption and decryption signature verification
- [reading notes] Chapter 5 conditional statements, circular statements and block statements of Verilog digital system design tutorial (with answers to thinking questions)
- AQS & reentrantlock implementation principle
- 代码源每日一题 div1 (701-707)
- STM32 and FreeRTOS stack parsing
- Go language learning notes - slice, map | go language from scratch
- 理解作用域
- KVM installation and deployment
猜你喜欢
Example of data object mask used by SAP translate
How to obtain geographical location based on photos and how to prevent photos from leaking geographical location
Flink 流批一体在小米的实践
云身份过于宽松，为攻击者打开了大门
Enter "net start MySQL" and "system error 5. Access denied" appears. Detailed explanation of the problem
Canary publishing using ingress
Chinese Remainder Theorem and extended Chinese remainder theorem that can be understood by Aunt Baojie
Setnx command execution failed due to full redis memory
LeetCode 1611. The minimum number of operations to make an integer 0
Random neurons and random depth of dropout Technology
随机推荐
Cloud computing competition -- basic part of 2020 competition [task 3]
ABAP 7.4 SQL Window Expression
Using sqlmap injection to obtain the account and password of the website administrator
Solving Lucas number and combination theorem
Random neurons and random depth of dropout Technology
Go language learning notes - slice, map | go language from scratch
[geek challenge 2019] havefun1
Base de la technologie électronique numérique 3.1 aperçu du circuit de porte, 3.2 circuit de porte à diode semi - conductrice
Redis exception read error on connection solution
Image processing in opencv -- Introduction to contour + contour features
Kettle实验
Kettle experiment (III)
Leetcode question bank 78 Subset (recursive C implementation)
Simply understand = = and equals, why can string not use new
Summary of common concepts and problems of linear algebra in postgraduate entrance examination
Golang force buckle leetcode 396 Rotation function
DMP engine work summary (2021, lightsaber)
JS DOM event
Redis 内存占满导致的 Setnx 命令执行失败
Kettle experiment