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

<template>
  <div class="daily-seizure-chart">
    <div class="chart-section">
      <div class="sub-title">总表</div>
      <div class="chart-container" ref="totalChart"></div>
    </div>
    <div class="chart-section">
      <div class="sub-title">{{title}}</div>
      <div class="chart-container" ref="deptChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'DailySeizureChart',
  props: {
    title: {
      type: String,
      default: '部门对比'
    },
    chartsData: {
      type: Object,
      default: () => ({
        total: {
          labels: ['5/20', '5/21', '5/22', '5/23', '5/24', '5/25', '5/26'],
          data: [280, 320, 290, 350, 310, 280, 152]
        },
        dept: {
          labels: ['5/20', '5/21', '5/22', '5/23', '5/24', '5/25', '5/26'],
          deptData: [
            { name: '旅检一部', data: [90, 100, 95, 110, 100, 95, 52] },
            { name: '旅检二部', data: [95, 110, 100, 120, 105, 90, 50] },
            { name: '旅检三部', data: [95, 110, 95, 120, 105, 95, 50] }
          ]
        }
      })
    }
  },
  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.initTotalChart()
      this.initDeptChart()
    },
    initTotalChart() {
      if (!this.$refs.totalChart) return
      this.charts.total = echarts.init(this.$refs.totalChart)
      const option = {
        responsive: true,
        maintainAspectRatio: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        legend: {
          data: ['查获总数'],
          textStyle: { color: '#666', fontSize: 10 },
          top: 0
        },
        grid: {
          left: '10%',
          right: '5%',
          bottom: '18%',
          top: '22%'
        },
        xAxis: {
          type: 'category',
          data: this.chartsData.total.labels,
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.1)'
            }
          },
          axisLabel: {
            color: '#666',
            fontSize: 10,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.05)'
            }
          },
          axisLabel: {
            color: '#666',
            fontSize: 10
          }
        },
        series: [{
          type: 'line',
          data: this.chartsData.total.data,
          smooth: true,
          itemStyle: {
            color: '#A78BFA'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#A78BFA40'
              }, {
                offset: 1, color: '#A78BFA00'
              }]
            }
          }
        }]
      }
      this.charts.total.setOption(option)
    },
    initDeptChart() {
      if (!this.$refs.deptChart) return
      this.charts.dept = echarts.init(this.$refs.deptChart)
      const colors = ['#60A5FA', '#A78BFA', '#34D399']
      const series = (this.chartsData.dept.deptData || []).map((dept, index) => ({
        name: dept.name,
        type: 'line',
        data: dept.data,
        smooth: true,
        itemStyle: {
          color: colors[index % colors.length]
        }
      }))
      
      const option = {
        responsive: true,
        maintainAspectRatio: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        legend: {
          type:'scroll',
          data: (this.chartsData.dept.deptData || []).map(d => d.name),
          textStyle: {
            color: '#333',
            fontSize: 9
          },
          top: 0
        },
        grid: {
          left: '10%',
          right: '5%',
          bottom: '14%',
          top: '22%'
        },
        xAxis: {
          type: 'category',
          data: this.chartsData.dept.labels,
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)'
            }
          },
          axisLabel: {
            color: '#333',
            fontSize: 10
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.05)'
            }
          },
          axisLabel: {
            color: '#333',
            fontSize: 10
          }
        },
        series: series
      }
      this.charts.dept.setOption(option)
    }
  },
  beforeDestroy() {
    Object.values(this.charts).forEach(chart => {
      if (chart) chart.dispose()
    })
  }
}
</script>

<style lang="scss" scoped>
.daily-seizure-chart {
  .chart-section {
    margin-bottom: 32rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .sub-title {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 16rpx;
  }

  .chart-container {
    height:450rpx;
  }
}
</style>