From af531f34d0d096f1f26e6c180e078fa85fb0d199 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=AC=A3=E7=84=B6?=
 <12817866+yueranzhishang@user.noreply.gitee.com>
Date: Sat, 28 Jun 2025 07:28:04 +0000
Subject: [PATCH] =?UTF-8?q?update=20neo/templates/Underwater.html.=20?=
 =?UTF-8?q?=E6=B0=B4=E4=B8=8B=E7=B3=BB=E7=BB=9F=E6=9C=80=E7=BB=88=E7=89=88?=
 =?UTF-8?q?html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 刘欣然 <12817866+yueranzhishang@user.noreply.gitee.com>
---
 neo/templates/Underwater.html | 895 +++++-----------------------------
 1 file changed, 110 insertions(+), 785 deletions(-)
diff --git a/neo/templates/Underwater.html b/neo/templates/Underwater.html
index 23bc104..2912d95 100644
--- a/neo/templates/Underwater.html
+++ b/neo/templates/Underwater.html
@@ -1,3 +1,4 @@
+{% load static %}
 <html>
 <head>
 
@@ -11,219 +12,11 @@
     <link rel="stylesheet" href="../static/css/public.css" media="all">
     <link rel="stylesheet" href="../static/js/echarts.min.js" media="all">
     <script src="https://unpkg.com/d3@7.8.2/dist/d3.min.js"></script>
-
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Arial', sans-serif;
-        }
-        
-        body {
-            background-color: #f5f7fa;
-            color: #333;
-        }
-        
-        .navbar {
-            background-color: #7b51db;
-            color: white;
-            padding: 15px 20px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        }
-        
-        .container {
-            display: flex;
-            padding: 20px;
-            gap: 20px;
-            flex-wrap: wrap;
-        }
-        
-        .panel {
-            background: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-            padding: 20px;
-            flex: 1;
-            min-width: 300px;
-        }
-        
-        .panel-header {
-            font-size: 18px;
-            font-weight: bold;
-            margin-bottom: 20px;
-            color: #7b51db;
-            border-bottom: 1px solid #eee;
-            padding-bottom: 10px;
-        }
-        
-        .chart-container {
-            width: 100%;
-            height: 400px;
-            min-height: 300px;
-        }
-        
-        .species-selector {
-            margin-bottom: 20px;
-        }
-        
-        select {
-            padding: 8px 12px;
-            border-radius: 4px;
-            border: 1px solid #ddd;
-            font-size: 14px;
-            width: 200px;
-        }
-        
-        .info-table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-top: 20px;
-        }
-        
-        .info-table th, .info-table td {
-            padding: 10px;
-            text-align: left;
-            border-bottom: 1px solid #eee;
-        }
-        
-        .info-table th {
-            background-color: #f9f9f9;
-            font-weight: bold;
-        }
-        
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 15px;
-            margin-top: 20px;
-        }
-        
-        .stat-card {
-            background: #f9f9f9;
-            padding: 15px;
-            border-radius: 6px;
-            text-align: center;
-        }
-        
-        .stat-value {
-            font-size: 24px;
-            font-weight: bold;
-            color: #7b51db;
-            margin: 5px 0;
-        }
-        
-        .stat-label {
-            font-size: 14px;
-            color: #666;
-        }
-
-            .species-info {
-        margin-top: 20px;
-    }
-    .species-description {
-        background-color: #f9f9f9;
-        padding: 15px;
-        border-radius: 6px;
-        margin-bottom: 20px;
-        line-height: 1.6;
-    }
-    .species-image {
-        width: 100%;
-        border-radius: 6px;
-        margin-top: 15px;
-    }
-    /* 选择器容器样式 */
-.species-selector {
-    margin-bottom: 25px;
-}
-
-/* 标签样式 */
-.selector-label {
-    display: block;
-    margin-bottom: 8px;
-    font-size: 14px;
-    color: #7b51db;
-    font-weight: 600;
-}
-
-/* 选择器包裹容器 */
-.select-wrapper {
-    position: relative;
-    width: 100%;
-}
-
-/* 自定义选择框样式 */
-.styled-select {
-    width: 100%;
-    padding: 12px 15px;
-    border: 2px solid #e0e0e0;
-    border-radius: 8px;
-    background-color: white;
-    color: #555;
-    font-size: 14px;
-    appearance: none;
-    outline: none;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-}
-
-.styled-select:focus {
-    border-color: #7b51db;
-    box-shadow: 0 0 0 3px rgba(123, 81, 219, 0.2);
-}
-
-/* 下拉箭头样式 */
-.select-arrow {
-    position: absolute;
-    top: 50%;
-    right: 15px;
-    transform: translateY(-50%);
-    color: #7b51db;
-    pointer-events: none;
-}
-
-/* 选项样式 */
-.styled-select option {
-    padding: 10px;
-    background: white;
-    color: #333;
-}
-
-.styled-select option:hover {
-    background-color: #f0e6ff;
-}
-
-/* 鼠标悬停效果 */
-.styled-select:hover {
-    border-color: #b39ddb;
-}
-
-.spacer {
-    height: 30px;  /* 调整这个值来控制间距大小 */
-    /* 或者使用 margin: 15px 0; */
-}
-
-
-        @media (max-width: 768px) {
-            .container {
-                flex-direction: column;
-            }
-            .stats-grid {
-                grid-template-columns: 1fr;
-            }
-            .styled-select {
-        padding: 10px 12px;
-        font-size: 13px;
-    }
     
-    .select-arrow {
-        right: 10px;
-    }
-        }
-    </style>
-    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+    <link rel="stylesheet" href="../static/css/underWater.css" media="all">
+    <script src="../static/js/jquery.min.js"></script>
+    <script src="../static/js/echarts.min.js"></script>
+    <script src="../static/js/underWater.js"></script>
 </head>
 
 <body>
