jp-xpgj-GA-file/src/projects/pension/views/Master/Health/ChartStep.vue

<template>
	<div>
		<common ref="common" @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content vongi-yjcsdat">
			<div class="mui-content-padded">
				<h2>{{pageTitle}}趋势图</h2>
				<div id="linePicture" style="width:100%;height: 300px;">

				</div>
			</div>
			<h4 class="colorfe616c">测量仅供参考，不作为临床诊断使用</h4>
		</div>
	</div>
</template>

<script>
	import * as API_Health from '@/apis/Master/health'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import NavMenu from '@/components/NavMenu.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import echarts from 'echarts/lib/echarts'
	import 'echarts/lib/chart/line'
	import 'echarts/lib/component/legend'
	import 'echarts/lib/component/title'
	import 'echarts/lib/component/tooltip'
	export default {
		name: 'MasterHealthChartStep',
		components: {
			Common,
			Loading,
			TopHeader,
			NavMenu
		},
		data() {
			return {
				isLoading: false,

				pageTitle: this.$route.query.title,

				listForm: {
					names: this.$route.query.type,
				},

				typeList: '',

				chartsList: [],
			}
		},
		created() {
			this.typeList = this.$route.query.type.split(',');
		},
		methods: {
			//获取图表数据
			getChartList() {
				this.isLoading = true;
				API_Health.getChartList(this.listForm).then(response => {
					this.isLoading = false;
					this.chartsList = response;

					this.setEcharts();
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//设置echart数据
			setEcharts() {
				var legendData = [];
				var xAxisData = [];
				var series = [];
				for (var i = 0; i < this.typeList.length; i++) {
					var seriesData = [];
					legendData.push(this.chartsList[this.typeList[i]].name);
					var list = this.chartsList[this.typeList[i]].list;
					for (var j = 0; j < list.length; j++) {
						if (i == 0) {
							xAxisData.push(list[j].recordTime);
						}
						seriesData.push(list[j].value);
					}
					series.push({
						name: this.chartsList[this.typeList[i]].name,
						type: 'line',
						stack: '',
						data: seriesData
					});
				}
				this.echarts(legendData, xAxisData, series);
			},
			//显示图表
			echarts(legendData, xAxisData, series) {
				this.$nextTick(() => {

					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('linePicture'));
					// 指定图表的配置项和数据
					var option = {
						tooltip: {
							trigger: 'axis',
						},
						legend: {
							data: legendData,
							orient: 'horizontal',
							x: 'center',
							y: 'bottom',
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '10%',
							x: 40,
							x2: 30,
							y: 20,
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: xAxisData,
							axisLabel: {
								interval: 0,
								rotate: 80
							}
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								interval: 0,
								rotate: 40
							}
						},
						series: series
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
					/* myChart.resize({
						height: rHeight + 'px'
					}) */
				});
			},
			asynCallBack() {},
		},
		mounted() {
			//获取图表数据
			this.getChartList();
		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				menu_list: 'menu_list',
				common_menu_list: 'common_menu_list',
				persion_home_model: 'persion_home_model'
			})
		}
	}
</script>

<style scoped src="$project/assets/css/pension.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>