siyu_app/pages_watch/components/echart/bpChart.vue

<template>
	<!-- 血压趋势 -->
	<view class="box" :style="boxstyle">
		<view class="box-title">
			<view class="box-title-left">血压趋势</view>
		</view>
		<view class="ytitle" v-show="!loading && !isEmpty">单位：mmhg</view>
		<view class="echartbox">
			<qiun-data-charts v-show="!isEmpty" type="area" :opts="opts" :chartData="chartData" tooltipFormat="bpTooltip" />
			<myEmpty v-show="isEmpty" style="padding: 40rpx 0 0 0;"></myEmpty>
		</view>
		<view class="legend" v-if="!loading && !isEmpty">
			<view class="legend-item">
				<view class="legend-dot" style="background-color: #FF7700;"></view><text>收缩压90-140mmHg</text>
			</view>
			<view class="legend-item">
				<view class="legend-dot" style="background-color: #0065F7;"></view><text>舒张压60-90mmHg</text>
			</view>
		</view>
	</view>
</template>

<script>
	import myEmpty from "@/pages_watch/components/myEmpty/myEmpty.vue";
	export default {
		name: "bpChart",
		props: {
			loading: {
				type: Boolean,
				default: false
			},
			boxstyle: {
				type: Object,
				default: ()=>{}
			}
		},
		components: {
			myEmpty
		},
		data() {
			return {
				isEmpty: true,
				chartData: {},
				opts: {
					padding: [25, 0, 0, 0],
					enableScroll: false,
					dataLabel: false,
					dataPointShapeType: "hollow",
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						fontSize: 12,
						axisLine: false,
						fontColor: '#ccc',
						labelCount: 7,
						format: "formatterTime",
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							fontColor: '#ccc',
							min: 0,
							axisLine: false,
							fontSize: 12,
						}]
					},
					extra: {
						tooltip: {
							gridType: "dash",
							showArrow: false,
							legendShow: true,
							legendShape: "circle"
						},
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "solid"
						}
					}
				}
			}
		},
		methods: {
			setChartData(data) {
				if (data && data.length>0) {
					this.isEmpty = false
					let chartData = {
						categories: data.map(item => item.createTime),
						series: [{
							name: "收缩压",
							color: "#FF7700",
							data: data.map(item => item.sbp)
						}, {
							name: "舒张压",
							color: "#0065F7",
							data: data.map(item => item.dbp)
						}]
					}
					this.chartData = JSON.parse(JSON.stringify(chartData));
				} else {
					this.isEmpty = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.box {
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		&-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #757575;
			@include u-flex(row, center, space-between);

			&-left {
				font-weight: 500;
				font-size: 36rpx;
				color: #222222;
				line-height: 42rpx;
			}

			&-right {
				@include u-flex(row, center, flex-start);

				image {
					height: 48rpx;
					width: 48rpx;
				}
			}
		}
		.ytitle {
			margin-top: 10rpx;
			line-height: 34rpx;
			margin-bottom: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
		.echartbox {
			height: 466rpx;
			width: 100%;
		}
		
		.legend {
			height: 34rpx;
			margin-top: 44rpx;
			@include u-flex(row, center, space-between);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #757575;
		
			&-item {
				flex: 1;
				text-align: center;
				@include u-flex(row, center, center);
			}
		
			&-dot {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				margin: 16rpx;
			}
		}
	}
</style>