examTeamApp/pages/charts/charts.vue

<template>
	<view class="TrendPage">
		<view class="listC">
			<view @click="active=1" :class="[active==1?'active':'']">当天</view>
			<view @click="active=2" :class="[active==2?'active':'']">月度</view>
			<view @click="active=3" :class="[active==3?'active':'']">年度</view>
		</view>
		<!-- 时间选择 -->
		<view class="boxTime">
			<picker mode="date" class="f-l" :value="startDate" @change="handStartTimeH">
				<view class="uni-input">{{startDate}}
					<uni-icons type="right"></uni-icons>
				</view>
			</picker>
		</view>
		<!-- 曲线图 -->
		<view class="box">
			<view class="blockC" v-for="(item,index) in weightList">
				<view>
					<qiunDataCharts type="area" :chartData="item.Line" :canvas2d="true" canvasId="charts09"
						:cHeight="480" :cWidth="680" :animation="false"
						:opts="{enableScroll:true,xAxis:{scrollShow:false,itemCount:3}}" :ontouch="true" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex";
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	export default {
		components: {
			qiunDataCharts,
		},
		computed: {
			...mapState(["user", "Trend"]),
			userInfo: function() {
				return this.user
			},
			endDate() {
				return this.$tools.getDate("start")
			},
			startDate() {
				return this.$tools.GetDateStr(-90);
			},
		},
		mounted() {
			let that = this
			this.active = 1
			// that.getList(this.startDate, this.endDate)
		},
		methods: {
			getList(start, end) {
				console.log("fanhui", start, end)
				let that = this
				that.$model.getTrendList({
					familyid: uni.getStorageSync('familyid'),
					starttime: start,
					endtime: end,
				}).then(res => {
					if (res) {
						for (var i = 0; i < that.weightList.length; i++) {
							that.weightList[i].Line = res[that.weightList[i].key];
						}
						that.showbox(0)
					}
				})
			},
			showbox(index) {
				let that = this
				that.handTrue = false
				this.$nextTick(function() {
					that.handTrue = true
					that.lineData = that.weightList[index].Line
				})
				that.active1 = index
			},
			//开始
			handStartTimeH(e) {
				let that = this
				if (this.endTime) {
					if (Date.parse(e.target.value) > Date.parse(this.endTime)) {
						this.$tools.msg("请选择正确的时间")
						return
					}
				} else {
					if (Date.parse(e.target.value) > Date.parse(this.endDate)) {
						this.$tools.msg("请选择正确的时间")
						return
					}
				}
				this.startTime = e.target.value
				let endtime = that.endTime ? that.endTime : that.endDate
				this.getList(that.startTime, endtime)
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		data() {
			return {
				lineData: null,
				weight: "",
				token: null,
				handTrue: true,
				active: 1,
				weightList: [{
						title: '跳绳个数',
						key: 'weight',
						showCon: false,
						Line: {
							"categories": [],
							"series": [{
								"color": "#fb7b92",
								"name": "体重",
								"data": []
							}]
						},
					},
					{
						title: '跳绳时长',
						key: 'bmi',
						Line: {
							"categories": [],
							"series": [{
								"color": "#6bb0fe",
								"name": "bmi",
								"data": []
							}]
						},
					}, {
						title: '消耗卡路里',
						key: 'muscle',
						showCon: false,
						Line: {
							"categories": [],
							"series": [{
								"color": "#ff9f40",
								"name": "肌肉率",
								"data": []
							}]
						},
					}
				],
			};
		}
	}
</script>

<style lang="scss" scoped>
	.TrendPage {
		padding: 10px 0;
		margin-bottom: 15px;
		border-radius: 10px;
		background-color: #f7f7f7;

		.listC {
			width: 100%;
			padding: 15px;
			display: flex;
			align-items: center;
			justify-content: space-around;

			view {
				position: relative;
			}

			.active:after {
				content: "";
				height: 3px;
				width: 100%;
				position: absolute;
				bottom: -5px;
				left: 0;
				border-radius: 5px;
				background: $maincolor;
			}
		}

		.boxTime {
			width: calc(100% - 20px);
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-radius: 10px;
			padding: 10px;
		}

		.box {
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			border-radius: 10px;
			justify-content: space-between;
		}

		.blockC {
			clear: both;
			width: 100%;
			height: 250px;
			background-color: #fff;
			border-radius: 0 0 10px 10px;
		}

		.info {
			width: 100%;
			display: flex;
			margin-top: 20px;
			justify-content: space-between;

			.item {
				color: #fff;
				width: 47.5%;
				height: 50px;
				background: $maincolor;
				text-align: center;
				border-radius: 10px;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					width: 30px;
					height: 30px;
					border-radius: 50%;
					margin-right: 10px;
					display: inline-block;
					background-color: #fff;
				}
			}
		}

		.data {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			color: #666;
			margin-top: 15px;
			width: 100%;

			.item {
				width: 47.5%;
				text-align: center;
				font-size: 14px;
				line-height: 30px;
				background: #fff;
				padding: 5px 0;
				border-radius: 15px;
				margin-bottom: 15px;
			}

			.val {
				display: flex;
				align-items: center;
				font-size: 20px;
				font-weight: 700;
				justify-content: center;
				color: #666;

				text {
					font-size: 14px;
					font-weight: 500;
					display: block;
					margin-top: 3px;
					margin-left: 3px;
				}
			}

			.name {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999;
			}
		}
	}

	.boxList {
		background-color: #fff;
		border-radius: 10px;

		.list {
			margin: 10px;
		}
	}
</style>