@@ -232,8 +25,8 @@
         <!-- 左侧面板 - 整体信息 -->
         <div class="panel">
             <div class="panel-header">鱼群整体信息</div>
-            
-            <div class="stats-grid">
+            <div class="charts-horizontal">
+                <div class="stats-grid">
                 <div class="stat-card">
                     <div class="stat-label">鱼类种类</div>
                     <div class="stat-value" id="species-count">7</div>
@@ -247,15 +40,36 @@
                     <div class="stat-value" id="avg-weight">398g</div>
                 </div>
             </div>
-            <div class="spacer"></div>
-            <div class="panel-header">鱼类分布</div>
             <div class="chart-container" id="species-distribution"></div>
-            
-            <div class="panel-header">重量分布</div>
-            <div class="chart-container" id="weight-distribution"></div>
+            </div>
+            <div class="charts-horizontal">
+                <div class="panel-header">重量</br>分布</div>
+                <div class="chart-container" id="weight-distribution"></div>
 
-            <div class="panel-header">长度分布</div>
-            <div class="chart-container" id="length-distribution"></div>
+                <div class="panel-header">长度</br>分布</div>
+                <div class="chart-container" id="length-distribution"></div>
+            </div>
+            <div class="panel-header">异常数据提示</div>
+            <div class="species-description">
+                    <pre style="white-space: pre-wrap; word-wrap: break-word;">
+=== 非正数检查 ===
+⚠️ 发现非正数异常值：
+   Species  Weight(g)  Length1(cm)  Length2(cm)  Length3(cm)  Height(cm)  Width(cm)
+40   Roach        0.0         19.0         20.5         22.8      6.4752     3.3516
+                    </pre>
+<pre style="white-space: pre-wrap; word-wrap: break-word;">
+=== 按种类检测异常值（IQR方法） ===
+⚠️ 发现 7 条异常记录：
+    Species  Weight(g)  Length1(cm)  Length2(cm)  Length3(cm)  Height(cm)  Width(cm)
+35    Roach       40.0         12.9         14.1         16.2      4.1472     2.2680
+40    Roach        0.0         19.0         20.5         22.8      6.4752     3.3516
+52    Roach      290.0         24.0         26.0         29.2      8.8768     4.4968
+53    Roach      272.0         25.0         27.0         30.6      8.5680     4.7736
+54    Roach      390.0         29.5         31.7         35.0      9.4850     5.3550
+157   Smelt       19.7         13.2         14.3         15.2      2.8728     2.0672
+158   Smelt       19.9         13.8         15.0         16.2      2.9322     1.8792</pre>
+                </div>
+                
         </div>
         
         <!-- 右侧面板 - 具体鱼类信息 -->
@@ -263,41 +77,50 @@
             
             
             <div class="species-selector">
