chongqing-app/src/pages/components/SeizureInfo.vue

<template>
  <div class="seizure-info">
    <div class="total-section">
      <div class="donut-container">
        <div class="chart-container" ref="seizureDonut"></div>
      </div>
      <div class="dept-bar-container">
        <div class="chart-container" ref="deptSeizureBar"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'SeizureInfo',
  props: {
    chartsData: {
      type: Object,
      default: () => ({
        total: 1982,
        depts: {
          labels: ['旅检一部', '旅检二部', '旅检三部'],
          data: [620, 680, 682]
        }
      })
    }
  },
  data() {
    return {
      charts: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts()
    })
  },
  watch: {
    chartsData: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.disposeCharts()
          this.initCharts()
        })
      }
    }
  },
  methods: {
    disposeCharts() {
      Object.values(this.charts).forEach(chart => {
        if (chart) chart.dispose()
      })
      this.charts = {}
    },
    initCharts() {
      this.initSeizureDonut()
      this.initDeptSeizureBar()
    },
    initSeizureDonut() {
      if (!this.$refs.seizureDonut) return
      this.charts.seizureDonut = echarts.init(this.$refs.seizureDonut)
      const option = {
        responsive: true,
        maintainAspectRatio: false,
        series: [{
          type: 'pie',
          radius: ['60%', '80%'],
          data: [
            { value: this.chartsData.total, name: '查获总数' }
          ],
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#A78BFA'
              }, {
                offset: 1, color: '#6366F1'
              }]
            }
          },
          label: {
            show: false
          }
        }],
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: '38%',
            style: {
              text: String(this.chartsData.total),
              fill: '#333',
              fontSize: 14,
              fontWeight: 'bold',
              textAlign: 'center'
            },
            z: 100
          },
          {
            type: 'text',
            left: 'center',
            top: '58%',
            style: {
              text: '查获总数',
              fill: '#333',
              fontSize: 15,
              textAlign: 'center'
            },
            z: 100
          }
        ]
      }
      this.charts.seizureDonut.setOption(option)
    },
    initDeptSeizureBar() {
      if (!this.$refs.deptSeizureBar) return
      this.charts.deptSeizureBar = echarts.init(this.$refs.deptSeizureBar)
      const option = {
        responsive: true,
        maintainAspectRatio: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        legend: {
          data: ['查获数量'],
          textStyle: { color: '#666', fontSize: 10 },
          top: 0
        },
        grid: {
          left: '15%',
          right: '5%',
          bottom: '15%',
          top: '22%'
        },
        xAxis: {
          type: 'category',
          data: this.chartsData.depts.labels,
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.1)'
            }
          },
          axisLabel: {
            color: '#666',
            fontSize: 9
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.05)'
            }
          },
          axisLabel: {
            color: '#666',
            fontSize: 9
          }
        },
        series: [{
          type: 'bar',
          data: this.chartsData.depts.data,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#60A5FA'
              }, {
                offset: 1, color: '#3B82F6'
              }]
            }
          },
          barWidth: '50%'
        }]
      }
      this.charts.deptSeizureBar.setOption(option)
    }
  },
  beforeDestroy() {
    Object.values(this.charts).forEach(chart => {
      if (chart) chart.dispose()
    })
  }
}
</script>

<style lang="scss" scoped>
.seizure-info {
  .total-section {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .donut-container {
    position: relative;
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 24rpx;
    
    .chart-container {
      min-height: 240rpx;
      width: 100%;
      height: 100%;
    }
  }
  
  .dept-bar-container {
    width: 100%;
    height: 240rpx;

    .chart-container {
      width: 100%;
      height: 100%;
    }
  }
}
</style>