Vue3 使用 <script setup> 创建电测听体检报告单图标

<p>以下是一个使用 Vue 3 的 `<script setup>` 语法来创建一个电测听体检报告单图标的示例：</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class='chart-container'&gt;
    &lt;canvas ref='chartCanvas'&gt;&lt;/canvas&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { onMounted, ref } from 'vue';
import Chart from 'chart.js';

const chartCanvas = ref(null);
let chartInstance = null;

onMounted(() =&gt; {
  // 模拟测试数据
  const frequencies = [250, 500, 1000, 2000, 4000, 8000];
  const hearingLevels = [20, 30, 40, 50, 60, 70];

  // 创建图表
  const ctx = chartCanvas.value.getContext('2d');
  chartInstance = new Chart(ctx, {
    type: 'line',
    data: {
      labels: frequencies.map(f =&gt; f.toString()),
      datasets: [{
        label: '听力级',
        data: hearingLevels,
        borderColor: 'rgba(75, 192, 192, 1)',
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      scales: {
        x: {
          title: {
            display: true,
            text: '频率 (Hz)'
          }
        },
        y: {
          title: {
            display: true,
            text: '听力级 (dB)'
          },
          suggestedMin: 0,
          suggestedMax: 100
        }
      }
    }
  });
});

onUnmounted(() =&gt; {
  // 销毁图表实例
  if (chartInstance) {
    chartInstance.destroy();
    chartInstance = null;
  }
});
&lt;/script&gt;

&lt;style scoped&gt;
.chart-container {
  width: 100%;
  height: 400px;
}
&lt;/style&gt;
</code></pre>
<p>此示例使用`Chart.js`库创建了一个折线图，x轴表示频率（Hz），y轴表示听力级（dB）。您可以根据需要修改测试数据的频率和听力级数组来适应您的实际情况。图表将自动根据数据进行绘制，并且提供了一些选项来自定义图表的外观和行为。</p>
<p>请确保在 Vue 项目中安装了`Chart.js`和`vue-chartjs`依赖项，可以使用以下命令进行安装：</p>
<pre><code>npm install chart.js vue-chartjs
</code></pre>
<p>然后，您可以将以上代码保存为一个 Vue 组件，并在您的应用程序中使用该组件来显示电测听体检报告单图标。</p>