This commit is contained in:
FLL 2025-07-27 11:43:59 +08:00
parent ba1deb7b4e
commit e6d4141c3b
2 changed files with 328 additions and 4 deletions

View File

@ -1,11 +1,173 @@
<script setup lang="ts"> <script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { Table } from 'ant-design-vue'
import { DatePicker } from 'ant-design-vue';
import { SearchOutlined } from '@ant-design/icons-vue';
const currentYear = ref<Dayjs>(dayjs());
const disabledYear = (current: Dayjs) => {
return current && current > dayjs().endOf('year');
};
onMounted(()=>{
//year
const chartYear = document.getElementById('year');
const myChartYear = echarts.init(chartYear);
const optionYear = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['本期', '同期']
},
toolbox: {
show: true,
feature: {
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
}
},
calculable: true,
xAxis: [
{
type: 'category',
name:'月',
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
}
],
yAxis: [
{
type: 'value',
name:'KW.h'
}
],
series: [
{
name: '本期',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
},
{
name: '同期',
type: 'bar',
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
}
],
dataZoom: [
{
type: 'inside',
xAxisIndex: 0,
zoomOnMouseWheel: true,
filterMode: 'filter',
},
],
};
optionYear && myChartYear.setOption(optionYear);
//
myChartYear.on('mouseover', { seriesIndex: 0 }, () => {
myChartYear.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: true,
});
});
//
myChartYear.on('mouseout', { seriesIndex: 0 }, () => {
myChartYear.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: false,
});
});
})
const columns = [
{
title: '本期时间',
dataIndex: 'name',
},
{
title: '本期能耗(kw.h)',
dataIndex: 'age',
},
{
title: '同比能耗(kw.h)',
dataIndex: 'address',
},
{
title: '同比(%)',
dataIndex: 'address',
},
];
const data = [...Array(32)].map((_, i) => ({
key: i,
name: `${i+1}`,
age: '--',
address: `--`,
}));
</script> </script>
<template> <template>
<div class="box">
<div class="left" style="background: red;"></div>
<div class="right">
<div style="background: #fff;border-radius: 8px;padding: 10px;margin-bottom: 10px;">
<div>
年份
<DatePicker
style="margin: 0 10px;"
v-model:value="currentYear"
:disabled-date="disabledYear"
picker="year"
/>
<a-button type="primary">
<template #icon><SearchOutlined /></template>
查询
</a-button>
</div>
<div id="year" style="height: 250px;width: 100%;"></div>
</div>
<div>
<Table
style="border-radius: 8px;"
:columns="columns"
:data-source="data"
:pagination="false"
:scroll="{ y: 270 }"
/>
</div>
</div>
</div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.box{
background-color: blue;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 30px;
padding: 10px;
}
</style> </style>

View File

@ -1,11 +1,173 @@
<script setup lang="ts"> <script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { Table } from 'ant-design-vue'
import { DatePicker } from 'ant-design-vue';
import { SearchOutlined } from '@ant-design/icons-vue';
const currentYear = ref<Dayjs>(dayjs());
const disabledYear = (current: Dayjs) => {
return current && current > dayjs().endOf('year');
};
onMounted(()=>{
//year
const chartYear = document.getElementById('year');
const myChartYear = echarts.init(chartYear);
const optionYear = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['本期', '同期']
},
toolbox: {
show: true,
feature: {
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
}
},
calculable: true,
xAxis: [
{
type: 'category',
name:'月',
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
}
],
yAxis: [
{
type: 'value',
name:'t'
}
],
series: [
{
name: '本期',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
},
{
name: '同期',
type: 'bar',
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
}
],
dataZoom: [
{
type: 'inside',
xAxisIndex: 0,
zoomOnMouseWheel: true,
filterMode: 'filter',
},
],
};
optionYear && myChartYear.setOption(optionYear);
//
myChartYear.on('mouseover', { seriesIndex: 0 }, () => {
myChartYear.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: true,
});
});
//
myChartYear.on('mouseout', { seriesIndex: 0 }, () => {
myChartYear.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: false,
});
});
})
const columns = [
{
title: '本期时间',
dataIndex: 'name',
},
{
title: '本期能耗(t)',
dataIndex: 'age',
},
{
title: '同比能耗(t)',
dataIndex: 'address',
},
{
title: '同比(%)',
dataIndex: 'address',
},
];
const data = [...Array(32)].map((_, i) => ({
key: i,
name: `${i+1}`,
age: '--',
address: `--`,
}));
</script> </script>
<template> <template>
<div class="box">
<div class="left" style="background: red;"></div>
<div class="right">
<div style="background: #fff;border-radius: 8px;padding: 10px;margin-bottom: 10px;">
<div>
年份
<DatePicker
style="margin: 0 10px;"
v-model:value="currentYear"
:disabled-date="disabledYear"
picker="year"
/>
<a-button type="primary">
<template #icon><SearchOutlined /></template>
查询
</a-button>
</div>
<div id="year" style="height: 250px;width: 100%;"></div>
</div>
<div>
<Table
style="border-radius: 8px;"
:columns="columns"
:data-source="data"
:pagination="false"
:scroll="{ y: 270 }"
/>
</div>
</div>
</div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.box{
background-color: blue;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 30px;
padding: 10px;
}
</style> </style>