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

<template>
	<view class="chartwarp">
		<qiun-title-bar title="基本曲线图(自定义图表类型)" />
		<view class="charts-box">
			<!-- 这里的type="demotype"演示了自定义图表类型的demo，您可以根据需求自己定义一种额外的图表类型 -->
			<!-- <qiun-data-charts type="demotype" :opts="{xAxis:{boundaryGap:'justify'}}" :chartData="chartsDataLine2" /> -->
			<!-- 如果不定义"demotype"这个图表类型，可以通过传递opts来覆盖line下的默认配置，如下 -->
			 <qiun-data-charts 
			      type="line"
			      :opts="opts"
			      :chartData="chartData"
			    />
			<!-- <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:40,
						  max:100,
					  }]
					  
					},
					extra: {
					  line: {
						type: "curve",
						width: 2,
						activeType: "hollow"
					  }
					}
				}
			}
		},

		onReady() {
			//模拟从服务器获取数据
			this.getServerData()
			// console.log('mmmmmm',this.record);
		},
		methods: {
			getServerData (){
				var x_xAis = []
				var dry_weight=[]
				var weight_after = []
				var weight_before = []
				for(let i=0;i<this.record.length;i++){
					x_xAis.push(this.record[i].assessment_date)
					dry_weight.push(this.record[i].dry_weight)
					weight_after.push(this.record[i].weight_after)
					weight_before.push(this.record[i].weight_before) 
				}
				// console.log('vvvvv',x_xAis);
				setTimeout (()=>{
					let res = {
					// categories: ["2018","2019","2020","2021","2022","2023"],
					categories: x_xAis,
					series: [
					  {
						name: "干体重",
						// lineType: "dash",
						// data: [35,8,25,37,4,20],
						data:dry_weight,
					  },
					  {
						name: "透后体重",
						// data: [70,40,65,100,44,68],
						data: weight_after,
					  },
					  {
						name: "透前体重",
						// data: [70,40,65,0,44,68],
						data: weight_before
					  }
					]
				  };
				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>