109 lines
2.7 KiB
Vue
109 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed, ref } from 'vue';
|
||
|
|
const prop = defineProps({
|
||
|
|
data: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {
|
||
|
|
return {
|
||
|
|
xAxis: [],
|
||
|
|
series: []
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
const options = computed(() => {
|
||
|
|
return {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
// Use axis to trigger tooltip
|
||
|
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {},
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '3%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
name: 'h',
|
||
|
|
type: 'value',
|
||
|
|
axisLabel: {
|
||
|
|
color: '#fff',
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '工作',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'total',
|
||
|
|
barWidth: '30%',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: [320, 302, 301, 334, 390, 330, 320]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '待机',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'total',
|
||
|
|
barWidth: '30%',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: [120, 132, 101, 134, 90, 230, 210]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '停机',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'total',
|
||
|
|
barWidth: '30%',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '故障',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'total',
|
||
|
|
barWidth: '30%',
|
||
|
|
label: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: [150, 212, 201, 154, 190, 330, 410]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|