WholeProcessPlatform/frontend/src/modules/alongFishMod/index.vue

<!-- SidePanelItem.vue -->
<template>
    <SidePanelItem title="水生生态调查" :select="select" :datetimePicker="datetimePicker">
        <div ref="chartRef" class="chart-container"></div>
    </SidePanelItem>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts';
import SidePanelItem from '@/components/SidePanelItem/index.vue';

// 定义组件名
defineOptions({
    name: 'shuiShengShengTaiDiaoCha'
});

// ==================== 图表相关 ====================
const chartRef = ref<HTMLDivElement>();
let chartInstance: any = null;

// 选择器配置
const select = ref({
    show: true,
    value: undefined,
    options: [],
    picker: undefined,
    format: undefined
});

// 日期选择器配置
const datetimePicker = ref({
    show: true,
    value: '2020',
    format: 'YYYY',
    picker: 'year' as const,
    options: []
});

// 初始化图表
const initChart = () => {
    if (!chartRef.value) return;

    // 销毁已存在的实例
    if (chartInstance) {
        chartInstance.dispose();
    }

    // 创建新实例
    chartInstance = echarts.init(chartRef.value);

    // 图表配置
    const option: EChartsOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            borderColor: 'transparent',
            textStyle: {
                color: '#ffffff'
            }
        },
        grid: {
            top: 30,
            left: '2%',
            right: '4%',
            bottom: 30,
            containLabel: true
        },
        legend: {
            bottom: 0,
            itemWidth: 10,
            itemHeight: 10
        },
        yAxis: {
            type: 'value',
            minInterval: 1,
            name: '种',
            axisLine: {
                lineStyle: {
                    color: '#e0e0e0'
                }
            },
            axisLabel: {
                color: '#666'
            },
            splitLine: {
                lineStyle: {
                    color: '#e0e0e0',
                    type: 'solid'
                }
            }
        },
        xAxis: {
            type: 'category',
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0,
                rotate: 0,
                color: '#666',
                rich: {
                    a: {
                        height: 24,
                        align: 'center'
                    },
                    b: {
                        height: 30,
                        align: 'center'
                    }
                }
            },
            name: '数量(个)',
            data: [
                '两河口',
                '杨房沟',
                '锦屏一级',
                '锦屏二级',
                '官地',
                '二滩',
                '桐子林'
            ]
        },
        series: [
            {
                name: '外来鱼类',
                type: 'bar',
                stack: 'stack',
                data: [0, 0, 0, 0, 0, 1, 2],
                label: {
                    show: true,
                    position: 'top',
                    color: '#FFF'
                }
            },
            {
                name: '本土受威胁鱼类',
                type: 'bar',
                stack: 'stack',
                data: [1, 10, 10, 5, 4, 6, 11],
                label: {
                    show: true,
                    position: 'top',
                    color: '#FFF'
                }
            },
            {
                name: '本土无危鱼类',
                type: 'bar',
                stack: 'stack',
                data: [1, 10, 6, 5, 2, 13, 23],
                label: {
                    show: true,
                    position: 'top',
                    color: '#FFF'
                }
            }
        ],
        barWidth: 15,
        color: ['#4B79AB', '#78C300', '#9556A4']
    };

    // 设置图表配置
    chartInstance.setOption(option);
};

// 处理窗口大小变化
const handleResize = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};

// ==================== 生命周期钩子 ====================

// 页面加载时执行
onMounted(() => {
    nextTick(() => {
        setTimeout(() => {
            initChart();
            window.addEventListener('resize', handleResize);
        }, 50);
    });
});

// 组件卸载时清理
onUnmounted(() => {
    // 移除事件监听
    window.removeEventListener('resize', handleResize);
    
    // 销毁图表实例
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
});
</script>

<style lang="scss" scoped>
.chart-container {
    width: 100%;
    height: 231px;
    min-height: 231px;
}
</style>