Vue_New/src/xt_pages/Dialysisanalysis/hemoglobin/hemoglobinalone.vue

<template>
    <div>
       <div class="content_top">
            <el-autocomplete
            class="inline-input"
            v-model="inputValue"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            placeholder="请输入患者名字或透析号"
            @select="handleSubmit"
            ></el-autocomplete>
            <div>
                <span>查询时间:</span>
                <el-date-picker
                v-model="stat_time"
                type="date"
                placeholder="选择日期">
                </el-date-picker>
                <span>-</span>
                <el-date-picker
                v-model="end_time"
                type="date"
                placeholder="选择日期">
                </el-date-picker>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary">查询</el-button>
            </div>
            <div>
                <el-button type="primary">打印</el-button>
                <el-button type="primary">导出</el-button>
            </div>
       </div>
       <div style="margin: 20px 0px;">
        <h2 >患者列表</h2>
       </div>
       <div >
        <el-row :gutter="20">
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <!-- <span style="font-size: 18px;font-weight: bold;display: block;">患者列表</span> -->
                <!-- <h2>患者列表</h2> -->
                <el-table
                :data="tableData"
                border
                style="width: 100%">
                    <el-table-column
                        align="center"
                        prop="date"
                        label="透析号"
                       >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="name"
                        label="姓名"
                        >
                    </el-table-column>
                </el-table>
              </div>
            </el-col>
            <el-col :span="19">
               <div class="grid-content bg-purple">
                <div class="echart" id="germychart" style="width:100%;height:400px"></div>
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    border
                    align="center"
                    max-height="250">
                    <el-table-column
                    fixed
                    prop="date"
                    label="姓名"
                   >
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="检查日期"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="province"
                    label="血红蛋白（g/L）"
                    >
                    </el-table-column>
                    
                </el-table>
               </div>
           </el-col>
        </el-row>
       </div>

    </div>
</template>
<script>
  import * as echarts from 'echarts'
export default{
    // props: {
    //     width: {
    //         type: String,
    //         default: "100%"
    //     },
    //     height: {
    //         type: String,
    //         default: "400px"
    //     },
    
    // },
    data() {
        return {
            inputValue:'',
            stat_time:'',
            end_time:'',
            value:'',
            myChart: {},
            xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
            opinionData: [23, 24, 18, 25, 27, 28, 25], //人数数据
            // myChartStyle: { float: "left", width: "100%", height: "400px" },//图表样式
            tableData:[],
        }
    },
    created(){
        
    },
    mounted() {
        // this.$nextTick(function() {
            this.initEcharts();
		// })  
        // this.myChart = echarts.init(document.getElementById("germychart"));
        //     this.myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                this.myChart.resize();
            });
    },
    methods:{
        handleSubmit(){
            console.log('asdfa');
        },
        initEcharts() {
            const option = {
                xAxis: {
                    type: 'category',
                        boundaryGap:true,
                        axisTick:{
                            alignWithLabel:true //保证刻度线和标签对齐
                        },
                    data: this.xData,
                    splitNumber:this.xData.length, //纵坐标数
                    interval:this.xData //强制设置坐标轴分割间隔
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: true,
                    splitNumber:4, //纵坐标数
                    interval:10 //强制设置坐标轴分割间隔
                },
                legend: {
                    show: true,
                    align:'left',//文字在前图标在后
                    left:'15%',
                    top:'5%',
                    data: [{name:'血红蛋白g/L'}]
                },
                series: [
                {
                    data: this.opinionData,
                    name:'血红蛋白g/L',
                    type: "line",// 类型设置为折线图
                    symbol: 'circle',
                    itemStyle: {
                        normal: {
                            color: '#409eff', //改变折线点的颜色#a80000
                            lineStyle: {
                                color: '#409eff' //改变折线颜色
                            }
                        }
                    },

                },
                
                ],
                
            };
            this.myChart = echarts.init(document.getElementById("germychart"));
            this.myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                this.myChart.resize();
            });
        },
    },
    
}
</script>
<style lang="scss" scoped>
.content_top{
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}
</style>