-    <label for="species-select" class="selector-label">选择鱼类</label>
-    <div class="select-wrapper">
-        <select id="species-select" class="styled-select">
-            <option value="Bream">Bream</option>
-            <option value="Roach">Roach</option>
-            <option value="Whitefish">Whitefish</option>
-            <option value="Parkki">Parkki</option>
-            <option value="Perch">Perch</option>
-            <option value="Pike">Pike</option>
-            <option value="Smelt">Smelt</option>
-        </select>
-        <div class="select-arrow">
-            <i class="fa fa-chevron-down"></i>
-        </div>
-    </div>
-</div>
+                <div class="select-wrapper">
+                    <select id="species-select" class="styled-select">
+                        <option value="Bream">Bream</option>
+                        <option value="Roach">Roach</option>
+                        <option value="Whitefish">Whitefish</option>
+                        <option value="Parkki">Parkki</option>
+                        <option value="Perch">Perch</option>
+                        <option value="Pike">Pike</option>
+                        <option value="Smelt">Smelt</option>
+                    </select>
+                    <div class="select-arrow">
+                        <i class="fa fa-chevron-down"></i>
+                    </div>
+                </div>
+            </div>
             
-            <div class="species-info">
-            <div class="panel-header">文字介绍</div>
-            <div class="species-description" id="species-description">
-                <!-- 介绍内容将通过JavaScript动态填充 -->
+            <div class="charts-horizontal">
+                <div class="text-container">
+                <div class="panel-header">文字介绍</div>
+                <div class="species-description" id="species-description">
+                    <!-- 介绍内容将通过JavaScript动态填充 -->
+                </div>
+                </div>
+                <!-- 添加这个图片容器 -->
+                <div class="image-container">
+                <div class="panel-header">参考图片</div>
+                <div class="species-image-container">
+                    <img id="species-image" class="species-image" alt="鱼类图片" style="max-width: 100%; height: auto;">
+                </div>
+                </div>
             </div>
             
-        
-        <!-- 添加这个图片容器 -->
-        <div class="panel-header">参考图片</div>
-        <div class="species-image-container">
-            <img id="species-image" class="species-image" alt="鱼类图片" style="max-width: 100%; height: auto;">
-        </div>
-        </div>
-        <div class="spacer"></div>
-<div class="panel-header">图表展示</div>
-            <div class="chart-container" id="species-detail-chart"></div>
+            <div class="spacer"></div>
+            <div class="panel-header">图表展示</div>
+            <div class="chart-container" id="scatter-chart"></div>
+            
+            <div class="mini-charts-container">
+                <div class="mini-chart" id="weight-chart"></div>
+                <div class="mini-chart" id="length-chart"></div>
+                <div class="mini-chart" id="height-chart"></div>
+                <div class="mini-chart" id="width-chart"></div>
+            </div>
             
-            <table class="info-table">
+            <table class="info-table" id="myTable">
                 <thead>
                     <tr>
                         <th>指标</th>
@@ -310,546 +133,48 @@
                     <!-- 数据将通过JavaScript动态填充 -->
                 </tbody>
             </table>
