首页在vite+vue中，页面上有多个从后端传过来的id组成的div盒子，每个div盒子都有其独有的id，通过点击该div盒子，跳转页面，拿到该设备的id，然后根据id拿到后端的数据，并显示在页面上的echart图标上面

在vite+vue中，页面上有多个从后端传过来的id组成的div盒子，每个div盒子都有其独有的id，通过点击该div盒子，跳转页面，拿到该设备的id，然后根据id拿到后端的数据，并显示在页面上的echart图标上面

时间: 2024-12-21 12:22:53 浏览: 51

在Vite + Vue项目中，你可以使用Vue的组件化思想以及axios等库来处理这个需求。首先，你需要做到以下步骤： 1. **数据获取**: 创建一个Vue组件，比如`DeviceInfo.vue`，在这个组件里，使用`setup()`钩子函数和`ref`来管理设备ID和对应的图表数据。 ```javascript <script setup> import axios from 'axios'; const deviceIdRef = ref(''); const chartDataRef = reactive({}); async function fetchData(id) { try { const response = await axios.get(`api/device-data/${id}`); chartDataRef.data = response.data; } catch (error) { console.error('Error fetching data:', error); } } </script> ``` 2. **点击事件处理**: 在组件模板部分，为每个div盒子添加点击事件监听，当点击时传递当前div的id，并调用`fetchData`方法。 ```html <div v-for="(device, index) in devices" :key="index" @click="fetchData(device.id)"> <div id="box-{{ device.id }}">{{ device.id }}</div> </div> ``` 3. **更新图表**: 当数据获取成功后，在`mounted()`生命周期钩子或者`data`方法中初始化图表，并在`fetchData`完成后更新图表。 ```html <template>  <echarts :options="chartOptions"></echarts> </template> <script setup> // ...其他代码... export default { mounted() { if (chartDataRef.data) { // 初始化图表并设置初始数据 initChart(chartDataRef.data); } }, methods: { async fetchData(id) { // ...fetchData逻辑... initChart(chartDataRef.data); // 更新图表 }, }, }; function initChart(data) { // 根据获取到的数据动态创建ECharts选项 this.chartOptions = { // 数据配置、图表类型等... }; } </script> ```

阅读全文