vue3后端数据渲染echarts

### Vue3 中使用 ECharts 渲染后端数据

在 Vue3 项目中集成 ECharts 并从后端获取数据显示，涉及几个关键部分：安装依赖库、创建组件结构、编写异步请求逻辑以及配置 ECharts 实例。

#### 安装必要的包
为了使 ECharts 能够正常工作，首先需要确保已经安装了 `echarts` 和 `axios` (用于发起 HTTP 请求):

npm install echarts axios

#### 创建 ECharts 组件
定义一个新的单文件组件 (`EchartComponent.vue`) 来封装所有的绘图逻辑：

<template>
  <div ref="main" style="width: 600px;height:400px;"></div>
</template>

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

const main = ref(null);
let chartInstance;

onMounted(() => {
  const initChart = () => {
    if (!chartInstance && main.value) {
      chartInstance = echarts.init(main.value);
      updateChart();
    }
  };

  const fetchData = async () => {
    try {
      const response = await axios.get('/api/data'); // 替换成实际API地址
      return response.data;
    } catch (error) {
      console.error("Failed to fetch data", error);
    }
  };

  const updateChart = async () => {
    const tableData = await fetchData();

    const option = {
      title: {
        text: '动态加载的数据'
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: tableData.salesVolumes || []
      }]
    };
    
    chartInstance.setOption(option);
  };

  initChart();
});

watchEffect(updateChart);

// 销毁图表实例以防内存泄漏
defineExpose({ destroy: () => chartInstance?.dispose() });
</script>

此代码片段展示了如何利用 Composition API 构建响应式的 ECharts 图表。每当组件挂载时会调用 `initChart()` 函数初始化 ECharts；而当检测到状态变化时，则触发 `updateChart()` 方法重新设置选项以反映最新的数据[^1]。

#### 配置路由与视图
最后，在应用的主要布局文件里引入上述自定义的 ECharts 组件即可完成整个流程的设计[^2]。