diff --git a/apps/web-antd/src/views/property/electricEnergy/electricTrend/index.vue b/apps/web-antd/src/views/property/electricEnergy/electricTrend/index.vue
index 8600d414..7f6fa54e 100644
--- a/apps/web-antd/src/views/property/electricEnergy/electricTrend/index.vue
+++ b/apps/web-antd/src/views/property/electricEnergy/electricTrend/index.vue
@@ -1,11 +1,28 @@
 <script setup lang="ts">
 import * as echarts from 'echarts';
-import {onMounted} from "vue";
+import {onMounted, ref} from "vue";
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { DatePicker } from 'ant-design-vue';
+
+const currentDay = ref<Dayjs>(dayjs());
+const currentMonth = ref<Dayjs>(dayjs());
+const currentYear = ref<Dayjs>(dayjs());
+const disabledDay = (current: Dayjs) => {
+  return current && current > dayjs().endOf('day');
+};
+const disabledMonth = (current: Dayjs) => {
+  return current && current > dayjs().endOf('month');
+};
+const disabledYear = (current: Dayjs) => {
+  return current && current > dayjs().endOf('year');
+};
 
 onMounted(()=>{
-  const chartDom = document.getElementById('main');
-  const myChart = echarts.init(chartDom);
-  const option = {
+  //day
+  const chartDay = document.getElementById('day');
+  const myChartDay = echarts.init(chartDay);
+  const optionDay = {
     tooltip: {
       trigger: 'axis'
     },
@@ -24,7 +41,7 @@ onMounted(()=>{
       {
         type: 'category',
         name:'时',
-        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+        data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00','12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
       }
     ],
     yAxis: [
@@ -38,7 +55,7 @@ onMounted(()=>{
         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
+          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 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: [
@@ -50,6 +67,146 @@ onMounted(()=>{
       {
         name: '昨日',
         type: 'bar',
+        data: [
+          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 152.2, 48.7, 18.8, 6.0, 2.3, 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',
+      },
+    ],
+  };
+  optionDay && myChartDay.setOption(optionDay);
+
+  //month
+  const chartMonth = document.getElementById('month');
+  const myChartMonth = echarts.init(chartMonth);
+  const optionMonth = {
+    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', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
+      }
+    ],
+    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, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
+        ],
+        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, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
+        ],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+      }
+    ],
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        zoomOnMouseWheel: true,
+        filterMode: 'filter',
+      },
+    ],
+  };
+  optionMonth && myChartMonth.setOption(optionMonth);
+
+  //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
         ],
@@ -60,24 +217,119 @@ onMounted(()=>{
           ]
         },
       }
-    ]
+    ],
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        zoomOnMouseWheel: true,
+        filterMode: 'filter',
+      },
+    ],
   };
-  option && myChart.setOption(option);
-})
+  optionYear && myChartYear.setOption(optionYear);
 
+  // 鼠标悬停时激活缩放
+  myChartDay.on('mouseover', { seriesIndex: 0 }, () => {
+    myChartDay.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: true,
+    });
+  });
+
+  // 鼠标离开时取消缩放
+  myChartDay.on('mouseout', { seriesIndex: 0 }, () => {
+    myChartDay.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: false,
+    });
+  });
+
+  // 鼠标悬停时激活缩放
+  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,
+    });
+  });
+
+  // 鼠标悬停时激活缩放
+  myChartMonth.on('mouseover', { seriesIndex: 0 }, () => {
+    myChartMonth.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: true,
+    });
+  });
+
+  // 鼠标离开时取消缩放
+  myChartMonth.on('mouseout', { seriesIndex: 0 }, () => {
+    myChartMonth.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: false,
+    });
+  });
+})
 </script>
 
 <template>
-<div>
-  <div>
-    <div>
+<div class="box">
+  <div class="left" style="background: red"></div>
+  <div class="right">
+    <div style="background: #fff;border-radius: 8px;padding: 10px">
+      <div>
+        <div style="display: flex;justify-content: space-between;">
+          <DatePicker
+            v-model:value="currentDay"
+            :disabled-date="disabledDay"
+          />当日能耗总值：125.04KW.h</div>
+      </div>
+      <div id="day" style="height: 250px;width: 100%;"></div>
+    </div>
+    <div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 10px;">
+      <div>
+        <div style="display: flex;justify-content: space-between;">
+          <DatePicker
+            v-model:value="currentMonth"
+            :disabled-date="disabledMonth"
+            picker="month"
+          />当月能耗总值：125.04KW.h</div>
+      </div>
+      <div id="month" style="height: 250px;width: 100%;"></div>
+    </div>
+    <div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 10px;">
+      <div>
+        <div style="display: flex;justify-content: space-between;">
+          <DatePicker
+            v-model:value="currentYear"
+            :disabled-date="disabledYear"
+            picker="year"
+          />当年能耗总值：125.04KW.h</div>
+      </div>
+      <div id="year" style="height: 250px;width: 100%;"></div>
     </div>
