场景

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

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

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

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

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

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

新建组件BarChart.vue

要实现给柱状图赋值，需要设置数据源为类似

      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 resultMap = new ArrayList();
        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;
    }
}