場景

?

若依前后端分離版本地搭建開發環境并運行項目的教程：

若依前后端分離版手把手教你本地搭建環境并運行項目_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"; import request from '@/utils/request' require("echarts/theme/macarons"); // echarts themeexport default {name: "twoZhuBarChart",data() {return {typeData: [{ product: "公眾號", 體重: 43, 身高: 85 },{ product: "霸道的程序猿", 體重: 43, 身高: 85 },],};},created() {this.getList().then((response) => {this.typeData[0].體重=response.data[0].weight;this.typeData[0].身高=response.data[0].height;this.typeData[1].體重=response.data[1].weight;this.typeData[1].身高=response.data[1].height;this.initChart(this.typeData);});},methods: {getList() {return request({url: "/echarts/getTwoZhuData",method: "get",});},initChart(typeData) {this.chart = echarts.init(this.$el, "macarons");this.chart.setOption({tooltip: {trigger: "axis",axisPointer: {// 坐標軸指示器，坐標軸觸發有效type: "shadow", // 默認為直線，可選為：'line' | 'shadow'},},grid: {top: 10,left: "2%",right: "2%",bottom: "3%",containLabel: true,},legend: {//圖例data: ["身高", "體重"],},xAxis: [{type: "category",data: ["公眾號", "霸道的程序猿"],axisPointer: {type: "shadow",},},],yAxis: [{type: "value",name: "單位：(kg/cm)",min: 0,max: 150,interval: 10,axisLabel: {formatter: "{value}",},},],dataset: {source: typeData,},series: [{name: "身高",type: "bar",barWidth: "40%",},{name: "體重",type: "bar",barWidth: "40%",},],});},}, }; </script>?

要實現給柱狀圖賦值，需要設置數據源為類似

????? typeData: [{ product: "公眾號", 體重: 43, 身高: 85 },{ product: "霸道的程序猿", 體重: 43, 身高: 85 },],

的對象數組格式。

2、上面頁面加載完之后調用后臺接口，后臺接口實現

package com.ruoyi.web.controller.system;import com.ruoyi.common.core.controller.BaseController; import com.ruoyi.common.core.domain.AjaxResult; import com.ruoyi.system.domain.TwoZhuModel; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.ArrayList; import java.util.List;@RestController @RequestMapping("/echarts") public class EchartsController extends BaseController {@GetMapping("/getTwoZhuData")public AjaxResult getTwoZhuData()? {List<TwoZhuModel> resultMap = new ArrayList<TwoZhuModel>();TwoZhuModel zhangsan=new TwoZhuModel();zhangsan.setName("公眾號");zhangsan.setHeight(100);zhangsan.setWeight(50);TwoZhuModel lisi = new TwoZhuModel();lisi.setName("霸道的程序猿");lisi.setHeight(66);lisi.setWeight(25);resultMap.add(zhangsan);resultMap.add(lisi);return AjaxResult.success(resultMap);}}

后臺構造兩個對象，每個對象有兩個屬性，對象實體聲明

package com.ruoyi.system.domain;import com.ruoyi.common.annotation.Excel; import com.ruoyi.common.core.domain.BaseEntity; import org.apache.commons.lang3.builder.ToStringBuilder; import org.apache.commons.lang3.builder.ToStringStyle;public class TwoZhuModel extends BaseEntity {private String name;private int weight;private int height;public String getName() {return name;}public void setName(String name) {this.name = name;}public int getWeight() {return weight;}public void setWeight(int weight) {this.weight = weight;}public int getHeight() {return height;}public void setHeight(int height) {this.height = height;} }

總結

以上是生活随笔為你收集整理的SpringBoot+Vue+Echarts实现双柱体柱状图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。