-    <div id="main" style="height: 400px;width: 100%"></div>
-    <div></div>
   </div>
 </div>
 </template>
 
 <style scoped lang="scss">
-
+.box{
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 30px;
+  padding: 10px;
+}
 </style>
diff --git a/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/data.ts b/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/data.ts
new file mode 100644
index 00000000..74dc092e
--- /dev/null
+++ b/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/data.ts
@@ -0,0 +1,81 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import {getDictOptions} from "#/utils/dict";
+import dayjs from 'dayjs';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('pro_qoq_type'),
+    },
+    fieldName: 'date',
+    label: '日期',
+    defaultValue: '0',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: (formData) => {
+      const type: 0 | 1 | 2 | 3 = formData.date ?? 0;
+      const today = dayjs();
+      const propsMap = {
+        0: {
+          picker: 'date',
+          format: 'YYYY-MM-DD',
+          valueFormat: 'YYYY-MM-DD',
+          showTime: false,
+          defaultValue: today.format('YYYY-MM-DD'),
+        },
+        1: {
+          picker: 'week',
+          format: 'YYYY-MM-DD',
+          valueFormat: 'YYYY-MM-DD',
+          showTime: false,
+          defaultValue: today.startOf('week').format('YYYY-MM-DD'),
+        },
+        2: {
+          picker: 'month',
+          format: 'YYYY-MM',
+          valueFormat: 'YYYY-MM',
+          showTime: false,
+          defaultValue: today.format('YYYY-MM'),
+        },
+        3: {
+          picker: 'year',
+          format: 'YYYY',
+          valueFormat: 'YYYY',
+          showTime: false,
+          defaultValue: today.format('YYYY'),
+        },
+      };
+      return propsMap[type];
+    },
+    fieldName: 'chioceDate',
+    dependencies: {
+      triggerFields: ['date'],
+    },
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '能源节点',
+    field: 'roomNumber',
+  },
+  {
+    title: '当月用能(kw.h)',
+    field: 'chargeItem',
+  },
+  {
+    title: '上月用能(kw.h)',
+    field: 'chargeCycle',
+  },
+  {
+    title: '增加值(kw.h)',
+    field: 'startTime',
+  },
+  {
+    title: '环比(%)',
+    field: 'endTime',
+  },
+];
diff --git a/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue b/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue
index 63cf316b..240d96bf 100644
--- a/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue
+++ b/apps/web-antd/src/views/property/electricEnergy/electricityQOQ/index.vue
@@ -1,11 +1,72 @@
 <script setup lang="ts">
+import { Page, type VbenFormProps } from '@vben/common-ui';
+import {
+  useVbenVxeGrid,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+import {
+  paymentReviewList,
+} from '#/api/property/costManagement/paymentReview';
+import { columns, querySchema } from './data';
 
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 30,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    highlight: true,
+    reserve: true,
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await paymentReviewList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'property-paymentReview-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
 </script>
 
 <template>
-
+  <div class="box">
+    <div class="left" style="background: red;margin: 16px 0 16px 16px"></div>
+    <div class="right">
+      <Page :auto-content-height="true">
+        <BasicTable table-title="用电环比分析列表"/>
+      </Page>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
-
+.box{
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 30px;
+}
 </style>
diff --git a/apps/web-antd/src/views/property/waterPower/waterQOQ/data.ts b/apps/web-antd/src/views/property/waterPower/waterQOQ/data.ts
new file mode 100644
index 00000000..630cf3d4
--- /dev/null
+++ b/apps/web-antd/src/views/property/waterPower/waterQOQ/data.ts
@@ -0,0 +1,81 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import {getDictOptions} from "#/utils/dict";
+import dayjs from 'dayjs';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('pro_qoq_type'),
+    },
+    fieldName: 'date',
+    label: '日期',
+    defaultValue: '0',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: (formData) => {
+      const type: 0 | 1 | 2 | 3 = formData.date ?? 0;
+      const today = dayjs();
+      const propsMap = {
+        0: {
+          picker: 'date',
+          format: 'YYYY-MM-DD',
+          valueFormat: 'YYYY-MM-DD',
+          showTime: false,
+          defaultValue: today.format('YYYY-MM-DD'),
+        },
+        1: {
+          picker: 'week',
+          format: 'YYYY-MM-DD',
+          valueFormat: 'YYYY-MM-DD',
+          showTime: false,
+          defaultValue: today.startOf('week').format('YYYY-MM-DD'),
+        },
+        2: {
+          picker: 'month',
+          format: 'YYYY-MM',
+          valueFormat: 'YYYY-MM',
+          showTime: false,
+          defaultValue: today.format('YYYY-MM'),
+        },
+        3: {
+          picker: 'year',
+          format: 'YYYY',
+          valueFormat: 'YYYY',
+          showTime: false,
+          defaultValue: today.format('YYYY'),
+        },
+      };
+      return propsMap[type];
+    },
+    fieldName: 'chioceDate',
+    dependencies: {
+      triggerFields: ['date'],
+    },
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '能源节点',
+    field: 'roomNumber',
+  },
+  {
+    title: '当月用能(t)',
+    field: 'chargeItem',
+  },
+  {
+    title: '上月用能(t)',
+    field: 'chargeCycle',
+  },
+  {
+    title: '增加值(t)',
+    field: 'startTime',
+  },
+  {
+    title: '环比(%)',
+    field: 'endTime',
+  },
+];
diff --git a/apps/web-antd/src/views/property/waterPower/waterQOQ/index.vue b/apps/web-antd/src/views/property/waterPower/waterQOQ/index.vue
index 63cf316b..240d96bf 100644
--- a/apps/web-antd/src/views/property/waterPower/waterQOQ/index.vue
+++ b/apps/web-antd/src/views/property/waterPower/waterQOQ/index.vue
@@ -1,11 +1,72 @@
 <script setup lang="ts">
