Vue3 Setup 电测听体检报告单图表生成示例 - 使用Chart.js

"好的，下面是一个使用Vue 3 setup的简单示例，展示了一个电测听体检报告单的频率与听力级的图表：\n\nhtml\n<template>\n <div>\n <h1>电测听体检报告单</h1>\n <canvas ref="chartCanvas"></canvas>\n </div>\n</template>\n\n<script>\nimport { ref, onMounted } from 'vue';\nimport Chart from 'chart.js';\n\nexport default {\n name: 'Report',\n setup() {\n const chartCanvas = ref(null);\n\n onMounted(() => {\n const ctx = chartCanvas.value.getContext('2d');\n new Chart(ctx, {\n type: 'line',\n data: {\n labels: ['125', '250', '500', '1000', '2000', '4000', '8000'], // 频率（Hz）\n datasets: [\n {\n label: '听力级（dB）',\n data: [20, 25, 20, 30, 40, 35, 30], // 听力级（dB）\n backgroundColor: 'rgba(0, 123, 255, 0.5)',\n borderColor: 'rgba(0, 123, 255, 1)',\n borderWidth: 1\n }\n ]\n },\n options: {\n scales: {\n x: {\n title: {\n display: true,\n text: '频率（Hz）'\n }\n },\n y: {\n title: {\n display: true,\n text: '听力级（dB）'\n }\n }\n }\n }\n });\n });\n\n return {\n chartCanvas\n };\n }\n};\n</script>\n\n<style>\ncanvas {\n max-width: 100%;\n}\n</style>\n\n\n该示例使用了Chart.js库来绘制图表。在setup函数中，我们使用了ref函数来创建一个响应式引用chartCanvas，并在组件挂载后使用onMounted钩子来获取canvas的上下文，并通过Chart.js创建一个折线图。\n\n你可以根据自己的需求修改频率和听力级的数据，以及其他图表选项，例如颜色、线宽、轴标题等。请确保已安装Chart.js库，并将其导入到组件中。\n\n希望这个示例能够帮到你！\n