Vue3 电测听体检报告单图表制作：使用 <script setup> 和 ECharts 实时绘制

<template>
  <div>
    <div class='form'>
      <label for='leftEarData'>左耳数据：</label>
      <input v-model='leftEarData' type='text' id='leftEarData' placeholder='输入左耳数据' />
<pre><code>  &lt;label for='rightEarData'&gt;右耳数据：&lt;/label&gt;
  &lt;input v-model='rightEarData' type='text' id='rightEarData' placeholder='输入右耳数据' /&gt;
&lt;/div&gt;

&lt;div ref='chart' class='chart'&gt;&lt;/div&gt;
</code></pre>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

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

onMounted(() => {
  const chart = echarts.init($refs.chart);

  const options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    xAxis: {
      type: 'category',
      data: ['125', '250', '500', '1000', '2000', '4000', '8000']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} dB'
      }
    },
    series: [
      {
        name: '左耳',
        type: 'line',
        symbol: 'none',
        data: []
      },
      {
        name: '右耳',
        type: 'line',
        symbol: 'none',
        data: []
      }
    ]
  };

  chart.setOption(options);

  watch(leftEarData, (newValue) => {
    updateChart('左耳', newValue);
  });

  watch(rightEarData, (newValue) => {
    updateChart('右耳', newValue);
  });

  function updateChart(ear, data) {
    const seriesIndex = ear === '左耳' ? 0 : 1;
    const dataArray = data.split(',');
    const formattedData = dataArray.map((value) => Number(value.trim()));

    chart.setOption({
      series: [
        {
          name: '左耳',
          data: formattedData
        },
        {
          name: '右耳',
          data: formattedData
        }
      ]
    });
  }
});
</script>
<style>
.form {
  margin-bottom: 20px;
}

.chart {
  height: 400px;
}
</style>
<p>该代码使用 <code>&lt;script setup&gt;</code> 语法编写逻辑部分，<code>ref</code> 用于创建响应式数据，<code>onMounted</code> 用于在组件挂载后初始化 ECharts 图表，并在 <code>watch</code> 中监听输入框数据的变化来更新图表。每当左耳或右耳数据发生变化时，我们会重新设置图表的数据。</p>
<p>注意，上述代码中的示例数据仅作为演示之用，实际使用时你需要根据你的需求来修改数据逻辑和样式。</p>
<p>此外，你还需要在 <code>&lt;script&gt;</code> 标签上方引入 Vue 3、ECharts 和样式文件。</p>
<p>希望以上代码能够满足你的需求！</p>