|
@@ -0,0 +1,176 @@
|
|
|
+<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>
|