同比
This commit is contained in:
parent
ba1deb7b4e
commit
e6d4141c3b
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user