Vue3 电测听体检报告单图表实时展示 - Echarts.js 实现

我们将使用Vue3和Echarts.js制作一个电测听体检报告单图标，实时展示左右耳的听力级数据。用户可通过输入框实时修改数据，图标会根据输入内容动态更新。

首先，你需要安装echarts.js依赖：

npm install echarts

然后，你可以创建一个新的Vue组件，使用<script setup>语法来编写脚本部分，并将echarts图标指示到模板中。

<template>
  <div>
    <div>
      <label>&#x5DE6;&#x8033;&#x6570;&#x636E;&#xFF1A;</label>
      <input v-model="leftEarData" type="text" />
    </div>
    <div>
      <label>&#x53F3;&#x8033;&#x6570;&#x636E;&#xFF1A;</label>
      <input v-model="rightEarData" type="text" />
    </div>
    <div ref="chart" style="width: 600px; height: 400px;"></div>
  </div>
</template>

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

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

// &#x521D;&#x59CB;&#x5316;echarts&#x56FE;&#x6807;
const chart = ref(null);
onMounted(() => {
  chart.value = echarts.init($refs.chart);
});

// &#x76D1;&#x542C;&#x5DE6;&#x8033;&#x6570;&#x636E;&#x53D8;&#x5316;
watch(leftEarData, (newValue) => {
  updateChart('left', newValue);
});

// &#x76D1;&#x542C;&#x53F3;&#x8033;&#x6570;&#x636E;&#x53D8;&#x5316;
watch(rightEarData, (newValue) => {
  updateChart('right', newValue);
});

// &#x66F4;&#x65B0;&#x56FE;&#x6807;&#x6570;&#x636E;
function updateChart(ear, data) {
  const option = {
    xAxis: {
      type: 'category',
      data: ['100', '200', '500', '1000', '2000', '4000', '8000'],
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 120,
    },
    series: [
      {
        name: '&#x542C;&#x529B;&#x7EA7',
        type: 'line',
        data: parseData(data),
        symbol: ear === 'left' ? 'cross' : 'circle',
      },
    ],
  };

  chart.value.setOption(option);
}

// &#x89E3;&#x6790;&#x6570;&#x636E;
function parseData(data) {
  if (!data) {
    return [];
  }

  return data.split(',').map((value) => parseInt(value));
}
</script>

在上面的代码中，我们使用ref来创建响应性变量，并使用onMounted键子来初始化echarts图标。然后，使用watch来监听左耳数据和右耳数据的变化，并在数据变化时更新图标。updateChart函数根据输入的耳类型和数据，生成相应的echarts配置项，并更新图标。

在模板中，我们使用v-model指令将输入框的值绑定到leftEarData和rightEarData变量上。然后，使用ref创建一个号象，将它绑定到图标容器上，以便在onMounted键子中初始化echarts图标。

最后，将组件引入到你的应用中，并使用<chart>标签来使用该组件。

<template>
  <div>
    <chart></chart>
  </div>
</template>

<script>
import Chart from './Chart.vue';

export default {
  components: {
    Chart,
  },
};
</script>

这样就可以在应用中使用Chart组件来展示电测听体检报告单图标了。输入左右耳的数据后，图标会实时更新。左耳的折线图使用×表示，右耳的折线图使用o表示。