springboot vue项目使用echarts折线图

首先，你需要在前端引入 ECharts 的库文件，可以通过 CDN 引入，也可以下载到本地引入。然后，你需要在 Vue 组件中引入 ECharts，并在 mounted 钩子函数中初始化图表。

下面是一个简单的示例代码：

<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'LineChart',
  data() {
    return {
      chartData: {
        xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        yData: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    }
  },
  mounted() {
    const chart = echarts.init(this.$refs.chart)
    chart.setOption({
      xAxis: {
        type: 'category',
        data: this.chartData.xData
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: this.chartData.yData,
        type: 'line'
      }]
    })
  }
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 300px;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>

这个示例代码用到了一个 LineChart 组件，其中 data() 函数中定义了图表的数据，mounted 钩子函数中初始化了图表，并设置了 x 轴、y 轴和数据系列。在模板中，我们使用 ref 属性来引用图表容器，然后在 mounted 钩子函数中初始化图表。注意，这里使用了 $refs 对象来获取 DOM 元素。

当你使用这个组件时，只需要将数据传递给它即可：

<template>
  <div>
    <line-chart :chartData="chartData"></line-chart>
  </div>
</template>

<script>
import LineChart from './LineChart'

export default {
  name: 'App',
  data() {
    return {
      chartData: {
        xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        yData: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    }
  },
  components: {
    LineChart
  }
}
</script>

这样，你就可以在你的 Spring Boot + Vue 项目中使用 ECharts 折线图了。