feat: 日期调整

罗广辉

2025-03-28 21cafdf0d0a032a991fdd1a1449d19405747e330

 src/views/Home/components/HomeRight/EventOverview.vue

@@ -8,6 +8,8 @@
import overviewImg5 from '@/assets/images/home/homeRight/overview5.png';
import overviewImg6 from '@/assets/images/home/homeRight/overview6.png';
import completionLeft from '@/assets/images/home/homeRight/completionLeft.png';
import * as echarts from 'echarts';
import CommonDateTime from '@/components/CommonDateTime.vue';

const list = ref([
  { name: '待审核', value: 265, img: overviewImg1, color: '#FF8E8E' },
@@ -18,29 +20,66 @@
  { name: '已完结', value: 262, img: overviewImg6, color: '#8EFFAC' },
]);
const value = ref('');
const echartsRef = ref('');

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
];
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      data: ['暴露垃圾', '占道'],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: '待完成',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series',
      },
      data: [120, 132],
    },
    {
      name: '已完成',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series',
      },
      data: [220, 182],
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(echartsRef.value);

  chart.setOption(option);
});
</script>

<template>
@@ -59,6 +98,7 @@
          </div>
        </div>
      </div>
      <CommonDateTime class="dateTime" />

      <el-select class="homeRightSelect" v-model="value" placeholder="请选择" size="large">
        <el-option
@@ -76,9 +116,7 @@
        <img class="completion-left-img" :src="completionLeft" />
      </div>

      <div class="chart">
        <div class="chart-text">echarts柱状图</div>
      </div>
      <div class="chart" ref="echartsRef"></div>
    </div>
  </div>
</template>
@@ -118,6 +156,10 @@
  display: flex;
  flex-direction: column;
  align-items: center;

  .dateTime{
    width: 356px;
  }

  .overviewData {
    width: 360px;
@@ -210,5 +252,10 @@
      opacity: 0.2;
    }
  }

  .chart {
    width: 356px;
    height: 182px;
  }
}
</style>