echarts vue springboot

### 如何在 Vue 中使用 ECharts 并与 Spring Boot 后端进行数据交互

#### 在 main.js 文件中全局引入 ECharts

为了在整个 Vue 应用程序中方便地使用 ECharts，在 `main.js` 文件中可以这样配置：

import * as echarts from 'echarts';
// 将 echarts 实例挂载到 Vue 的原型上，使所有组件都可以通过 this.$echarts 访问[^1]
Vue.prototype.$echarts = echarts;

#### 创建并初始化图表实例

假设有一个名为 `ChartComponent.vue` 的单文件组件来展示图表。在这个组件里，可以在 `mounted()` 生命周期钩子内创建和初始化图表。

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

<script>
export default {
  name: "ChartComponent",
  mounted() {
    const chartInstance = this.$echarts.init(this.$refs.chartContainer);
    
    // 设置初始选项
    const option = {
      title: {
        text: 'ECharts 示例'
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [{
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    
    // 使用刚指定的配置项和数据显示图表。
    chartInstance.setOption(option);
  }
}
</script>

#### 获取来自 Spring Boot API 的动态数据

为了让图表显示的数据来源于服务器而不是静态硬编码，可以通过 Axios 发送 HTTP 请求给后端API获取最新数据，并更新图表的内容。

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

<script>
export default {
  name: "DynamicChartComponent",
  data(){
    return{
      dynamicData:[], // 存储从后端接收到的数据
      chartInstance:null,
    }
  },
  async mounted() {
    try {
      let response = await this.$axios.get('/api/data'); // 假设这是返回JSON格式数据的URL路径[^3]

      this.dynamicData = response.data;

      this.chartInstance = this.$echarts.init(this.$refs.dynamicChartContainer);

      const option = {
        ...
        xAxis: {data: Object.keys(this.dynamicData)},
        series: [{type:'line', data:Object.values(this.dynamicData)}],
        ...
      };

      this.chartInstance.setOption(option);
      
    } catch (err){
      console.error('Failed to fetch or set up the chart:', err);
    }
  }
};
</script>

上述代码片段展示了如何利用Axios库发起GET请求至 `/api/data` 路径下的Spring Boot RESTful Web Service 来取得所需的数据集，并将其应用到 ECharts 图表之中。