111 lines
2.8 KiB
Vue
111 lines
2.8 KiB
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;
|
|
}
|
|
|
|
.mainChart {
|
|
width: 100%;
|
|
height: 580px;
|
|
}
|
|
</style>
|