|
|
|
// pages/member/member.js
|
|
|
|
import * as echarts from '../../../ec-canvas/echarts';
|
|
|
|
const app = getApp()
|
|
|
|
|
|
|
|
const app = getApp();
|
|
|
|
|
|
|
|
function initChart(canvas, width, height) {
|
|
|
|
function initChart1(canvas, width, height) {
|
|
|
|
const chart = echarts.init(canvas, null, {
|
|
|
|
width: width,
|
|
|
|
height: height
|
|
|
|
});
|
|
|
|
canvas.setChart(chart);
|
|
|
|
var colors = ['#5793f3', '#d14a61', '#675bba'];
|
|
|
|
var option = {
|
|
|
|
color: colors,
|
|
|
|
|
|
|
|
var option = {
|
|
|
|
title: {
|
|
|
|
text: '',
|
|
|
|
subtext: ''
|
|
|
|
},
|
|
|
|
textStyle: {
|
|
|
|
fontSize: 12
|
|
|
|
},
|
|
|
|
tooltip: {
|
|
|
|
trigger: 'none',
|
|
|
|
axisPointer: {
|
|
|
|
type: 'cross'
|
|
|
|
}
|
|
|
|
trigger: 'axis'
|
|
|
|
},
|
|
|
|
legend: {
|
|
|
|
data: ['每月','平均' ]
|
|
|
|
data: ['每月', '平均']
|
|
|
|
},
|
|
|
|
grid: {
|
|
|
|
top: 70,
|
|
|
|
bottom: 50
|
|
|
|
toolbox: {
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
xAxis: [
|
|
|
|
|
|
|
|
{
|
|
|
|
type: 'category',
|
|
|
|
axisTick: {
|
|
|
|
alignWithLabel: true
|
|
|
|
},
|
|
|
|
axisLine: {
|
|
|
|
onZero: false,
|
|
|
|
lineStyle: {
|
|
|
|
color: colors[1]
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
axisPointer: {
|
|
|
|
label: {
|
|
|
|
formatter: function (params) {
|
|
|
|
return '降水量 ' + params.value
|
|
|
|
+ (params.seriesData.length ? '：' + params.seriesData[0].data : '');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data: ["18.11", "18.12", "19.01", "19.02", "19.03", "19.04", "19.05", "19.06", "19.07"],
|
|
|
|
axisLabel: {
|
|
|
|
interval: 0,
|
|
|
|
},
|
|
|
|
smooth: true,
|
|
|
|
xAxis: {
|
|
|
|
type: 'category',
|
|
|
|
boundaryGap: false,
|
|
|
|
data: ['18.11', '18.12', '19.01', '19.02', '19.03', '19.04', '19.05', '19.06', '19.07'],
|
|
|
|
axisLabel: {
|
|
|
|
interval: 1,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'category',
|
|
|
|
axisTick: {
|
|
|
|
alignWithLabel: true
|
|
|
|
},
|
|
|
|
axisLine: {
|
|
|
|
onZero: false,
|
|
|
|
lineStyle: {
|
|
|
|
color: colors[0]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
axisPointer: {
|
|
|
|
label: {
|
|
|
|
formatter: function (params) {
|
|
|
|
return '降水量 ' + params.value
|
|
|
|
+ (params.seriesData.length ? '：' + params.seriesData[0].data : '');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
yAxis: {
|
|
|
|
type: 'value',
|
|
|
|
min: 10,
|
|
|
|
max: 100,
|
|
|
|
splitNumber: 10,
|
|
|
|
|
|
|
|
}
|
|
|
|
],
|
|
|
|
yAxis: [
|
|
|
|
{
|
|
|
|
type: 'value',
|
|
|
|
min:10,
|
|
|
|
max:100,
|
|
|
|
splitNumber: 10,
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
formatter: '{value}'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
series: [
|
|
|
|
{
|
|
|
|
name: '平均',
|
|
|
|
type: 'line',
|
|
|
|
xAxisIndex: 1,
|
|
|
|
smooth: true,
|
|
|
|
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 86.6, 96.2, 48.7, 18.8, 6.0, 2.3]
|
|
|
|
},
|
|
|
|
series: [{
|
|
|
|
name: '每月',
|
|
|
|
type: 'line',
|
|
|
|
color: '#FF5345',
|
|
|
|
data: [11, 11, 15, 13, 12, 13, 10],
|
|
|
|
markPoint: {
|
|
|
|
data: [{
|
|
|
|
type: 'max',
|
|
|
|
name: '最大值'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'min',
|
|
|
|
name: '最小值'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
markLine: {
|
|
|
|
data: [{
|
|
|
|
type: 'average',
|
|
|
|
name: '平均值'
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: '平均',
|
|
|
|
type: 'line',
|
|
|
|
color: '#6497F5',
|
|
|
|
data: [78, 18, 44, 33, 25, 45, 67],
|
|
|
|
markPoint: {
|
|
|
|
data: [{
|
|
|
|
name: '周最低',
|
|
|
|
value: 10,
|
|
|
|
xAxis: 1,
|
|
|
|
yAxis: 10
|
|
|
|
}]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: '每月',
|
|
|
|
type: 'line',
|
|
|
|
smooth: true,
|
|
|
|
data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 31.6, 46.6, 55.4, 18.4, 10.3, 0.7]
|
|
|
|
markLine: {
|
|
|
|
data: [{
|
|
|
|
type: 'average',
|
|
|
|
name: '平均值'
|
|
|
|
},
|
|
|
|
[{
|
|
|
|
symbol: 'none',
|
|
|
|
x: '90%',
|
|
|
|
yAxis: 'max'
|
|
|
|
}, {
|
|
|
|
symbol: 'circle',
|
|
|
|
label: {
|
|
|
|
normal: {
|
|
|
|
position: 'start',
|
|
|
|
formatter: '最大值'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
type: 'max',
|
|
|
|
name: '最高点'
|
|
|
|
}]
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
chart.setOption(option);
|
|
|
|
return chart;
|
|
|
|
}
|
|
|
|
|
|
|
|
Page({
|
|
|
|
|
|
|
|
onShareAppMessage: function (res) {
|
|
|
|
return {
|
|
|
|
title: 'ECharts 可以在微信小程序中使用啦！',
|
|
|
|
path: '/pages/index/index',
|
|
|
|
path: '',
|
|
|
|
success: function () { },
|
|
|
|
fail: function () { }
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 页面的初始数据
|
|
|
|
*/
|
|
|
|
data: {
|
|
|
|
ec: {
|
|
|
|
onInit: initChart
|
|
|
|
state: 1,
|
|
|
|
timestate: 1,
|
|
|
|
ec1: {
|
|
|
|
onInit: initChart1,
|
|
|
|
},
|
|
|
|
statedate: '',
|
|
|
|
showdate: "",
|
|
|
|
watertime: '',
|
|
|
|
timesel: 1,
|
|
|
|
timearr: [
|
|
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
date: '',
|
|
|
|
datePickerValue: ['', '', ''],
|
|
|
|
datePickerIsShow: false,
|
|
|
|
datechu: false,
|
|
|
|
currentdate: true,
|
|
|
|
//开始日期
|
|
|
|
startdate: '',
|
|
|
|
//结束日期
|
|
|
|
enddate: '',
|
|
|
|
|
|
|
|
// 车辆状况日期
|
|
|
|
showModal: false,
|
|
|
|
monthList: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
|
|
|
time: '',
|
|
|
|
year: ''
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面加载
|
|
|
|
*/
|
|
|
|
onLoad: function (options) {
|
|
|
|
this.setData({
|
|
|
|
statedate: app.monthnowDate(),
|
|
|
|
watertime: app.newnowDate() + '-' + app.endate(),
|
|
|
|
startdate: app.newnowDate(),
|
|
|
|
enddate: app.endate()
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//默认车辆状况日期
|
|
|
|
var date = new Date();
|
|
|
|
var month = date.getMonth() + 1;
|
|
|
|
var year = date.getFullYear();
|
|
|
|
this.setData({
|
|
|
|
showdate: year + '年' + month + '月'
|
|
|
|
})
|
|
|
|
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
|
|
|
|
if (month < 10) {
|
|
|
|
this.setData({
|
|
|
|
time: "（" + year + "." + "0" + month + ".01" + "-2019." + '0' + month + ".31" + "）"
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
this.setData({
|
|
|
|
time: "（" + year + "." + month + ".01" + "-2019." + month + ".31" + "）"
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
} else {
|
|
|
|
if (month < 10) {
|
|
|
|
this.setData({
|
|
|
|
time: "（" + year + "." + "0" + month + ".01" + "-2019." + '0' + month + ".30" + "）"
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
this.setData({
|
|
|
|
time: "（" + year + "." + month + ".01" + "-2019." + month + ".30" + "）"
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
//车辆状况日期
|
|
|
|
choice(e) {
|
|
|
|
|
|
|
|
//默认显示当前月份
|
|
|
|
|
|
|
|
|
|
|
|
this.setData({
|
|
|
|
showt: false
|
|
|
|
})
|
|
|
|
|
|
|
|
var date = new Date();
|
|
|
|
|
|
|
|
var year = date.getFullYear()
|
|
|
|
let index = e.currentTarget.dataset.id;
|
|
|
|
index = index + 1
|
|
|
|
if (index == 1 || index == 3 || index == 5 || index == 7 || index == 8 || index == 10 || index == 12) {
|
|
|
|
if (month < 10) {
|
|
|
|
this.setData({
|
|
|
|
time: "（" + year + "." + "0" + index + ".01" + "-2019." + '0' + index + ".31" + "）"
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
this.setData({
|
|
|
|
time: "（" + year + "." + index + ".01" + "-2019." + index + ".31" + "）"
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
} else {
|
|
|
|
if (index < 10) {
|
|
|
|
this.setData({
|
|
|
|
time: "（" + year + "." + "0" + index + ".01" + "-2019." + '0' + index + ".30" + "）"
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
this.setData({
|
|
|
|
time: "（" + year + "." + index + ".01" + "-2019." + index + ".30" + "）"
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
this.setData({
|
|
|
|
changeColor: index - 1,
|
|
|
|
showdate: year + '年' + index + '月'
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
three() {
|
|
|
|
this.setData({
|
|
|
|
time: '近30天',
|
|
|
|
showt: !this.data.showt,
|
|
|
|
changeColor: -1
|
|
|
|
})
|
|
|
|
},
|
|
|
|
toShowModal(e) {
|
|
|
|
this.setData({
|
|
|
|
showModal: true
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
var date = new Date();
|
|
|
|
|
|
|
|
var mon = date.getMonth();
|
|
|
|
console.log(mon)
|
|
|
|
this.setData({
|
|
|
|
changeColor: mon
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
hideModal() {
|
|
|
|
this.setData({
|
|
|
|
showModal: false
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
showDatePicker: function (e) {
|
|
|
|
// this.data.datePicker.show(this);
|
|
|
|
this.setData({
|
|
|
|
datePickerIsShow: true,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
datePickerOnSureClick: function (e) {
|
|
|
|
console.log('datePickerOnSureClick');
|
|
|
|
|
|
|
|
if (this.data.timesel == 1) {
|
|
|
|
console.log(e);
|
|
|
|
this.setData({
|
|
|
|
date: `${e.detail.value[0]}年${e.detail.value[1]}月${e.detail.value[2]}日`,
|
|
|
|
datePickerValue: e.detail.value,
|
|
|
|
datePickerIsShow: false,
|
|
|
|
currentdate: false,
|
|
|
|
|
|
|
|
startdate: e.detail.value[0] + '.' + e.detail.value[1] + "." + e.detail.value[2]
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
console.log(e);
|
|
|
|
this.setData({
|
|
|
|
date: `${e.detail.value[0]}年${e.detail.value[1]}月${e.detail.value[2]}日`,
|
|
|
|
datePickerValue: e.detail.value,
|
|
|
|
datePickerIsShow: false,
|
|
|
|
currentdate: false,
|
|
|
|
|
|
|
|
enddate: e.detail.value[0] + '.' + e.detail.value[1] + "." + e.detail.value[2]
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
datePickerOnCancelClick: function (event) {
|
|
|
|
console.log('datePickerOnCancelClick');
|
|
|
|
console.log(event);
|
|
|
|
this.setData({
|
|
|
|
datePickerIsShow: false,
|
|
|
|
|
|
|
|
currentdate: false,
|
|
|
|
|
|
|
|
});
|
|
|
|
},
|
|
|
|
changedate(e) {
|
|
|
|
console.log(e)
|
|
|
|
},
|
|
|
|
// 选择设备切换
|
|
|
|
selectshebei(e) {
|
|
|
|
this.setData({
|
|
|
|
state: e.currentTarget.dataset.id,
|
|
|
|
|
|
|
|
})
|
|
|
|
// if (e.currentdate.dataset.id == 1) {
|
|
|
|
// this.setData({
|
|
|
|
// ec1: {
|
|
|
|
// onInit: initChart1,
|
|
|
|
// },
|
|
|
|
// })
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
|
|
|
|
// 显示日期
|
|
|
|
datexianshi() {
|
|
|
|
this.setData({
|
|
|
|
datechu: true,
|
|
|
|
currentdate: true
|
|
|
|
})
|
|
|
|
|
|
|
|
//获取年
|
|
|
|
var date = new Date();
|
|
|
|
var obj = {}
|
|
|
|
var year = date.getFullYear();
|
|
|
|
var month = date.getMonth() + 1;
|
|
|
|
if (month < 10) {
|
|
|
|
month = '0' + month
|
|
|
|
}
|
|
|
|
|
|
|
|
var day = date.getDate();
|
|
|
|
if (day < 10) {
|
|
|
|
day = "0" + day
|
|
|
|
}
|
|
|
|
console.log()
|
|
|
|
if (typeof (day) == 'number') {
|
|
|
|
day = day.toString()
|
|
|
|
}
|
|
|
|
console.log(typeof (day))
|
|
|
|
this.setData({
|
|
|
|
datePickerValue: [year, month, day],
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 选择时间和摄像头切换
|
|
|
|
seltime(e) {
|
|
|
|
this.setData({
|
|
|
|
timestate: e.currentTarget.dataset.id
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
//开始时间和结束时间切换
|
|
|
|
xuanshijan(e) {
|
|
|
|
this.setData({
|
|
|
|
timesel: e.currentTarget.dataset.time,
|
|
|
|
currentdate: true
|
|
|
|
})
|
|
|
|
|
|
|
|
this.datexianshi()
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//确定选择开始日期和结束日期
|
|
|
|
qudingxuandate() {
|
|
|
|
this.setData({
|
|
|
|
datechu: false,
|
|
|
|
watertime: this.data.startdate + '-' + this.data.enddate
|
|
|
|
})
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
|
*/
|
|
|
|
onReady: function () {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面显示
|
|
|
|
*/
|
|
|
|
onShow: function () {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面隐藏
|
|
|
|
*/
|
|
|
|
onHide: function () {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面卸载
|
|
|
|
*/
|
|
|
|
onUnload: function () {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
|
|
*/
|
|
|
|
onPullDownRefresh: function () {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
onReady() { }
|
|
|
|
}); |
|
|
\ No newline at end of file |
|
|
|
/**
|
|
|
|
* 页面上拉触底事件的处理函数
|
|
|
|
*/
|
|
|
|
onReachBottom: function () {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 用户点击右上角分享
|
|
|
|
*/
|
|
|
|
onShareAppMessage: function () {
|
|
|
|
|
|
|
|
}
|
|
|
|
}) |
|
|
\ No newline at end of file |
...
|
...
|
|
.png){kind=link}
.png)
.png){kind=link}
.png)
.png){kind=link}
.png)
.png){kind=link}
.png)
.png){kind=link}
.png)
.png){kind=link}
.png)
.png){kind=link}
.png)
.png){kind=link}
.png)