shenweishi/subpackagesA/pages/PhysicalSigns/component/bloodpressLine.vue

<template>
	<view class="chartwarp">
		<qiun-title-bar title="基本曲线图(自定义图表类型)" />
		<view class="charts-box">
			<!-- 这里的type="demotype"演示了自定义图表类型的demo，您可以根据需求自己定义一种额外的图表类型 -->
			<qiun-data-charts
			     type="line"
			     :opts="opts"
			     :chartData="chartData"
			   />
			<!-- 如果不定义"demotype"这个图表类型，可以通过传递opts来覆盖line下的默认配置，如下 -->
			<!-- <qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}" :chartData="chartsData.Line2"/> -->
		</view>


	</view>
</template>

<script>
	//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
	import demodata from '@/mockdata/demodata.json';
	import mapdata from '@/mockdata/mapdata.json';
	export default {
		props: {
			record: Array
		},
		data() {
			return {
				chartData:{},
				chartsDataLine2: {},
				searchVal: '',
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				opts: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,10,0,15],
					enableScroll: false,
					legend: {},
					xAxis: {
					  disableGrid: true
					},
					yAxis: {
					  disabled:false,
					  gridType: "dash",
					  dashLength: 10,
					  gridColor:'#ff0000',
					  data:[{
						  min:0,
						  max:200,
					  }]
					  
					},
					extra: {
					  line: {
						type: "curve",
						width: 2,
						activeType: "hollow"
					  }
					}
				}
			}
		},

		onReady() {
			//模拟从服务器获取数据
			this.getServerData()
			console.log('bbbb',this.record)
		},
		methods: {
			getServerData() {
				var x_xAis = []
				var diastolic_before=[]
				var systolic_before = []
				var diastolic_after = []
				var systolic_after = []
				for(let i=0;i<this.record.length;i++){
					x_xAis.push(this.record[i].assessment_date)
					diastolic_before.push(this.record[i].diastolic_blood_pressure_before)
					systolic_before.push(this.record[i].systolic_blood_pressure_before)
					diastolic_after.push(this.record[i].diastolic_blood_pressure_after) 
					systolic_after.push(this.record[i].systolic_blood_pressure_after) 
				}
				console.log('vvvvv',x_xAis);
				setTimeout (()=>{
					let res = {
					categories: x_xAis,
					series: [
					  {
						name: "透前收缩压",
						// lineType: "dash",
						data:diastolic_before,
					  },
					  {
						name: "透前舒张压",
						data: systolic_before,
					  },
					  {
						name: "透后收缩压",
						data: diastolic_after
					  },
					  {
						name: "透后舒张压",
						data: systolic_after
					  }
					]
				  };
				  this.chartData = JSON.parse(JSON.stringify(res));
				}, 1500);
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #f3f3f9;
	}

	.chartwarp {
		margin-top: 30rpx;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>