SpringBoot+Vue+Echarts實現雙柱體柱狀圖

場景

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

在上面搭建架構的基礎上，實現使用Echarts獲取后台數據並顯示雙柱體的柱狀圖。

 

 

這里有兩個對象，每個對象都有身高和體重兩個屬性。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

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 theme

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