从后端数据库获取数据并传值到前端vue项目的echarts柱状图/折线图/饼图里

不同图表的数据获取有一定的区别

在这些区别上花了不少功夫试验，把最后成功的方法做个记录，如果有类似项目要做的话，也可看看当个参考。

后端

后端都大同小异，方法上没有区别，在这里以柱状图为例。

sql：数据库的表格先写好，名称、类型、数据，然后连接数据库

用的是Navicat写，表名：sys_mapbar

在IDEA里，写XML文件，与数据库调用直接相关的语句

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jdy.project.system.mapper.SysMapBarMapper">

    <resultMap type="SysMapBar" id="SysMapBarResult">
        <result property="barInCount"   column="bar_incount"/>
        <result property="barOutCount"  column="bar_outcount"/>
        <result property="barDate"      column="bar_date"/>
    </resultMap>

    <sql id="selectSysMapBarVo">
        select bar_incount,bar_outcount,bar_date from sys_mapbar
    </sql>

    <select id="selectSysMapBarList" parameterType="SysMapBar" resultMap="SysMapBarResult">
        <include refid="selectSysMapBarVo"/>
        <where>
            <if test="barInCount != null and barInCount != ''">and bar_incount = #{
   barInCount}</if>
            <if test="barOutCount != null and barOutCount != ''">and bar_outcount = #{
   barOutCount}</if>
            <if test="barDate != null and barDate != ''">and bar_date = #{
   barDate}</if>
        </where>
    </select>

</mapper>

然后vo实体类和Mapper方法，

//vo实体类，set/get/toString方法
public class SysMapBar extends BaseEntity {
   

    @Excel(name = "入库数量")
    private String barInCount;
    @Excel(name = "出库数量")
    private String barOutCount;
    @Excel(name = "日期")
    private String barDate;

    public String getBarInCount() {
   
        return barInCount;
    }

    public void setBarInCount(String barInCount) {
   
        this.barInCount = barInCount;
    }

    public String getBarOutCount() {
   
        return barOutCount;
    }

    public void setBarOutCount(String barOutCount) {
   
        this.barOutCount = barOutCount;
    }

    public String getBarDate() {
   
        return barDate;
    }

    public void setBarDate(String barDate) {
   
        this.barDate = barDate;
    }

    @Override
    public String toString() {
   
        return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE)
                .append("barInCount", getBarInCount())
                .append("barOutCount", getBarOutCount())
                .append("barDate", getBarDate())
                .toString();
    }
}

//Mapper方法
public interface SysMapBarMapper {
   

    public List<SysMapBar> selectSysMapBarList(SysMapBar sysMapBar);
}

Mapper层相当于dao层，对数据库进行数据持久化操作，方法语句直接针对数据库操作，而Service层针对Controller，Service的impl是把Mapper和Service进行整合的文件。

然后写Service和ServiceImpl，这些文件写的顺序不一定，自己的逻辑不会混乱就行

//Service
public interface ISysMapBarService {
   

    public List<SysMapBar> selectSysMapBarList(SysMapBar sysMapBar);

}

//ServiceImpl
@Service
public class SysMapBarServiceImpl implements ISysMapBarService {
   
    @Autowired            //@Autowired 注释，它可以对类成员变量、方法及构造函数进行标注，完成自动装配的工作。
    private SysMapBarMapper sysMapBarMapper;

    @Override             //一般用途:帮助自己检查是否正确的复写了父类中已有的方法告诉读代码的人，这是一个复写的方法
    public List<SysMapBar> selectSysMapBarList(SysMapBar sysMapBar) {
   
        return sysMapBarMapper.selectSysMapBarList(sysMapBar);
    }
}

最后是Controller，配置接口路径

//Controller
@RestController
@RequestMapping("/dashboard/barchart")
public class SysMapBarController extends BaseController {
   

    @Autowired
    private ISysMapBarService sysMapBarService;

    @ResponseBody
    @PreAuthorize("@ss.hasPermi('dashboard:barchart:listBar')")     //权限访问设置
    @GetMapping("/listBar" )
    public TableDataInfo listBar(SysMapBar sysMapBar)