newcpms/ui/src/views/monitor/elec/echart/analysisChart/analysisChartTopLeft.vue

<template>
    <div>
        <div id="analysisChartTopLeft" @click="dialogVisible = true" style="width:6.8rem;height:2.5rem;"></div>
        <el-dialog title="HRSG 1#" :visible.sync="dialogVisible" width="1600px" @open="open" destroy-on-close append-to-body>
            <div id="analysisChartTopLeft2" 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("analysisChartTopLeft"), 'dark');
            let option = {
                backgroundColor: 'transparent',
                title: {
                    text: 'HRSG 1#',
                    textStyle: {
                        fontSize: 18
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['烟尘', 'SO2', 'NOx'],
                    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',
                    name: 'Unit:(mg/m3)',
                    axisLabel: {
                        color: '#808080'
                    },
                    splitLine: {
                        show: true,
                        lineStyle:{
                            color: 'rgba(255,255,255,.7)'
                        }
                }
                },
                series: [
                    {
                        name: '烟尘',
                        type: 'line',
                        smooth: true,
                        data: [80,90,70,20,10,60,50],
                        symbolSize: 10,
                        color: '#FF9800',
                        lineStyle: {
                            width: 3,
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        }
                    },
                    {
                        name: 'SO2',
                        type: 'line',
                        smooth: true,
                        data: [1400,2200,1300,1800,2500,1100,1300],
                        symbolSize: 10,
                        color: '#9D00FF',
                        lineStyle: {
                            width: 3,
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        }
                    },
                    {
                        name: 'NOx',
                        type: 'line',
                        smooth: true,
                        data: [400,200,300,800,500,100,300],
                        symbolSize: 10,
                        color: '#00FF0D',
                        lineStyle: {
                            width: 3,
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        }
                    },
                ]
                };
            this.chart.setOption(option);
        },
        init2() {
            this.chart2 = this.echarts.init(document.getElementById("analysisChartTopLeft2"));
            let option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['烟尘', 'SO2', 'NOx'],
                    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',
                    name: 'Unit:(mg/m3)',
                    axisLabel: {
                        color: '#808080'
                    }
                },
                series: [
                    {
                        name: '烟尘',
                        type: 'line',
                        smooth: true,
                        data: [80,90,70,20,10,60,50],
                        symbolSize: 10,
                        color: '#FF9800',
                        lineStyle: {
                            width: 3,
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        }
                    },
                    {
                        name: 'SO2',
                        type: 'line',
                        smooth: true,
                        data: [1400,2200,1300,1800,2500,1100,1300],
                        symbolSize: 10,
                        color: '#9D00FF',
                        lineStyle: {
                            width: 3,
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        }
                    },
                    {
                        name: 'NOx',
                        type: 'line',
                        smooth: true,
                        data: [400,200,300,800,500,100,300],
                        symbolSize: 10,
                        color: '#00FF0D',
                        lineStyle: {
                            width: 3,
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        }
                    },
                ]
            };
            this.chart2.setOption(option);
        }
    },
    destroyed() {
        window.onresize = null;
    }
}
</script>

<style>

</style>