+import { Page, type VbenFormProps } from '@vben/common-ui';
+import {
+  useVbenVxeGrid,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+import {
+  paymentReviewList,
+} from '#/api/property/costManagement/paymentReview';
+import { columns, querySchema } from './data';
 
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 30,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    highlight: true,
+    reserve: true,
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await paymentReviewList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  id: 'property-paymentReview-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
 </script>
 
 <template>
-
+  <div class="box">
+    <div class="left" style="background: red;margin: 16px 0 16px 16px"></div>
+    <div class="right">
+      <Page :auto-content-height="true">
+        <BasicTable table-title="用电环比分析列表"/>
+      </Page>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
-
+.box{
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 30px;
+}
 </style>
diff --git a/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue b/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue
index 63cf316b..0cc039ac 100644
--- a/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue
+++ b/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue
@@ -1,11 +1,233 @@
 <script setup lang="ts">
+import * as echarts from 'echarts';
+import {onMounted, ref} from "vue";
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { DatePicker } from 'ant-design-vue';
 
+const currentMonth = ref<Dayjs>(dayjs());
+const currentYear = ref<Dayjs>(dayjs());
+const disabledMonth = (current: Dayjs) => {
+  return current && current > dayjs().endOf('month');
+};
+const disabledYear = (current: Dayjs) => {
+  return current && current > dayjs().endOf('year');
+};
+
+onMounted(()=>{
+  //month
+  const chartMonth = document.getElementById('month');
+  const myChartMonth = echarts.init(chartMonth);
+  const optionMonth = {
+    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', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name:'t'
+      }
+    ],
+    series: [
+      {
+        name: '当月',
+        type: 'bar',
+        data: [
+          2.0, 4.9, 7.0, 23.2, 25.6, 0.0, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 0.0, 7.0, 23.2, 0.0, 76.7, 135.6, 162.2, 32.6, 0.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
+        ],
+        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, 0.0, 48.7, 18.8, 6.0, 2.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 0.0, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
+        ],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+      }
+    ],
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        zoomOnMouseWheel: true,
+        filterMode: 'filter',
+      },
+    ],
+  };
+  optionMonth && myChartMonth.setOption(optionMonth);
+
+  //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,
+    });
+  });
+
+  // 鼠标悬停时激活缩放
+  myChartMonth.on('mouseover', { seriesIndex: 0 }, () => {
+    myChartMonth.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: true,
+    });
+  });
+
+  // 鼠标离开时取消缩放
+  myChartMonth.on('mouseout', { seriesIndex: 0 }, () => {
+    myChartMonth.dispatchAction({
+      type: 'takeGlobalCursor',
+      key: 'dataZoomSelect',
+      dataZoomSelectActive: false,
+    });
+  });
+})
 </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-top: 10px;">
+      <div>
+        <div style="display: flex;justify-content: space-between;">
+          <DatePicker
+            v-model:value="currentMonth"
+            :disabled-date="disabledMonth"
+            picker="month"
+          />当月能耗总值：30.00t</div>
+      </div>
+      <div id="month" style="height: 250px;width: 100%;"></div>
+    </div>
+    <div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 10px;">
+      <div>
+        <div style="display: flex;justify-content: space-between;">
+          <DatePicker
+            v-model:value="currentYear"
+            :disabled-date="disabledYear"
+            picker="year"
+          />当年能耗总值：59.00t</div>
+      </div>
+      <div id="year" style="height: 250px;width: 100%;"></div>
+    </div>
+  </div>
+</div>
 </template>
 
 <style scoped lang="scss">
-
+.box{
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: 30px;
+  padding: 10px;
+}
 </style>