vue3点击按钮从后端获取xy轴数据更新echart折线图

在Vue3中，你可以使用axios等HTTP客户端库从后端获取数据，然后通过计算属性（Computed Property）处理这些数据以便于更新ECharts折线图。以下是基本步骤：

1. 安装依赖：
首先，确保已经安装了Vue、axios和ECharts。如果还没有，可以在项目中安装它们：

   npm install vue axios echarts

2. 创建实例：
在Vue组件中，创建一个axios实例用于发送请求：

   import axios from 'axios';
   
   const service = axios.create({
     baseURL: process.env.BASE_API, // API基础URL
   });

3. 获取数据：
添加一个方法来触发数据获取，并在点击事件回调中调用：

   methods: {
     fetchData() {
       service.get('/api/xy-data') // 替换为你实际的API路径
         .then(response => {
           this.xyData = response.data; // 假设后端返回的是一个包含x和y的数据数组
         })
         .catch(error => console.error('Error fetching data', error));
     }
   },

4. 更新ECharts：
在模板中绑定数据到图表，并使用计算属性实时更新数据：

   <template>
     <div ref="chart" style="width: 600px; height: 400px;"></div>
     <button @click="fetchData">获取数据</button>
   </template>

   <!-- 使用计算属性更新图表 -->
   <script setup>
   import { onMounted, ref } from 'vue';
   import * as ECharts from 'echarts';

   const chartRef = ref(null);
   let xyData = []; // 存储从服务器获取的数据

   // 计算属性，当数据变化时更新图表
   computed: {
     updatedChart() {
       if (chartRef.value && xyData.length > 0) {
         const chartInstance = ECharts.init(chartRef.value);
         chartInstance.setOption({
           xAxis: { data: xyData.map(item => item.x) }, // x轴数据
           yAxis: {},
           series: [{
             data: xyData.map(item => item.y), // y轴数据
             type: 'line'
           }]
         });
       }
     }
   },

   // 初始化图表
   onMounted() {
     if (chartRef.value) {
       initChart();
     }
   },
   
   // 其他辅助函数...
   </script>

5. 渲染ECharts图表：
在`mounted`生命周期钩子中初始化图表，这里省略了一些细节，如设置图表容器元素：

   function initChart() {
     // 初始化ECharts实例并绘制折线图
     const chartInstance = ECharts.init(chartRef.value);
     // 设置配置项...
     chartInstance.show();
   }

完成以上步骤后，每次点击按钮，都会触发`fetchData`方法从后端获取数据，并更新ECharts折线图。