同比
This commit is contained in:
parent
ba1deb7b4e
commit
e6d4141c3b
@ -1,11 +1,173 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.box{
|
||||
background-color: blue;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
gap: 30px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,173 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.box{
|
||||
background-color: blue;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
gap: 30px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user