admin-vben5/apps/web-antd/src/views/property/waterPower/waterTrend/index.vue

<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>