<template>
    <div>
        <div id="analysisChartBottomLeft3" @click="dialogVisible = true" style="width:3.4rem;height:2.2rem;"></div>
        <el-dialog title="一周 PH 趋势" :visible.sync="dialogVisible" width="1600px" @open="open" destroy-on-close append-to-body>
            <div id="analysisChartBottomLeft33" style="width:20rem;height:6rem;margin:0.5rem auto;"></div>
        </el-dialog>
    </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
    data() {
        return {
            chart: null,
            dialogVisible: false
        }
    },
    mixins: [echartMixins],
    mounted() {
        this.init();
    },
    methods: {
        opnenDialg(){
            this.dialogVisible = true
        },
        open(){
            this.$nextTick(() => {
                this.init2()
            })
        },
        init() {
            this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft3"), 'dark');
            let option = {
                backgroundColor: 'transparent',
                title: {
                    text: '一周 PH 趋势',
                    textStyle: {
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Waste Water', 'Rain Water'],
                    padding: [20, 0, 0, 0]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisLabel: {
                        color: '#808080'
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#808080'
                    },
                    splitLine: {
                        show: true,
                        lineStyle:{
                            color: 'rgba(255,255,255,.7)'
                        }
                    }
                },
                series: [
                    {
                        name: 'Waste Water',
                        type: 'line',
                        smooth: true,
                        data: [120, 132, 101, 134, 150, 230, 210],
                        symbolSize: 10,
                        color: '#5470c6',
                        lineStyle: {
                            width: 4,
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: '#fff',
                        }
                    },
                    {
                        name: 'Rain Water',
                        type: 'line',
                        smooth: true,
                        data: [220, 250, 291, 234, 290, 330, 310],
                        symbolSize: 10,
                        color: '#73c0de',
                        lineStyle: {
                            width: 4,
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: '#fff',
                        }
                    },
                ]
                };
            this.chart.setOption(option);
        },
        init2() {
            this.chart2 = this.echarts.init(document.getElementById("analysisChartBottomLeft33"));
            let option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Waste Water', 'Rain Water'],
                    padding: [30, 0, 0, 0]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisLabel: {
                        color: '#808080'
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#808080'
                    }
                },
                series: [
                    {
                        name: 'Waste Water',
                        type: 'line',
                        smooth: true,
                        data: [120, 132, 101, 134, 150, 230, 210],
                        symbolSize: 10,
                        color: '#5470c6',
                        lineStyle: {
                            width: 4,
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: '#fff',
                        }
                    },
                    {
                        name: 'Rain Water',
                        type: 'line',
                        smooth: true,
                        data: [220, 250, 291, 234, 290, 330, 310],
                        symbolSize: 10,
                        color: '#73c0de',
                        lineStyle: {
                            width: 4,
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: '#fff',
                        }
                    },
                ]
                };
            this.chart2.setOption(option);
        }
    },
    destroyed() {
        window.onresize = null;
    }
}
</script>

<style>

</style>