229 lines
5.6 KiB
Vue
229 lines
5.6 KiB
Vue
<template>
|
|
<div class="lc-container">
|
|
<div class="title">
|
|
{{ tLang('common', '耗电量') }}
|
|
</div>
|
|
<div class="content">
|
|
<div class="left">
|
|
<v-chart autoresize :option="left_option" theme="dark" style="width: 100%;height: 100%;" />
|
|
</div>
|
|
<div class="right">
|
|
<v-chart :option="line_option" theme="dark" style="width: 100%;height: 100%;" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
|
|
|
|
const prop = defineProps({
|
|
totalElect: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
lineData: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
xAxis: [],
|
|
series: []
|
|
};
|
|
}
|
|
}
|
|
})
|
|
let left_option = computed(() => {
|
|
return {
|
|
backgroundColor: 'transparent',
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
max:500,
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 10,
|
|
color: [
|
|
[0.3, '#67e0e3'],
|
|
[0.7, '#37a2da'],
|
|
[1, '#fd666d']
|
|
]
|
|
}
|
|
},
|
|
pointer: {
|
|
itemStyle: {
|
|
color: 'auto'
|
|
}
|
|
},
|
|
axisTick: {
|
|
distance: -10,
|
|
length: 8,
|
|
lineStyle: {
|
|
color: '#fff',
|
|
width: 2
|
|
}
|
|
},
|
|
splitLine: {
|
|
distance: -10,
|
|
length: 3,
|
|
lineStyle: {
|
|
color: '#fff',
|
|
width: 2
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: 'inherit',
|
|
distance: 25,
|
|
fontSize: 10
|
|
},
|
|
detail: {
|
|
valueAnimation: true,
|
|
formatter: '{value} kw·h',
|
|
color: 'inherit',
|
|
fontSize: 12
|
|
},
|
|
title: {
|
|
color: 'inherit',
|
|
offsetCenter: [0, '100%'],
|
|
fontSize: 16,
|
|
color: '#fff'
|
|
},
|
|
data: [
|
|
{
|
|
value: prop.totalElect,
|
|
name: '总耗电量'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
})
|
|
|
|
let line_option = computed(() => {
|
|
return {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
|
borderColor: '#00c6ff',
|
|
borderWidth: 2,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14
|
|
},
|
|
formatter: function (params) {
|
|
let tooltipText = '';
|
|
let xAxisValue = params[0].name;
|
|
params.forEach((item) => {
|
|
tooltipText += `<div style="padding: 2px 0;"><strong>${item.seriesName}:</strong> ${item.value}</div>`;
|
|
});
|
|
return `${xAxisValue}<br>${tooltipText}`;
|
|
},
|
|
padding: 10,
|
|
extraCssText: 'border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);'
|
|
},
|
|
backgroundColor: 'transparent',
|
|
// legend: {
|
|
// data: ['上月', '本月'],
|
|
// right: 'left',
|
|
// textStyle: {
|
|
// color: '#ffff'
|
|
// }
|
|
// },
|
|
grid: {
|
|
left: '10%',
|
|
bottom:'15%'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: prop.lineData.xAxis,
|
|
axisLabel: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '耗电量(kw·h)',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#3c3a4a85',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: "#ffffff",
|
|
formatter: function (value) {
|
|
return `${value}`;
|
|
}
|
|
},
|
|
},
|
|
series: [{
|
|
name: '耗电量',
|
|
data: prop.lineData.series,
|
|
type: 'line',
|
|
smooth: true,
|
|
itemStyle: {
|
|
color: '#3E7179',
|
|
},
|
|
lineStyle: {
|
|
width: 2,
|
|
},
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: '#437C84'
|
|
}, {
|
|
offset: 1,
|
|
color: '#1F2F33'
|
|
}]
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.title {
|
|
width: 100%;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
font-size: 14px;
|
|
color: #cfcfcf;
|
|
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: calc(100% - 20px);
|
|
}
|
|
|
|
.lc-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.left {
|
|
width: 35%;
|
|
height: 100%;
|
|
}
|
|
|
|
.right {
|
|
width: 65%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|