newcpms/ui/src/views/monitor/elecNew/echart/analysisChart/analysisChartBottomLeft3.vue

<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 {
    props: ['dashboarddata'],
    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');
            const dateArray = [];
            const wasteArray = [];
            const rainArray = [];
            let data = this.dashboarddata.latest7DayData;
            for (let i = 0; i < data.length; i++) {
              dateArray[i]=  data[i].pullDate.toString().substr(5, 5);
              wasteArray[i] = data[i].wastePh;
              rainArray[i] = data[i].rainPh;
            }
            dateArray.reverse();
            wasteArray.reverse();
            rainArray.reverse();
            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: [
                    //   this.c[0].pullDate.toString().substr(5, 5),
                    //   this.dashboarddata.latest7DayData[1].pullDate.toString().substr(5, 5),
                    //   this.dashboarddata.latest7DayData[2].pullDate.toString().substr(5, 5),
                    //   this.dashboarddata.latest7DayData[3].pullDate.toString().substr(5, 5),
                    //   this.dashboarddata.latest7DayData[4].pullDate.toString().substr(5, 5),
                    //   this.dashboarddata.latest7DayData[5].pullDate.toString().substr(5, 5),
                    //   this.dashboarddata.latest7DayData[6].pullDate.toString().substr(5, 5)
                    // ],
                    data: dateArray,
                    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: [
                        //   this.dashboarddata.latest7DayData[0].wastePh,
                        //   this.dashboarddata.latest7DayData[1].wastePh,
                        //   this.dashboarddata.latest7DayData[2].wastePh,
                        //   this.dashboarddata.latest7DayData[3].wastePh,
                        //   this.dashboarddata.latest7DayData[4].wastePh,
                        //   this.dashboarddata.latest7DayData[5].wastePh,
                        //   this.dashboarddata.latest7DayData[6].wastePh
                        // ],
                        data: wasteArray,
                        symbolSize: 10,
                        color: '#5470c6',
                        lineStyle: {
                            width: 4,
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: '#fff',
                        }
                    },
                    {
                        name: 'Rain Water',
                        type: 'line',
                        smooth: true,
                        // data: [
                        //   this.dashboarddata.latest7DayData[0].rainPh,
                        //   this.dashboarddata.latest7DayData[1].rainPh,
                        //   this.dashboarddata.latest7DayData[2].rainPh,
                        //   this.dashboarddata.latest7DayData[3].rainPh,
                        //   this.dashboarddata.latest7DayData[4].rainPh,
                        //   this.dashboarddata.latest7DayData[5].rainPh,
                        //   this.dashboarddata.latest7DayData[6].rainPh
                        // ],
                        data: rainArray,
                        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"));
            const dateArray = [];
            const wasteArray = [];
            const rainArray = [];
            let data = this.dashboarddata.latest7DayData;
            for (let i = 0; i < data.length; i++) {
              dateArray[i]=  data[i].pullDate.toString().substr(5, 5);
              wasteArray[i] = data[i].wastePh;
              rainArray[i] = data[i].rainPh;
            }
            dateArray.reverse();
            wasteArray.reverse();
            rainArray.reverse();
            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: [
                    //   this.dashboarddata.latest7DayData[0].pullDate.toString().substr(5, 5),
                    //   this.dashboarddata.latest7DayData[1].pullDate.toString().substr(5, 5),
                    //   this.dashboarddata.latest7DayData[2].pullDate.toString().substr(5, 5),
                    //   this.dashboarddata.latest7DayData[3].pullDate.toString().substr(5, 5),
                    //   this.dashboarddata.latest7DayData[4].pullDate.toString().substr(5, 5),
                    //   this.dashboarddata.latest7DayData[5].pullDate.toString().substr(5, 5),
                    //   this.dashboarddata.latest7DayData[6].pullDate.toString().substr(5, 5)
                    // ],
                    data: dateArray,
                    axisLabel: {
                        color: '#808080'
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#808080'
                    }
                },
                series: [
                    {
                        name: 'Waste Water',
                        type: 'line',
                        smooth: true,
                        // data: [
                        //   this.dashboarddata.latest7DayData[0].wastePh,
                        //   this.dashboarddata.latest7DayData[1].wastePh,
                        //   this.dashboarddata.latest7DayData[2].wastePh,
                        //   this.dashboarddata.latest7DayData[3].wastePh,
                        //   this.dashboarddata.latest7DayData[4].wastePh,
                        //   this.dashboarddata.latest7DayData[5].wastePh,
                        //   this.dashboarddata.latest7DayData[6].wastePh
                        // ],
                        data: wasteArray,
                        symbolSize: 10,
                        color: '#5470c6',
                        lineStyle: {
                            width: 4,
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: '#fff',
                        }
                    },
                    {
                        name: 'Rain Water',
                        type: 'line',
                        smooth: true,
                        // data: [
                        //   this.dashboarddata.latest7DayData[0].rainPh,
                        //   this.dashboarddata.latest7DayData[1].rainPh,
                        //   this.dashboarddata.latest7DayData[2].rainPh,
                        //   this.dashboarddata.latest7DayData[3].rainPh,
                        //   this.dashboarddata.latest7DayData[4].rainPh,
                        //   this.dashboarddata.latest7DayData[5].rainPh,
                        //   this.dashboarddata.latest7DayData[6].rainPh
                        // ],
                        data: rainArray,
                        symbolSize: 10,
                        color: '#73c0de',
                        lineStyle: {
                            width: 4,
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: '#fff',
                        }
                    },
                ]
                };
            this.chart2.setOption(option);
        }
    },
    destroyed() {
        window.onresize = null;
    }
}
</script>

<style>

</style>