211 lines
4.1 KiB
Vue
211 lines
4.1 KiB
Vue
|
||
<template>
|
||
|
||
<div ref="chart" style="width: 100%; height: 80%;"></div>
|
||
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent, onMounted, ref, watch } from 'vue';
|
||
import * as echarts from 'echarts';
|
||
|
||
const data = [
|
||
{
|
||
date: '2023-12-01 0:00',
|
||
unit: 'V',
|
||
data: [
|
||
{
|
||
name: 'AC_002（暖通电表）',
|
||
value: '21'
|
||
},
|
||
{
|
||
name: 'AC_003（照明电表）',
|
||
value: '36'
|
||
},
|
||
{
|
||
name: 'AC_004（给排水电表）',
|
||
value: '5'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
date: '2023-12-02 0:00',
|
||
unit: 'V',
|
||
data: [
|
||
{
|
||
name: 'AC_002（暖通电表）',
|
||
value: '26'
|
||
},
|
||
{
|
||
name: 'AC_003（照明电表）',
|
||
value: '25'
|
||
},
|
||
{
|
||
name: 'AC_004（给排水电表）',
|
||
value: '47'
|
||
}
|
||
]
|
||
|
||
},
|
||
{
|
||
date: '2023-12-03 0:00',
|
||
unit: 'V',
|
||
data: [
|
||
{
|
||
name: 'AC_002（暖通电表）',
|
||
value: '18'
|
||
},
|
||
{
|
||
name: 'AC_003（照明电表）',
|
||
value: '22'
|
||
},
|
||
{
|
||
name: 'AC_004（给排水电表）',
|
||
value: '26'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
date: '2023-12-04 0:00',
|
||
unit: 'V',
|
||
data: [
|
||
{
|
||
name: 'AC_002（暖通电表）',
|
||
value: '40'
|
||
},
|
||
{
|
||
name: 'AC_003（照明电表）',
|
||
value: '15'
|
||
},
|
||
{
|
||
name: 'AC_004（给排水电表）',
|
||
value: '12'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
date: '2023-12-05 0:00',
|
||
unit: 'V',
|
||
data: [
|
||
{
|
||
name: 'AC_002（暖通电表）',
|
||
value: '15'
|
||
},
|
||
{
|
||
name: 'AC_003（照明电表）',
|
||
value: '18'
|
||
},
|
||
{
|
||
name: 'AC_004（给排水电表）',
|
||
value: '15'
|
||
}
|
||
]
|
||
},
|
||
];
|
||
|
||
export default defineComponent({
|
||
name: 'Graph',
|
||
setup() {
|
||
const chart = ref(null);
|
||
|
||
onMounted(() => {
|
||
|
||
var seriesList = []
|
||
var date = []
|
||
var legendList: string|any[] = []
|
||
for (let i = 0; i < data.length; i++) {
|
||
|
||
date.push(data[i].date)
|
||
|
||
for (let j = 0; j < data[i].data.length; j++) {
|
||
if (seriesList.length < j + 1) {
|
||
seriesList.push(
|
||
{
|
||
name: data[i].data[j].name,
|
||
data: [data[i].data[j].value],
|
||
type: 'line',
|
||
smooth: true
|
||
}
|
||
)
|
||
} else {
|
||
seriesList[j].data.push(data[i].data[j].value)
|
||
}
|
||
|
||
if (legendList.length == 0 || legendList.length < j + 1) {
|
||
legendList.push(data[i].data[j].name)
|
||
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
const option = {
|
||
|
||
|
||
legend: {
|
||
data: legendList,
|
||
orient: 'horizontal',
|
||
bottom: 30
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: (params: any) => {
|
||
const date = params[0].name;
|
||
const values = params.map((param: any) => {
|
||
const unit = data.find(d => d.date === date)?.unit || '';
|
||
return `<tr>
|
||
<td>${param.marker}${param.seriesName}</td>
|
||
<td style="text-align: right;">${param.value} ${unit}</td>
|
||
</tr>`;
|
||
}).join('');
|
||
return `<div>${date}</div><table style="width: 100%;">${values}</table>`;
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: date
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
dataZoom: [
|
||
// {
|
||
// type: 'inside',
|
||
// start: 0,
|
||
// end: 10
|
||
// },
|
||
{
|
||
height: 10,
|
||
start: 0,
|
||
end: 100,
|
||
handleSize: '300%', // 设置滑块的大小
|
||
bottom: 15,
|
||
|
||
}
|
||
],
|
||
series: seriesList
|
||
// series: [
|
||
|
||
// {
|
||
// data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||
// type: 'line'
|
||
// }
|
||
// ]
|
||
};
|
||
|
||
const chartInstance = echarts.init(chart.value);
|
||
chartInstance.setOption(option);
|
||
});
|
||
|
||
return { chart };
|
||
}
|
||
})
|
||
</script>
|
||
<style lang="less" scoped>
|
||
|
||
</style>
|