Vue3 实时电测听体检报告单图表制作 - Echarts

<p>&quot;<template>\n  <div>\n    <div class="input-container">\n      <label for="leftEarData">左耳数据:\n      </label>\n      <textarea id="leftEarData" v-model="leftEarData" rows="4" cols="30"></textarea>\n    </div>\n    <div class="input-container">\n      <label for="rightEarData">右耳数据:\n      </label>\n      <textarea id="rightEarData" v-model="rightEarData" rows="4" cols="30"></textarea>\n    </div>\n    <div id="chart" style="width: 600px; height: 400px;"></div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watchEffect, onMounted } from 'vue';\nimport * as echarts from 'echarts';\n\nconst leftEarData = ref('');\nconst rightEarData = ref('');\n\nonMounted(() =&gt; {\n  const chart = echarts.init(document.getElementById('chart'));\n\n  watchEffect(() =&gt; {\n    const leftData = parseData(leftEarData.value);\n    const rightData = parseData(rightEarData.value);\n\n    const option = {\n      xAxis: {\n        type: 'value',\n        name: '频率（Hz）'\n      },\n      yAxis: {\n        type: 'value',\n        name: '听力级（dB）'\n      },\n      series: [\n        {\n          type: 'line',\n          symbol: 'none',\n          lineStyle: {\n            color: 'red'\n          },\n          data: leftData\n        },\n        {\n          type: 'line',\n          symbol: 'circle',\n          lineStyle: {\n            color: 'blue'\n          },\n          data: rightData\n        }\n      ]\n    };\n\n    chart.setOption(option);\n  });\n\n  function parseData(dataStr) {\n    const data = [];\n    const lines = dataStr.trim().split('\n');\n\n    for (const line of lines) {\n      const [frequency, hearingLevel] = line.trim().split(' ');\n      data.push([Number(frequency), Number(hearingLevel)]);\n    }\n\n    return data;\n  }\n});\n</script>\n\n<style>\n.input-container {\n  margin-bottom: 10px;\n}\n</style>\n&quot; 使用 Vue 3 的 <code>&lt;script setup&gt;</code> 语法和 ECharts 库，构建实时更新的电测听体检报告单图表。通过输入左右耳数据，图表自动展示听力级与频率关系。左耳数据用红色折线表示，右耳数据用蓝色圆圈表示。只需将代码保存为一个单文件组件，并在 Vue 应用中使用该组件，即可展示图表。\n\n<strong>安装 ECharts 库</strong>\n\n<code>bash\nnpm install echarts\n</code></p>