Spring boot + Echarts 制作柱状图数据

最新推荐文章于 2022-11-29 15:51:23 发布

游戏人生12个

最新推荐文章于 2022-11-29 15:51:23 发布

阅读量2k

点赞数 1

文章标签： Echarts Springboot

本文链接：https://blog.csdn.net/weixin_44422324/article/details/103049166

版权

本篇文章是Springboot + Echarts 写的一个柱状图

下面进入主题
使用技术:
后台 Springboot +JPA
数据库 mysql

首先需要去Echarts官方找到需要的素材模板
并制作并生成一个 echarts.min.js 文件
Echarts 官方链接
创建Spring boot项目
创建一个简单的表

在Springboot目录下创建
在这里插入图片描述
接下来后台调用查询方法就不写了调个Controller吧

package cn.xiaohe.Controller;

import cn.xiaohe.Service.EchartsService;

import cn.xiaohe.entity.Kk;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@Controller
public class EchartsController {

    @Autowired
    EchartsService EchartsService;
	
	//进入demo页面 
    @RequestMapping("demo")
    public String demo(){
        return "demo";
    }
	//查询信息
    @GetMapping("/list")
    @ResponseBody
    public List<Kk> findAll(){
        List<Kk> list = EchartsService.findAll();
        return list;
    }
}

在html中引入三个文件

 	<script src="echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

下面是一个主要实现页面
不解释了就实现代码时顺便把注释也一起打上了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<!-- 为 ECharts做个有长宽高的大小盒子 -->
<div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>

<script type="text/javascript">
    $(function(){
        var myCharts=echarts.init(document.getElementById('main'));
        myCharts.setOption({
            color: ['#3398DB'],
            //设置标题
            title:{
                text:'ECharts 货物流动'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            //坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线
                }
            },
            legend: {
                data: ['货物']
            },
            xAxis : {
                data : []
            },
            yAxis : {

            },
            series : [
                {
                    name:'货物',
                    type:'bar',
                    data:[]
                }
            ]
        });
		
        //加载时显示loading动画
        myCharts.showLoading();
        //放x轴值得姓名的数组
        var name=[];
       
        //放y轴值得货物数量的数组
        var value=[];
       
        //利用ajax从后台给数组存值
        $.ajax({
            type: "get",
            url: "/list",     //请求发送到Controller list处
            dataType: "json",        //返回数据形式为json
            success: function (data) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $(data).each(function(i,e){
                    name.push(e.name);    //取出姓名并存入数组
                    value.push(e.value);     //取出货物数量并存入数组
                });
                myCharts.hideLoading();    //隐藏加载动画
                myCharts.setOption({        //加载数据图表
                    xAxis: {
                        data: name
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '货物',
                        type:'bar',
                        barWidth: '60%',
                        data: value,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,       //开启显示
                                    position: 'top',  //在上方显示
                                    textStyle: {      //数值样式
                                        color: 'black',
                                        fontSize: 12
                                    }
                                }
                            }
                        }

                    }]
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myCharts.hideLoading();
            }
        })
    });
</script>
</body>
</html>