-        </div>
-    </div>
-
-    <script>
-
-
-const speciesInfoData = {
-        "Bream": {
-            description: "鲤鱼(Bream)是一种常见的淡水鱼，体型较大，背部呈青灰色，腹部银白色。它们通常生活在湖泊和河流的底部，以水生植物和小型无脊椎动物为食。鲤鱼是欧洲重要的食用鱼之一。",
-            imageUrl: "../static/images/Bream.jpg" // YouTube视频ID示例
-        },
-        "Roach": {
-            description: "拟鲤(Roach)是一种小型淡水鱼，广泛分布于欧洲和亚洲。它们身体侧扁，呈银灰色，背鳍和尾鳍略带红色。拟鲤通常成群活动，以水生昆虫和植物为食。",
-            imageUrl: "../static/images/Roach.jpg"
-        },
-        "Whitefish": {
-            description: "白鱼(Whitefish)是一类冷水性鱼类的统称，主要生活在北半球的淡水湖泊中。它们体型修长，银白色，是重要的商业捕捞鱼类。白鱼肉质细嫩，味道鲜美。",
-            imageUrl: "../static/images/Whitefish.jpg"
-        },
-        "Parkki": {
-            description: "派克鱼(Parkki)是一种生活在北欧淡水中的鱼类，体型中等，背部呈橄榄绿色，腹部银白色。它们是肉食性鱼类，以小鱼和水生昆虫为食。",
-            imageUrl: "../static/images/Parkki.jpg"
-        },
-        "Perch": {
-            description: "鲈鱼(Perch)是一种受欢迎的淡水鱼，身体呈黄绿色，有5-9条垂直的黑色条纹。它们是凶猛的捕食者，以小鱼和甲壳类为食。鲈鱼是垂钓者的热门目标。",
-            imageUrl: "../static/images/Whitefish.jpg"
-        },
-        "Pike": {
-            description: "梭子鱼(Pike)是一种大型淡水掠食鱼，身体细长，口部大而尖。它们潜伏在水草中伏击猎物，包括鱼类、青蛙甚至小型水鸟。梭子鱼是运动钓鱼的热门目标。",
-            imageUrl: "../static/images/Whitefish.jpg"
-        },
-        "Smelt": {
-            description: "胡瓜鱼(Smelt)是一种小型鱼类，生活在北半球的淡水和咸水中。它们身体细长，半透明，通常成群活动。胡瓜鱼是许多大型鱼类和鸟类的重要食物来源。",
-            imageUrl: "../static/images/Whitefish.jpg"
-        }
-    };
-
-// 使用D3.js的quantile函数统一计算
-function calculateBoxplotData(data) {
-    const sorted = [...data].sort((a, b) => a - b);
-    return [
-        d3.min(sorted),    // min
-        d3.quantile(sorted, 0.25), // Q1
-        d3.quantile(sorted, 0.5),  // median
-        d3.quantile(sorted, 0.75), // Q3
-        d3.max(sorted)     // max
-    ];
-}
-    
-    // 计算整体平均重量
-    function calculateOverallAvg(fishData) {
-        const validWeights = fishData.weights.filter(w => !isNaN(w));
-        if (validWeights.length === 0) return 0;
-        const sum = validWeights.reduce((a, b) => a + b, 0);
-        return Math.round(sum / validWeights.length);
-    }
-
-    async function loadCSVData() {
-    try {
-        const response = await fetch('/static/Fish.csv');
-        if (!response.ok) throw new Error("Failed to load CSV");
-        const csvText = await response.text();
-        return parseCSV(csvText);
-    } catch (error) {
-        console.error('Error loading CSV:', error);
-        return null;
-    }
-}
-
-    function parseCSV(csvText) {
-        const lines = csvText.split('\n');
-        const result = {
-            species: [],
-            weights: [],
-            lengths: [],
-            heights: [],
-            widths: [],
-            records: [],
-            speciesData: {}
-        };
-        
-        // 跳过表头行（如果有）
-        const startLine = lines[0].includes('Species') ? 1 : 0;
-        
-        for (let i = startLine; i < lines.length; i++) {
-            if (!lines[i].trim()) continue;
-            
-            // 处理CSV行，考虑到可能有逗号在引号中
-            const row = lines[i].split(',').map(item => item.trim());
-            const species = row[0];
-            const weight = parseFloat(row[1]);
-            const length1 = parseFloat(row[2]);
-            const length2 = parseFloat(row[3]);
-            const length3 = parseFloat(row[4]);
-            const height = parseFloat(row[5]);
-            const width = parseFloat(row[6]);
-            
-            // 添加到总数据
-            result.species.push(species);
-            result.weights.push(weight);
-            result.lengths.push(length3); // 使用Length3作为主要长度
-            result.heights.push(height);
-            result.widths.push(width);
+            <button onclick="downloadCSV()">下载为CSV</button>
             
-            // 按物种分组数据
-            if (!result.speciesData[species]) {
-                result.speciesData[species] = {
-                    weights: [],
-                    lengths: [],
-                    heights: [],
-                    widths: []
-                };
-            }
-            
-            result.speciesData[species].weights.push(weight);
-            result.speciesData[species].lengths.push(length3);
-            result.speciesData[species].heights.push(height);
-            result.speciesData[species].widths.push(width);
-            
-            // 添加完整记录
-            result.records.push({
-                species,
-                weight,
-                length1,
-                length2,
-                length3,
-                height,
-                width
-            });
-        }
-        
-        // 计算每个物种的统计数据
-        const speciesStats = {};
-        Object.keys(result.speciesData).forEach(species => {
-            const data = result.speciesData[species];
-            
-            speciesStats[species] = {
-                count: data.weights.length,
-                avgWeight: calculateAverage(data.weights),
-                minWeight: Math.min(...data.weights),
-                maxWeight: Math.max(...data.weights),
-                avgLength: calculateAverage(data.lengths),
-                minLength: Math.min(...data.lengths),
-                maxLength: Math.max(...data.lengths),
-                avgHeight: calculateAverage(data.heights),
-                minHeight: Math.min(...data.heights),
-                maxHeight: Math.max(...data.heights),
-                avgWidth: calculateAverage(data.widths),
-                minWidth: Math.min(...data.widths),
-                maxWidth: Math.max(...data.widths)
-            };
-        });
-        
-        // 计算唯一物种列表
-        result.uniqueSpecies = [...new Set(result.species)];
-        result.totalRecords = result.records.length;
-        result.speciesStats = speciesStats;
-        
-        return result;
-    }
-    
-    function calculateAverage(values) {
-        const validValues = values.filter(v => !isNaN(v));
-        if (validValues.length === 0) return 0;
-        const sum = validValues.reduce((a, b) => a + b, 0);
-        return sum / validValues.length;
-    }
-
-    // 初始化图表
-    async function initCharts() {
-
-        const fishData = await loadCSVData();
-        if (!fishData) {
-            alert('无法加载数据，请检查数据文件');
-            return;
-        }
-        // 在 initCharts 函数末尾添加：
-        window.fishData = fishData;
-
-        // 更新统计卡片
-        document.getElementById('species-count').textContent = fishData.uniqueSpecies.length;
-        document.getElementById('total-records').textContent = fishData.totalRecords;
-        document.getElementById('avg-weight').textContent = calculateOverallAvg(fishData) + 'g';
 
-        // 1. 鱼类分布饼图 - 按物种计数
-        const speciesCounts = {};
-        fishData.species.forEach(species => {
-            speciesCounts[species] = (speciesCounts[species] || 0) + 1;
-        });
-        
-        const distChart = echarts.init(document.getElementById('species-distribution'));
-        const distOption = {
-            tooltip: {
-                trigger: 'item',
-                formatter: '{a} <br/>{b}: {c} ({d}%)'
-            },
-            legend: {
-                orient: 'vertical',
-                right: 10,
-                top: 'center',
-                data: fishData.uniqueSpecies
-            },
-            series: [
-                {
-                    name: '鱼类分布',
-                    type: 'pie',
-                    radius: ['40%', '70%'],
-                    avoidLabelOverlap: false,
-                    itemStyle: {
-                        color: function(params) {
-                            const colorList = ['#7b51db', '#5a8dee', '#00c9db', '#00d4a0', '#ffc107', '#ff6b6b', '#a162e8'];
-                            return colorList[params.dataIndex % colorList.length];
-                        },
-                        borderRadius: 10,
-                        borderColor: '#fff',
-                        borderWidth: 2
-                    },
-                    label: {
-                        show: false,
-                        position: 'center'
-                    },
-                    emphasis: {
-                        label: {
-                            show: true,
-                            fontSize: '18',
-                            fontWeight: 'bold'
-                        }
-                    },
-                    labelLine: {
-                        show: false
-                    },
-                    data: fishData.uniqueSpecies.map(species => ({
-                        value: speciesCounts[species],
-                        name: species
-                    }))
-                }
-            ]
-        };
-        distChart.setOption(distOption);
-
-        // 2. 重量分布箱线图
-const weightChart = echarts.init(document.getElementById('weight-distribution'));
-const weightOption = {
-    tooltip: {
-        trigger: 'item',
-        axisPointer: {
-            type: 'shadow'
-        },
-        formatter: function(params) {
-            const data = params.data;
-            return [
-                '鱼类: ' + params.name + '<hr/>',
-                '最大值: ' + data[5].toFixed(2) + 'g<br/>',
-                '上四分位数: ' + data[4].toFixed(2) + 'g<br/>',
-                '中位数: ' + data[3].toFixed(2) + 'g<br/>',
-                '下四分位数: ' + data[2].toFixed(2) + 'g<br/>',
-                '最小值: ' + data[1].toFixed(2) + 'g'
-            ].join('');
-        }
-    },
-    grid: {
-        left: '10%',
-        right: '10%',
-        bottom: '15%'
-    },
-    xAxis: {
-        type: 'category',
-        data: fishData.uniqueSpecies,
-        axisLabel: {
-            rotate: 30
-        },
-        boundaryGap: true,
-        nameGap: 30,
-        axisLine: {
-            lineStyle: {
-                color: '#999'
-            }
-        },
-        axisTick: {
-            alignWithLabel: true
-        }
-    },
-    yAxis: {
-        type: 'value',
-        name: '重量(g)',
-        scale: true,
-        splitLine: {
-            lineStyle: {
-                type: 'dashed'
-            }
-        }
-    },
-    series: [{
-        name: '重量分布',
-        type: 'boxplot',
-        data: fishData.uniqueSpecies.map(species => {
-            const weights = fishData.speciesData[species].weights;
-            // 过滤无效值并确保数据已排序
-            const validWeights = weights.filter(w => !isNaN(w) && w !== null);
-            return calculateBoxplotData(validWeights);
-        }),
-        itemStyle: {
-            color: '#7b51db',
-            borderColor: '#333',
-            borderWidth: 1
-        },
-        emphasis: {
-            itemStyle: {
-                borderWidth: 2,
-                shadowBlur: 5,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.3)'
-            }
-        },
-        boxWidth: [20, 50]
-    }]
-};
-weightChart.setOption(weightOption);
-
-        const lengthChart = echarts.init(document.getElementById('length-distribution'));
-        const lengthOption = {
-            tooltip: {
-                trigger: 'item',
-                axisPointer: {
-                    type: 'shadow'
-                },
-                formatter: function(params) {
-                    const data = params.data;
-                    return [
-                        '鱼类: ' + params.name + '<hr/>',
-                        '最大值: ' + data[5].toFixed(2) + 'cm<br/>',
-                        '上四分位数: ' + data[4].toFixed(2) + 'cm<br/>',
-                        '中位数: ' + data[3].toFixed(2) + 'cm<br/>',
-                        '下四分位数: ' + data[2].toFixed(2) + 'cm<br/>',
-                        '最小值: ' + data[1].toFixed(2) + 'cm'
-                    ].join('');
-                }
-            },
-            grid: {
-                left: '10%',
-                right: '10%',
-                bottom: '15%'
-            },
-            xAxis: {
-                type: 'category',
-                data: fishData.uniqueSpecies,
-                axisLabel: {
-                    rotate: 30
-                },
-                boundaryGap: true,
-                nameGap: 30,
-                axisLine: {
-                    lineStyle: {
-                        color: '#999'
-                    }
-                },
-                axisTick: {
-                    alignWithLabel: true
-                }
-            },
-            yAxis: {
-                type: 'value',
-                name: '长度(cm)',
-                scale: true,
-                splitLine: {
-                    lineStyle: {
-                        type: 'dashed'
-                    }
-                }
-            },
-            series: [{
-                name: '长度分布',
-                type: 'boxplot',
-                data: fishData.uniqueSpecies.map(species => {
-                    const lengths = fishData.speciesData[species].lengths;
-                    const validLengths = lengths.filter(l => !isNaN(l) && l !== null);
-                    return calculateBoxplotData(validLengths);
-                }),
-                itemStyle: {
-                    color: '#00c9db',  // 使用不同颜色区分
-                    borderColor: '#333',
-                    borderWidth: 1
-                },
-                emphasis: {
-                    itemStyle: {
-                        borderWidth: 2,
-                        shadowBlur: 5,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 0, 0, 0.3)'
-                    }
-                },
-                boxWidth: [20, 50]
-            }]
-        };
-        lengthChart.setOption(lengthOption);
-
-        // 3. 初始化具体鱼类图表
-        updateSpeciesDetail(fishData, fishData.uniqueSpecies[0]);
-        
-        // 更新下拉选择框
-        const select = document.getElementById('species-select');
-        select.innerHTML = '';
-        fishData.uniqueSpecies.forEach(species => {
-            const option = document.createElement('option');
-            option.value = species;
-            option.textContent = species;
-            select.appendChild(option);
-        });
-    }
+        </div>
+    </div>
+</body>
 
