SpringBoot+Vue+Echarts实现双柱体柱状图

场景

 

若依前后端分离版本地搭建开发环境并运行项目的教程：

若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面搭建架构的基础上，实现使用Echarts获取后台数据并显示双柱体的柱状图。

这里有两个对象，每个对象都有身高和体重两个属性。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、若依框架已经集成了Echarts不用再重复引进。

新建组件BarChart.vue

​
<template>
  <div :style="{ height: '200px', width: '400px' }" />
</template>

<script>
import echarts from "echarts&