mky-vent-base/src/views/vent/testChart/index.vue

<template>
  <a-card style="background: #0b142b; border: 1px solid #2ef3ef">
    <FiberTempChart
      :x-axis-data="xAxisList"
      :series-data="tempValueList"
      :max-value="60"
      :min-value="20"
      title="光纤测温"
      height="440px"
      @chart-click="onChartClick"
    />
  </a-card>
</template>
<script setup>
import FiberTempChart from './FiberTempChart.vue';
const pointData = [
  { name: '测点01', temp: 24.2 },
  { name: '测点02', temp: 28.5 },
  { name: '测点03', temp: 32.1 },
  { name: '测点04', temp: 30.6 },
  { name: '测点05', temp: 26.8 },
  { name: '测点06', temp: 33.4 },
  { name: '测点07', temp: 26.9 },
  { name: '测点08', temp: 11.2 },
  { name: '测点09', temp: 40.5 },
  { name: '测点10', temp: 45.3 },
  { name: '测点11', temp: 38.7 },
  { name: '测点12', temp: 22.6 },
  { name: '测点13', temp: 51.8 },
  { name: '测点14', temp: 30.2 },
  { name: '测点15', temp: 80 }, // 超上限
  { name: '测点16', temp: 58.1 },
  { name: '测点17', temp: 48.6 },
  { name: '测点18', temp: 39.4 },
  { name: '测点19', temp: 34.7 },
  { name: '测点20', temp: 19.3 },
];

// 提取x轴、温度数组
const xAxisList = pointData.map((item) => item.name);
const tempValueList = pointData.map((item) => item.temp);

function onChartClick(params) {
  console.log('点击测点', params);
}
</script>