echarts从数据库动态获取数据实现饼图和柱状图（Springboot）

最新推荐文章于 2024-04-04 09:41:07 发布

奇梦幽缘

最新推荐文章于 2024-04-04 09:41:07 发布

阅读量8k

点赞数 12

文章标签： echarts 前端 spring boot

本文链接：https://blog.csdn.net/qimengyouyuan/article/details/121877339

版权

创建数据库,自己随便插入一些数据。

CREATE TABLE `sign` (
  `id` int NOT NULL AUTO_INCREMENT,
  `name` varchar(20) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `num` varchar(20) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb3 COLLATE=utf8_unicode_ci;

1.主控制器，用于访问view.html


package com.zq.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class MainController {

    @RequestMapping("/view")
    public String myView(){
        return "view.html";
    }


}

2.控制器用于访问SignService层的getSign方法

package com.zq.controller;


import com.zq.pojo.Sign;
import com.zq.service.SignService;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.List;

@RestController
public class SignController {

    @Resource
    SignService signService;

    @RequestMapping("/s")
    public List<Sign> getSign(){
        return signService.getSign();

    }
}

3.接口定义getSign方法

package com.zq.service;

import com.zq.pojo.Sign;
import java.util.List;

public interface SignService {

    List<Sign> getSign();
}

4.接口的实现，调用dao层的mapper

package com.zq.service;

import com.zq.dao.SignMapper;
import com.zq.pojo.Sign;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

/**
 * @author qimeng
 */
@Service
public class SignServiceImpl implements SignService{


    /**
     * @author qimeng
     */

        @Resource
        SignMapper signMapper;

        @Override
        public List<Sign> getSign() {
            return signMapper.getSign();
        }


    }

5.mapper查询数据库内容

package com.zq.dao;

import com.zq.pojo.Sign;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

/**
 * @author qimeng
 */
@Mapper
public interface SignMapper {

    @Select("select * from sign")
    List<Sign> getSign();
}

6.index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>打卡人数可视化</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>

<body>
<div id="main" style="width: 600px; height: 400px;"></div>
</body>

<script type="text/javascript">
    //初始化echarts
    function init(myChart){
        let option = {
            title:{
                text:'ECharts 数据统计'
            },
            series:[{
                name:'访问量',
                type:'pie',
                radius:'50%',
                data:[
                    {value:0,name:'无'},
                ]
            }]
        };

        myChart.setOption(option);
    }

    //从数据库读取数据赋值给echarts
    function show(myChart){
        $.ajax({
            contentType : "application/json",
            type : "GET",
            url : "s",
            dataType : "json",
            success : function(data) {
                //创建一个数组，
                let Chart=[];
                for(let i=0;i<data.length;i++){
                    let obj={};
                    obj.name=data[i].name;
                    obj.value=data[i].num;
                    Chart[i]=obj;
                }

                myChart.setOption({
                    title:{
                        text:'打卡人数数据统计'
                    },
                    tooltip:{},
                    series:[{
                        name:'访问量',
                        type:'pie',
                         // radius:'10%',
                        data:Chart,
                    }]

                });

            }
        });
    }

    //初始化echarts实例
    let myChart = echarts.init(document.getElementById("main"));
    init(myChart);
    show(myChart);

</script>
</html>

7.view.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>打卡人数可视化</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>

<body>
<div id="main" style="width: 600px; height: 400px;"></div>
</body>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    $.ajax({
        contentType: "application/json",
        type: "GET",
        url: "s",
        dataType: "json",
        success: function (data) {

            let x = [];
            let y = [];

            for (let i = 0; i < data.length; i++) {
            //x[i]获取json的姓名，y[i]获取json的值
                x[i] = data[i].name;
                y[i] = data[i].num;


            }

            myChart.setOption({

                tooltip: {},
                label: {
                    show: true,
                    position:'top',
                },
                legend: {},
                xAxis: {
                    data: x
                },
                yAxis: {},
                series: [
                    {
                        colorBy:'data',
                        name: '打卡次数',
                        type: 'bar',
                        data: y

                    }
                ]
            });

        },
        error: function () {

        }
    })

</script>
</html>