screenFront/src/views/Waterhouse/index.vue

<template>
    <div :class="$style['container']">
        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="`南门水房物联监测系统`" :titleTip="[]" :typeFun="['time']"
            :alarmType="['']"></header2>
        <div class="main">
            <!-- <el-image style="height: 400px" :src="imgUrl" fit="scale-down" />
            <div class="mainChart" ref="mainChart">

            </div> -->
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, onUnmounted, reactive, ref, getCurrentInstance } from "vue";
import header2 from "@/components/headerBox/header2.vue";
let imgUrl = require('@/assets/img/water_room.png')
const { proxy } = getCurrentInstance() as any
const mainChart = ref(null)
let chart = null
const colors = ['#5470C6', '#91CC75', '#EE6666'];
function init() {
    chart = proxy.$echarts.init(mainChart.value,'dark');
    let option = {
        title: {
            text: '水房数据大屏',
        },
        color: colors,
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['进水量', '出水量', '用电量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
        },
        yAxis: [
            {
                type: 'value',
                name: '水量',
            },
            {
                type: 'value',
                name: '电量',
                position: 'right',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[2]
                    }
                },
            }
        ],
        series: [
            {
                name: '进水量',
                type: 'line',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '出水量',
                type: 'line',
                yAxisIndex: 0,
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '用电量',
                type: 'line',
                yAxisIndex: 1,
                data: [150, 232, 201, 154, 190, 330, 1000]
            }
        ]
    };
    chart.setOption(option);
}
onMounted(() => {
    //init()
})
</script>
<style module>
.container {
    height: 1080px;
    width: 1920px;
    color: #20aec5;
    background-color: #100c2a;
    box-sizing: border-box;
    overflow: hidden;
}
</style>
<style scoped>
.main {
    width: 100%;
    height: 980px;
    background: url('/src/assets/img/water_house_bg.jpg') no-repeat;
}

.mainChart {
    width: 100%;
    height: 580px;
}
</style>