用vue3《script setup》帮我做一个电测听体检报告单图表x轴是频率Hzy轴是听力级dB左右耳数据在表单内输入后实时展现在图标上左耳折线数据用×表示右耳折线数据用o用echartjs来实现

以下是使用Vue 3中的<script setup>语法和ECharts库来实现电测听体检报告单图表的示例代码：

<template>
  <div>
    <div class="input-container">
      <label for="leftEarData">左耳数据:</label>
      <textarea id="leftEarData" v-model="leftEarData" rows="4" cols="30"></textarea>
    </div>
    <div class="input-container">
      <label for="rightEarData">右耳数据:</label>
      <textarea id="rightEarData" v-model="rightEarData" rows="4" cols="30"></textarea>
    </div>
    <div id="chart" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script setup>
import { ref, watchEffect, onMounted } from 'vue';
import * as echarts from 'echarts';

const leftEarData = ref('');
const rightEarData = ref('');

onMounted(() => {
  const chart = echarts.init(document.getElementById('chart'));

  watchEffect(() => {
    const leftData = parseData(leftEarData.value);
    const rightData = parseData(rightEarData.value);

    const option = {
      xAxis: {
        type: 'value',
        name: '频率（Hz）'
      },
      yAxis: {
        type: 'value',
        name: '听力级（dB）'
      },
      series: [
        {
          type: 'line',
          symbol: 'none',
          lineStyle: {
            color: 'red'
          },
          data: leftData
        },
        {
          type: 'line',
          symbol: 'circle',
          lineStyle: {
            color: 'blue'
          },
          data: rightData
        }
      ]
    };

    chart.setOption(option);
  });

  function parseData(dataStr) {
    const data = [];
    const lines = dataStr.trim().split('\n');

    for (const line of lines) {
      const [frequency, hearingLevel] = line.trim().split(' ');
      data.push([Number(frequency), Number(hearingLevel)]);
    }

    return data;
  }
});
</script>

<style>
.input-container {
  margin-bottom: 10px;
}
</style>

在上述代码中，我们首先引入了ref、watchEffect和onMounted等Vue 3的响应式函数，以及echarts库。然后，在<script setup>中定义了leftEarData和rightEarData这两个响应式数据，并使用watchEffect函数监听这两个数据的变化。

当leftEarData或rightEarData发生变化时，会自动触发回调函数，内部会解析输入的数据字符串，并通过echarts库绘制图表。左耳数据使用红色折线表示，右耳数据使用蓝色圆圈表示。

在模板中，我们使用v-model指令将输入框与leftEarData和rightEarData进行双向绑定，使得输入的数据能够实时更新到响应式数据上。

最后，我们在onMounted生命周期钩子中初始化了ECharts实例，并将图表容器的ID设置为chart。在watchEffect回调函数中，根据leftEarData和rightEarData的值动态生成图表数据，并通过setOption方法设置图表的配置项。

请确保已安装echarts库，可以使用以下命令进行安装：

npm install echarts

然后，可以将上述代码保存为一个单文件组件（例如，Chart.vue），并在Vue应用中使用该组件即可展示电测听体检报告单图表