Echarts集成springboot+mybatis（二）

本篇文章主要用于记录自己新学的东西，为什么用springboot+mybatis呢，最近用的比较多，而且也很方便，搭建也很快，springboot也是目前比较火的框架，而本篇展示只是把数据从数据库获取返回给echarts展示的demo，并没有过多业务
话不多说，开始：一个启动类，mysql包，mybatis包什么的maven弄一下，直接上代码，很简单的
model
sorceResult

//存储饼状图属性到result返回给前端ajax接收
public class sorceResult {
    public int Ksid;

    public sorceResult(int ksid, int stuid, String kname, int value, String name) {
        Ksid = ksid;
        Stuid = stuid;
        Kname = kname;
        this.value = value;
        this.name = name;
    }

    public int getKsid() {
        return Ksid;
    }

    public void setKsid(int ksid) {
        Ksid = ksid;
    }

    public int Stuid;
    public String  Kname;
    public sorceResult(String kname) {

        Kname = kname;
    }

    @Override
    public int hashCode() {
        return super.hashCode();
    }

    @Override
    public boolean equals(Object obj) {
        return super.equals(obj);
    }

    @Override
    protected Object clone() throws CloneNotSupportedException {
        return super.clone();
    }

    @Override
    protected void finalize() throws Throwable {
        super.finalize();
    }

    public int getStuid() {
        return Stuid;
    }

    public void setStuid(int stuid) {
        Stuid = stuid;
    }

    public String getKname() {
        return Kname;
    }

    public void setKname(String kname) {
        Kname = kname;
    }




    public int value;
    public String name;



    public int getValue() {
        return value;
    }

    public void setValue(int value) {
        this.value = value;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public sorceResult(int value, String name) {
        this.value = value;
        this.name = name;
    }

    @Override
    public String toString() {
        return "sorceResult{" +
                "value=" + value +
                ", name='" + name + '\'' +
                '}';
    }
}

TotalAchie

public class TotalAchie {

    private Integer Ksid;
    private Integer Stuid;
    private Integer xztfenshu;
    private Integer zhgfenshu;
    private Integer zongfenshu;
    private String Kname;
    private Integer xztbiaozhun;
    private Integer zhgbiaozhun;
    private Integer zongbiaozhun;

    @Override
    public String toString() {
        return "zongcj{" +
                "Ksid=" + Ksid +
                ", Stuid=" + Stuid +
                ", xztfenshu=" + xztfenshu +
                ", zhgfenshu=" + zhgfenshu +
                ", zongfenshu=" + zongfenshu +
                ", Kname='" + Kname + '\'' +
                ", xztbiaozhun=" + xztbiaozhun +
                ", zhgbiaozhun=" + zhgbiaozhun +
                ", zongbiaozhun=" + zongbiaozhun +
                '}';
    }

    public Integer getZhgfenshu() {
        return zhgfenshu;
    }

    public void setZhgfenshu(Integer zhgfenshu) {
        this.zhgfenshu = zhgfenshu;
    }

    public String getKname() {
        return Kname;
    }

    public void setKname(String kname) {
        Kname = kname;
    }

    public Integer getXztbiaozhun() {
        return xztbiaozhun;
    }

    public void setXztbiaozhun(Integer xztbiaozhun) {
        this.xztbiaozhun = xztbiaozhun;
    }

    public Integer getZhgbiaozhun() {
        return zhgbiaozhun;
    }

    public void setZhgbiaozhun(Integer zhgbiaozhun) {
        this.zhgbiaozhun = zhgbiaozhun;
    }

    public Integer getZongbiaozhun() {
        return zongbiaozhun;
    }

    public void setZongbiaozhun(Integer zongbiaozhun) {
        this.zongbiaozhun = zongbiaozhun;
    }

    public Integer getKsid() {
        return Ksid;
    }

    public void setKsid(Integer ksid) {
        Ksid = ksid;
    }

    public Integer getStuid() {
        return Stuid;
    }

    public void setStuid(Integer stuid) {
        Stuid = stuid;
    }

    public Integer getXztfenshu() {
        return xztfenshu;
    }

    public void setXztfenshu(Integer xztfenshu) {
        this.xztfenshu = xztfenshu;
    }

    public Integer getZhegfenshu() {
        return zhgfenshu;
    }

    public void setZhegfenshu(Integer zhegfenshu) {
        this.zhgfenshu = zhegfenshu;
    }

    public Integer getZongfenshu() {
        return zongfenshu;
    }

    public void setZongfenshu(Integer zongfenshu) {
        this.zongfenshu = zongfenshu;
    }
}

dao

@Mapper
public interface TotalAchieDao {
    List<TotalAchie> selectfenshu(int Stuid);
}

mapper

  <select id="selectfenshu" resultType="com.demo.model.TotalAchie">
        SELECT * FROM zongcj WHERE Stuid = #{Stuid};
    </select>

server

public interface TotalAchieService {
    List<TotalAchie> selectfenshu(int Stuid);
}

serverimpl

@Service
public class TotalAchieServiceImpl implements TotalAchieService {

    @Autowired
    private TotalAchieDao totalAchieDao;
    @Override
    public List<TotalAchie> selectfenshu(int Stuid) {
        return totalAchieDao.selectfenshu(Stuid);
    }
}

controller

@Controller
public class TotalAchieEchartsController {
    @Autowired
    private TotalAchieService totalAchieService;

    /**
     * 柱形图
     * @return
     */
    @PostMapping("/histogram")
    @ResponseBody
    public List<sorceResult> getScore(Integer Stuid) {
        List<TotalAchie> zs= totalAchieService.selectfenshu(Stuid);
        List<sorceResult> results = new ArrayList<sorceResult>();
        System.out.println(zs);
        for (TotalAchie zong : zs) {
            //封装到一个result
        sorceResult result = new sorceResult(zong.getZongfenshu(),zong.getKname());
            results.add(result);
        }
        return results;
    }
}

后台就是获取个数据t，一个查询调出放进results，前端用ajax从url指定获取results集合
Histogram.js

(function (window) {
////////////////////////////柱状图
    var init = function (Stuid) {


        var myChart = echarts.init(document.getElementById('main'));
        // 显示标题，图例和空的坐标轴
        myChart.setOption({
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {},
            legend: {
                data: ['成绩']
            },
            xAxis: {
                data: [],
                axisLabel: {
                    interval:0,
                    // rotate:45, //代表逆时针旋转45度
                }
            },
            yAxis: {},
            series: [{
                name: '成绩',
                type: 'bar',
                data: []
            }]
        });

        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

        var names = [];    //类别数组（实际用来盛放X轴坐标值）
        var nums = [];    //销量数组（实际用来盛放Y坐标值）

        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/histogram",    //请求发送到TestServlet处
            data: {
                Stuid:Stuid

            },
            dataType: "json",        //返回数据形式为json
            success: function (results) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (results!=null) {

                    for (var i = 0; i < results.length; i++) {

                        names.push(results[i].name);    //挨个取出类别并填入类别数组
                    }
                    for (var i = 0; i < results.length; i++) {
                        nums.push(results[i].value);    //挨个取出销量并填入销量数组
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{

                            // 根据名字对应到相应的系列
                            name: '成绩',
                            data: nums
                        }]
                    });

                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })
    };
    window.init = init;
}(window));

说白了就是从后台获取，通过ajax传出，把值放到echarts的data里面。

一个Echarts+springboot+mybatis的demo就完成啦