<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 waterPointContrast from '@/api/monitor/otherMonitor/waterPointContrast.js'
export default {
    name: 'YearWaterPoint',
    data() {
        return {
            showFormDias: false,
            title: '',
            yearList: [],
            parmas: {
                subTime: "",
                type: "yyyy"

            },
            yearEchart: null
        }

    },
    created() {

    },
    mounted() {
        this.yearEcharts()
    },
    methods: {
        handleOpen(year) {
            this.showFormDias = true
            this.title = year
            this.parmas.subTime = year
            this.getData()
        },
        handleClose() {
            this.showFormDias = false
            this.title = ""
        },
        getData() {
            waterPointContrast.stationStatisticsSub(this.parmas, res => {
                if (res.state) {
                    // console.log(res.value);
                    this.yearList = res.value
                    this.$nextTick(() => {
                        this.yearEcharts()
                    })
                }
            })
        },
        yearEcharts() {
            let times = []
           let ANum = []
           let BNum = []
            this.yearList.forEach(e => {
                times.push(e.x)
               ANum.push(e.ychain.last)
               BNum.push(e.ychain.current)
            })
            if (this.yearEchart != null && this.yearEchart != "" && this.yearEchart != undefined) {
                this.yearEchart.dispose();//销毁
            }
            // let chartDom = document.getElementById('echartsBox')
            this.yearEchart = echarts.init(this.$refs.box)
            let option = {
                grid: {
                    top: 30,
                },
                xAxis: {
                    type: 'category',
                    data: times
                },
				legend: {
					show: true,
					data: ['当前', '环比'],
				},
                yAxis: {
                    name: '万m³',
                    type: 'value'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                series: [{
						name: '当前',
						data: BNum,
						type: 'bar',
						color: "#91CC75",
					}, {
						name: '环比',
						data: ANum,
						type: 'bar',
						color: "#FFB938",
					}]
            };
            option && this.yearEchart.setOption(option)
        },
    }
}
</script>
<style lang="scss" scoped>
</style>