場景

?

若依前后端分離版本地搭建開發(fā)環(huán)境并運(yùn)行項(xiàng)目的教程：

若依前后端分離版手把手教你本地搭建環(huán)境并運(yùn)行項(xiàng)目_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面搭建架構(gòu)的基礎(chǔ)上，實(shí)現(xiàn)使用Echarts獲取后臺(tái)數(shù)據(jù)并顯示雙柱體的柱狀圖。

這里有兩個(gè)對(duì)象，每個(gè)對(duì)象都有身高和體重兩個(gè)屬性。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

1、若依框架已經(jīng)集成了Echarts不用再重復(fù)引進(jìn)。

新建組件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: "公眾號(hào)", 體重: 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: {// 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效type: "shadow", // 默認(rèn)為直線，可選為：'line' | 'shadow'},},grid: {top: 10,left: "2%",right: "2%",bottom: "3%",containLabel: true,},legend: {//圖例data: ["身高", "體重"],},xAxis: [{type: "category",data: ["公眾號(hào)", "霸道的程序猿"],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>?

要實(shí)現(xiàn)給柱狀圖賦值，需要設(shè)置數(shù)據(jù)源為類似

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

的對(duì)象數(shù)組格式。

2、上面頁面加載完之后調(diào)用后臺(tái)接口，后臺(tái)接口實(shí)現(xiàn)

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("公眾號(hào)");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);}}

后臺(tái)構(gòu)造兩個(gè)對(duì)象，每個(gè)對(duì)象有兩個(gè)屬性，對(duì)象實(shí)體聲明

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;} }

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。