168 lines
4.7 KiB
Vue
168 lines
4.7 KiB
Vue
<template>
|
|
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
const prop = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
}
|
|
}
|
|
});
|
|
|
|
const options = 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);'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['办公室1', '办公室2', '办公室3', '办公室4', '办公室5'],
|
|
axisLabel: {
|
|
color: "#ffffff",
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0091ea'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: [{
|
|
name:'次',
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#1e90ff',
|
|
type: 'dashed'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: "#ffffff"
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0091ea'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
}, {
|
|
name:'kWh',
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#1e90ff',
|
|
type: 'dashed'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: "#ffffff"
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0091ea'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
}],
|
|
series: [
|
|
{
|
|
name: '开关次数',
|
|
data: [106, 90, 25, 0, 35],
|
|
type: 'bar',
|
|
barWidth: '20',
|
|
barCategoryGap: '10%',
|
|
showBackground: true,
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: '#00c6ff' },
|
|
{ offset: 1, color: '#0072ff' }
|
|
]
|
|
},
|
|
borderRadius: [60, 60, 60, 60],
|
|
stroke: '#00c6ff',
|
|
lineWidth: 2
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#ffffff'
|
|
},
|
|
backgroundStyle: {
|
|
borderRadius: [60, 60, 60, 60],
|
|
}
|
|
},
|
|
{
|
|
name: '用电量',
|
|
data: [210, 30, 110, 80, 120],
|
|
yAxisIndex: 1,
|
|
type: 'bar',
|
|
barWidth: '20',
|
|
barCategoryGap: '10%',
|
|
showBackground: true,
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: '#00c6ff' },
|
|
{ offset: 1, color: '#0072ff' }
|
|
]
|
|
},
|
|
borderRadius: [60, 60, 60, 60],
|
|
stroke: '#00c6ff',
|
|
lineWidth: 2
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#ffffff'
|
|
},
|
|
backgroundStyle: {
|
|
borderRadius: [60, 60, 60, 60],
|
|
}
|
|
},
|
|
|
|
],
|
|
};;
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style> |