vue+springboot的echarts的折线图已经固定好x轴为12个月，y轴为数据库的orders表的按照类型为String，格式为yyyy-MM-dd HH:mm:ss的paymentTime划分的order_price成的每个月的每个订单金额总和，如何实现前端与详细的后端

要实现前端Vue与后端SpringBoot的详细交互，你需要按如下步骤进行操作：

1. 在SpringBoot中编写API接口，用于查询数据库中订单金额数据并返回给前端。可以使用MyBatis等框架进行数据库操作。

@RestController
@RequestMapping("/api")
public class OrderController {
    
    @Autowired
    private OrderMapper orderMapper;
    
    @GetMapping("/orders")
    public List<Order> getOrders() {
        return orderMapper.selectOrders();
    }
}

其中，OrderMapper是一个MyBatis的Mapper接口，用于查询数据库中的订单金额数据。

2. 在Vue组件中使用axios等工具调用后端API接口。

mounted () {
  axios.get('/api/orders').then(res => {
    // 处理后端返回的数据
  })
}

其中，axios.get方法用于向后端API接口发送HTTP GET请求，并在请求成功后执行回调函数。

3. 在Vue组件中处理后端返回的数据，并使用Echarts插件绘制折线图。

mounted () {
  axios.get('/api/orders').then(res => {
    const data = res.data
    const xAxisData = [] // x轴数据
    const yAxisData = [] // y轴数据
    data.forEach(item => {
      xAxisData.push(item.month)
      yAxisData.push(item.total)
    })
    const chart = echarts.init(document.getElementById('chart-container'))
    const option = {
      xAxis: {
        type: 'category',
        data: xAxisData
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: yAxisData,
        type: 'line'
      }]
    }
    chart.setOption(option)
  })
}

其中，res.data是后端API接口返回的数据，可以根据实际情况进行处理。在上面的代码中，我们将数据分别保存到xAxisData和yAxisData数组中，并使用Echarts插件绘制折线图。

4. 在SpringBoot中处理前端传递的请求参数，并根据参数查询数据库中的订单金额数据。

@RestController
@RequestMapping("/api")
public class OrderController {
    
    @Autowired
    private OrderMapper orderMapper;
    
    @GetMapping("/orders")
    public List<Order> getOrders(@RequestParam("start") String start, @RequestParam("end") String end) {
        return orderMapper.selectOrdersByTime(start, end);
    }
}

其中，@RequestParam注解用于获取HTTP请求中的参数，start和end分别表示查询订单金额数据的起始时间和结束时间。orderMapper.selectOrdersByTime方法用于根据时间查询订单金额数据。

5. 在Vue组件中向后端API接口传递请求参数。

mounted () {
  const start = '2021-01'
  const end = '2021-12'
  axios.get('/api/orders', {
    params: {
      start: start,
      end: end
    }
  }).then(res => {
    // 处理后端返回的数据
  })
}

其中，axios.get方法的第二个参数是一个配置对象，params属性用于设置请求参数。在上面的代码中，我们向后端API接口传递了起始时间和结束时间。

通过以上步骤，你可以实现vue+springboot的echarts的折线图已经固定好x轴为12个月，y轴为数据库的orders表的按照类型为String，格式为yyyy-MM-dd HH:mm:ss的paymentTime划分的order_price成的每个月的每个订单金额总和，并且实现了前端与后端的详细交互。