-    function calculatePercentile(sortedArray, percentile) {
-        const index = (percentile / 100) * (sortedArray.length - 1);
-        const lower = Math.floor(index);
-        const upper = lower + 1;
-        const weight = index % 1;
-        
-        if (upper >= sortedArray.length) return sortedArray[lower];
-        return sortedArray[lower] * (1 - weight) + sortedArray[upper] * weight;
+<script>
+  function downloadCSV() {
+    // 确保元素存在
+    const table = document.getElementById("myTable");
+    if (!table) {
+      console.error("找不到表格元素");
+      return;
     }
-
-    
-    function updateSpeciesDetail(fishData, species) {
-        const stats = fishData.speciesStats[species];
-        // 更新鱼类介绍
-    const descriptionElement = document.getElementById('species-description');
-    descriptionElement.textContent = speciesInfoData[species]?.description || "暂无该鱼类的详细介绍。";
     
-    // 更新鱼类图片
-    const imageElement = document.getElementById('species-image');
-    const imageUrl = speciesInfoData[species]?.imageUrl;
+    const rows = table.querySelectorAll("tr");
+    let csv = [];
     
-    if (imageUrl) {
-        imageElement.src = imageUrl;
-        imageElement.alt = species;
-        imageElement.style.display = 'block';
-    } else {
-        imageElement.style.display = 'none';
+    for (const row of rows) {
+      const rowData = [];
+      const cols = row.querySelectorAll("td, th");
+      
+      for (const col of cols) {
+        rowData.push(col.innerText);
+      }
+      
+      csv.push(rowData.join(","));
     }
-        // 更新具体鱼类图表
-        const detailChart = echarts.init(document.getElementById('species-detail-chart'));
-        const detailOption = {
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow'
-                }
-            },
-            xAxis: {
-                type: 'category',
-                data: ['重量(g)', '长度(cm)', '高度(cm)', '宽度(cm)']
-            },
-            yAxis: {
-                type: 'value'
-            },
-            series: [
-                {
-                    name: '平均值',
-                    type: 'bar',
-                    data: [stats.avgWeight, stats.avgLength, stats.avgHeight, stats.avgWidth],
-                    itemStyle: {
-                        color: '#7b51db'
-                    }
-                },
-                {
-                    name: '最小值',
-                    type: 'bar',
-                    data: [stats.minWeight, stats.minLength, stats.minHeight, stats.minWidth],
-                    itemStyle: {
-                        color: '#5a8dee',
-                        opacity: 0.7
-                    }
-                },
-                {
-                    name: '最大值',
-                    type: 'bar',
-                    data: [stats.maxWeight, stats.maxLength, stats.maxHeight, stats.maxWidth],
-                    itemStyle: {
-                        color: '#ff6b6b',
-                        opacity: 0.7
-                    }
-                }
-            ]
-        };
-        detailChart.setOption(detailOption);
-
-        // 更新统计表格
-        const statsTable = document.getElementById('species-stats');
-        statsTable.innerHTML = `
-            <tr>
-                <td>重量(g)</td>
-                <td>${stats.avgWeight.toFixed(2)}</td>
-                <td>${stats.minWeight}</td>
-                <td>${stats.maxWeight}</td>
-            </tr>
-            <tr>
-                <td>长度(cm)</td>
-                <td>${stats.avgLength.toFixed(2)}</td>
-                <td>${stats.minLength}</td>
-                <td>${stats.maxLength}</td>
-            </tr>
-            <tr>
-                <td>高度(cm)</td>
-                <td>${stats.avgHeight.toFixed(2)}</td>
-                <td>${stats.minHeight}</td>
-                <td>${stats.maxHeight}</td>
-            </tr>
-            <tr>
-                <td>宽度(cm)</td>
-                <td>${stats.avgWidth.toFixed(2)}</td>
-                <td>${stats.minWidth}</td>
-                <td>${stats.maxWidth}</td>
-            </tr>
-            <tr>
-                <td>记录数</td>
-                <td colspan="3">${stats.count}</td>
-            </tr>
-        `;
-    }
-
-
-// 修改事件监听器：
-document.addEventListener('DOMContentLoaded', function() {
-    initCharts();
     
-    // 绑定下拉选择事件
-    document.getElementById('species-select').addEventListener('change', function() {
-        const fishData = window.fishData;
-        if (fishData) {
-            updateSpeciesDetail(fishData, this.value);
-        }
-    });
+    const csvContent = csv.join("\n");
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
     
-    // 窗口大小变化时重新调整图表大小
-    window.addEventListener('resize', function() {
-        echarts.init(document.getElementById('species-distribution')).resize();
-        echarts.init(document.getElementById('weight-distribution')).resize();
-        echarts.init(document.getElementById('length-distribution')).resize();
-        echarts.init(document.getElementById('species-detail-chart')).resize();
-    });
-});
-</script>
-</body>
+    link.setAttribute("href", url);
+    link.setAttribute("download", "表格数据.csv");
+    link.style.visibility = "hidden";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+  </script>
+
 </html>
\ No newline at end of file
-- 
Gitee

