<template>
    <div>
        <el-dialog :title="this.title + '月各取水点统计'" width="60%" top="8vh" :before-close="handleClose"
            :visible.sync="showFormDias">
            <div id="echartsBox" style="width: 100%; height: 400px" ref="box"></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleClose">退 出</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import waterStatistical from '@/api/monitor/otherMonitor/waterStatistical.js'
export default {
    name: 'MonthWaterPoint',
    data() {
        return {
            showFormDias: false,
            title: '',
            parmas: {
                subTime: "",
                type: "yyyy-MM"

            },
            monthEchart: null,
            monthList: []
        }

    },
    created() {
    },
    mounted() {
        this.monthEcharts()
    },
    methods: {
        handleOpen(moth) {
            this.showFormDias = true
            this.title = moth
            this.parmas.subTime = moth
            this.getData()
        },
        handleClose() {
            this.showFormDias = false
            this.title = ""
        },
        getData() {
            waterStatistical.stationStatisticsSub(this.parmas, res => {
                if (res.state) {
                    // console.log(res.value);
                    this.monthList = res.value
                    this.$nextTick(() => {
                        this.monthEcharts()
                    })
                }
            })
        },
        monthEcharts() {
            let times = []
            let yNum = []
            this.monthList.forEach(e => {
                times.push(e.x)
                yNum.push(e.y)
            })
            if (this.monthEchart != null && this.monthEchart != "" && this.monthEchart != undefined) {
                this.monthEchart.dispose();//销毁
            }
            // let chartDom = document.getElementById('echartsBox')
            this.monthEchart = echarts.init(this.$refs.box)
            let option = {
                grid: {
                    top: 30,
                },
                xAxis: {
                    type: 'category',
                    data: times
                },
                yAxis: {
                    name: '万m³',
                    type: 'value'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                series: [{
                    data: yNum,
                    type: 'bar'
                }]
            };
            option && this.monthEchart.setOption(option)
        },
    }
}
</script>
<style lang="scss" scoped>
</style>