VUE+Echarts+SpringBoot：后端获取数据库中的值传给前端图表展示

一、后端部分

由于逻辑比较简单，没有写service层。

数据库中的数据和最后的结果如下所示：

项目框架如下用到下面四个文件

1.实体类Echarts

package com.example.analysis.bean;

public class Echarts{
    private Integer id;
    private String name;
    private Integer num;

    public Echarts(String name, Integer num) {
        this.name = name;
        this.num = num;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

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

    public Integer getNum() {
        return num;
    }

    public void setNum(Integer num) {
        this.num = num;
    }

    @Override
    public String toString() {
        return "Echarts{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", num=" + num +
                '}';
    }
}

2.controller层：EchartsController

package com.example.analysis.controller;
import com.alibaba.fastjson.JSON;
import com.example.analysis.bean.Disease;
import com.example.analysis.bean.Echarts;
import com.example.analysis.dao.EchartsDao;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

@RestController
public class EchartsController {

    @Autowired
    private EchartsDao echartsDao;
    @RequestMapping("/echarts")
    public String getEcharts(){

        List<Echarts> echarts = echartsDao.getAllEcharts();
        //System.out.println(echarts);

        HashMap<String, Object> res = new HashMap<>();
        List<String> name = new ArrayList<>();
        List<Integer> num = new ArrayList<>();

        for( int i = 0; i < echarts.size(); i++ ){
            name.add(echarts.get(i).getName());
            num.add(echarts.get(i).getNum());
        }
        res.put("name",name);
        res.put("num",num);
        System.out.println(res);
        String res_string = JSON.toJSONString(res);
        return res_string;

    }
}

3.dao层

package com.example.analysis.dao;
import com.example.analysis.bean.Echarts;
import com.example.analysis.bean.User;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface EchartsDao {
    public List<Echarts> getAllEcharts();
}

4.mapper层

<?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.example.analysis.dao.EchartsDao">
    <select id="getAllEcharts" resultType="com.example.analysis.bean.Echarts">
        SELECT name,num FROM echarts
    </select>
</mapper>

二、前端部分：Vue+Echarts显示图表

这部分花费了非常多的时间，看了网上超级多的博客，感觉写的都不好，这里建议先看下echarts的使用方式以后，获取到后台传来的数据后在看。

<template>
    <div id="app">
        <div id="main" style="width:600px;height:400px"></div>
    </div>
</template>
<script>
    import echarts from "echarts";
    export default {
        name: "App",
        created() {
            this.getAllEcharts();
        },
        data() {
            return {
                name: [],
                num: [],
            };
        },
        methods: {
            async getAllEcharts() {
                const {data: res1} = await this.$http.get("echarts");
                console.log(res1);
                this.name = res1.name;
                this.num = res1.num;
                this.setChart();
            },
            setChart() {
                // 基于准备好的dom，初始化echarts实例
                this.chart = echarts.init(document.getElementById('main'))
                // console.log(this.chart)
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: "疾病人数分布"
                    },
                    tooltip: {},
                    legend: {
                        data: ["人数"]
                    },
                    xAxis: {
                        data: this.name,
                    },
                    yAxis: {},
                    series: [
                        {
                            name: "人数",
                            type: "bar",
                            data: this.num,
                        }
                    ],
                }
                this.chart.setOption(option);
            },
            mounted() {
                this.$nextTick(function () {
                    this.drawPid("main");
                });
            }
        }
    }
</script>

2.main.js

引入echarts组件，具体echarts的安装方式网上很多，安装即可。

import echarts from "echarts"
Vue.prototype.$echarts = echarts

然后在in.dex里面引入前端映射的路径即可。