当前位置：网站首页>Epidemic prevention registration applet
Epidemic prevention registration applet
2022-04-23 09:44:00 【Code yuan】
Epidemic prevention registration applet
See the effect
Code
<!--index.wxml-->
<view class="page-wrapper">
<!-- The navigation bar -->
<view class="nav-title">
<view class="title-line"></view>
<view> Domestic epidemic map </view>
</view>
<!-- This is the map -->
<view class="container1">
<ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{
{ ec }}"></ec-canvas>
</view>
<!-- The navigation bar -->
<view class="nav-title">
<view class="title-line"></view>
<view> Daily trend </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>
<!-- Broken line diagram 1 New diagnosis and cumulative diagnosis -->
<view class="container2" wx:if="{
{lineSelected==0?true:false}}">
<ec-canvas id="mychart-dom-line1" canvas-id="mychart-line1" ec="{
{ ec1 }}"></ec-canvas>
</view>
<!-- Broken line diagram 2 Cumulative cure / Death -->
<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: {
// Heat map
ec: {
onInit: initChart,
},
// Broken line diagram 1 Cumulative diagnosis of
ec1: {
onInit: initChart1,
},
// Broken line diagram 2 Death cures
ec2: {
onInit: initChart2,
},
linegoryArr: [" newly added / Cumulative diagnosis ", " Death / Cure "], // Selection array of line chart
lineSelected: 0, //0 Represents the first line chart , And so on
categoryArr: [" By province ", " By sex ", " By age "], // Selection array of epidemic data
categorySelected: 0, //0 Indicates by province , And so on
displayData: [], // Data presented
dataDate: '', // Data date
headData:[],// The degree data of the head
provincesData: [], // Cache the provincial data , That is, background data access will not be triggered during switching
genderData: [], // Gender data , ditto
ageData: [], // Age group data , ditto
},
// Change the type of data displayed
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()
}
},
// Replace the displayed line chart
changeLine(e) {
var id = e.currentTarget.dataset.id;
this.setData({
lineSelected: id
})
},
// Get epidemic data
getData() {
this.getDetailData()
this.getHeadData()
this.getMapData()
},
// Get epidemic data column data
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: ' Data acquisition failed ',
icon: 'none'
})
}
}
})
}
},
// Access to gender information
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: ' Data acquisition failed ',
icon: 'none'
})
}
}
})
}
},
// Current header data
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(/ The number of /g, "num"))
that.setData({
headData: data
})
} else {
wx.showToast({
title: ' Data acquisition failed ',
icon: 'none'
})
}
}
})
}
},
// Heat map data
getMapData(){
var that=this
getMapData1().then(res=>{
console.log(res)
mapData=res
setTimeout(function () {
that.setData({
ec: {
onInit: initChart,
}
})
}, 200) // Delay time Here is 1 second
})
},
// Get age information
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: ' Data acquisition failed ',
icon: 'none'
})
}
}
})
}
},
onLoad() {
this.getData()
var date = new Date()
this.setData({
dataDate: util.formatTimeWithoutYear(date)
})
}
})
// The initial function of generating the map
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
echarts.registerMap('china', chinaJson);
const option = {
// Background colors other than maps
backgroundColor: "#eee",
// title
title: {
text: ' Current diagnosis Statistics ',
// subtext:" Domestic data ",
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
}, // Don't specify max, Express max For infinity （Infinity）.
{
min: 1001,
max: 2000
},
{
min: 501,
max: 1000
},
{
min: 201,
max: 500
},
{
min: 11,
max: 200
},
{
max: 10
} // Don't specify min, Express min For infinity （-Infinity）.
],
itemGap: 5,
textStyle: {
fontSize: 10,
width: '70%'
},
left: 'left',
top: 'bottom',
calculable: true
},
// tooltip
tooltip: {
trigger: 'item',
},
// toolbox, The toolbar You can set and save maps, etc
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} people ',
textStyle: {
color: '#000',
fontSize: 10,
}
},
},
itemStyle: {
normal: {
borderColor: '#615E5E',
areaColor: 'white',
},
emphasis: {
areaColor: '#1ABC9C',
borderColor: '#1ABC9C',
borderWidth: 0,
// The real machine experience is not good
// shadowColor: 'rgba(0, 0, 0, 0.5)',
// shadowBlur: 10,
opacity: 0.4
}
},
animation: false,
data: mapData
}],
};
chart.setOption(option);
return chart;
}
// Broken line diagram 1 initialization
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: [' New diagnosis ', ' Current diagnosis ', ' Cumulative diagnosis ']
},
grid: {
containLabel: true,
top: '20%',
left: '5%',
right: "5%",
bottom: "10%",
},
xAxis: {
// Font settings
axisLabel: {
fontSize: 10
},
axisPointer: {
label: {
show: true,
margin: -50,
formatter: function(params) {
// Let's assume that this axis is type by '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: [' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ', ' Sunday ']
},
yAxis: {
axisLabel: {
},
axisPointer: {
},
minInterval: 1,
x: 'center',
type: 'value',
// Font settings
axisLabel: {
fontSize: 10
},
},
series: [{
name: ' New diagnosis ',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: ' Current diagnosis ',
type: 'line',
smooth: true,
data: [12, 50, 51, 35, 70, 30, 20]
}, {
name: ' Cumulative diagnosis ',
type: 'line',
smooth: true,
data: [10, 30, 31, 50, 40, 20, 10]
}, ]
};
chart.setOption(option);
return chart;
}
// Broken line diagram 2 initialization
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: [' Death ', ' Cure ']
},
grid: {
containLabel: true,
top: '20%',
left: '5%',
right: "5%",
bottom: "10%",
},
xAxis: {
// Font settings
axisLabel: {
fontSize: 10
},
axisPointer: {
label: {
show: true,
margin: -50,
formatter: function(params) {
// Let's assume that this axis is type by '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: [' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ', ' Sunday ']
},
yAxis: {
axisLabel: {
},
axisPointer: {
},
minInterval: 1,
x: 'center',
type: 'value',
// Font settings
axisLabel: {
fontSize: 10
},
},
series: [{
name: ' Death ',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: ' Cure ',
type: 'line',
smooth: true,
data: [12, 50, 51, 35, 70, 30, 20]
}, ]
};
chart.setOption(option);
return chart;
}
// Get epidemic heat map data
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: ' Data acquisition failed ',
icon: 'none'
})
}
}
})
})
};
summary
Remember to like
版权声明
本文为[Code yuan]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204230942157560.html
边栏推荐
- ABAP implementation publishes restful services for external invocation example
- Single sign on SSO
- [educational codeforces round 80] problem solving Report
- Explanation of order and primitive root of number theory
- DVWA range practice record
- Simply understand = = and equals, why can string not use new
- Leetcode question bank 78 Subset (recursive C implementation)
- Three challenges that a successful Devops leader should be aware of
- Dropout技术之随机神经元与随机深度
- [hdu6868] absolute math (pusher + Mobius inversion)
猜你喜欢
Personal homepage software fenrus
JS what is an event? Event three elements and operation elements
Redis 异常 read error on connection 解决方案
Kettle experiment conversion case
Base de la technologie électronique numérique 3.1 aperçu du circuit de porte, 3.2 circuit de porte à diode semi - conductrice
亚马逊云科技入门资源中心，从0到1轻松上云
Kettle experiment (III)
![Sql1 [geek challenge 2019]](/img/ad/afca09bc1da003393319af700e90e3.png)
Sql1 [geek challenge 2019]
ABAP publishes OData service samples from CDs view
108. Convert an ordered array into a binary search tree
随机推荐
Flutter 的加载动画这么玩更有趣
Two declaration methods of functions of JS
Codeforces Round ＃784 (Div. 4)
Redis exception read error on connection solution
LeetCode 1611. The minimum number of operations to make an integer 0
Set the maximum width of the body, but why does the background color of the body cover the whole page?
[codeforces - 208e] blood cousins
Go language learning notes - slice, map | go language from scratch
MySQL - Chapter 1 (data types in MySQL)
Leetcode0587. Install fence
JS what is an event? Event three elements and operation elements
Three ways to create objects in JS
论文阅读《Integrity Monitoring Techniques for Vision Navigation Systems》——3背景
Sql1 [geek challenge 2019]
Image processing in opencv -- Introduction to contour + contour features
What is monitoring intelligent playback and how to use intelligent playback to query video recording
SAP debug debug for in, reduce and other complex statements
Kettle实验 转换案例
DVWA range practice
[hdu6833] a very easy math problem