Echart展示数据库数据

最新推荐文章于 2024-01-22 09:00:00 发布

pdsu-wzj

最新推荐文章于 2024-01-22 09:00:00 发布

阅读量393

点赞数

分类专栏： echart可视化大屏文章标签： echarts mysql json jquery ajax

本文链接：https://blog.csdn.net/qq_45676798/article/details/118219695

版权

本文介绍如何利用Echarts库从MySQL数据库获取数据，并通过Ajax与JSON解析，展示动态图表。首先展示了最终的展示效果，接着详细列出项目的目录结构及关键源码。

摘要由CSDN通过智能技术生成

Echart展示数据库数据

1.先看结果
在这里插入图片描述

2.目录结构
在这里插入图片描述
3.源码

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Region {
    private String Atype;//物品
    private int Amount;//数量
}

public interface RegionService {
    List<Region> findAll();
}

@Service
public class RegionServiceImpl implements RegionService {
    @Autowired
    RegionMapper regionMapper;
    @Override
    public List<Region> findAll() {
        return regionMapper.findAll();
    }
}

@Mapper
public interface RegionMapper {
    List<Region> findAll();

}

@Controller
public class ControllerChart {
    @Autowired
    RegionServiceImpl regionService;
    @GetMapping("/k")
    @ResponseBody
    public List<Region> FindChart(){
        //直接返回查询出来的数据传给前端
        return regionService.findAll();
    }
}

<?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.mapper.RegionMapper">
    <select id="findAll" resultType="com.example.pojo.Region">
        select Atype,Amount from quyu;
    </select>
</mapper>

<!DOCTYPE html>
<html lang="zh-CN"  xmlns:th="http://www.thymeleaf.org"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
   <link rel="stylesheet" href="../static/css/index.css" />
  <script src="../static/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>

</head>
<body>
	
    <div class="bg-search-img">
        <div class="search-conent">
           <div class="search-logo">
                <img src="../static/google.jpeg" width="400" height="230">
            </div>
			
            <div class="search-btn">
                <form th:action="@{/allNews}">
                    <input type="text" class="search-text" />
                    <input type="submit" class="search-sub" value="检索" />
                </form>
            </div>
			<div style="padding-left:395px">
				<a href="advanced search.html" target='_blank' style=" text-decoration: none;color: #006CFA">高级检索</a>
				</div>
			
			
	<div id="main" style="width: 1150px;height:400px; padding-top: 65px"></div>
        </div>

    </div>

	  


	<script type="text/javascript">
	    // 基于准备好的dom，初始化echarts实例
        window.onload = function pie() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            //声明一个对象
            var list = [];
            var nus = [];
            $.ajax({
                async: true,            //异步请求
                data: {},
                //请求方式get
                type: "GET",
                //请求地址
                url: "http://localhost:8080/k",
                //数据，json字符串
                dataType: "json",
                //请求成功
                success: function (result) {
                    console.log(result);
                    //进行数据的遍历
                    $.each(result, function (index, item) {
                        //添加数据到对象
                        //物品名
                        list.push(item.atype);
                        //物品名和数量
                        nus.push({
                            value: item.amount,
                            name: item.atype
                        });
                    });
                    console.log(list);
                    console.log(nus);
                    myChart.hideLoading();    //隐藏加载动画


	    // 指定图表的配置项和数据
	    var option = {
	        color: ['#3398DB'],
	        tooltip: {
	            trigger: 'axis',
	            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
	                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	            }
	        },
	        grid: {
	            left: '15%',
	            right: '2%',
	            bottom: '3%',
	            containLabel: true
	        },
	        xAxis: [
	            {
	                type: 'category',
	                data: list,
	                axisTick: {
	                    alignWithLabel: true
	                }
	            }
	        ],
	        yAxis: [
	            {
	                type: 'value'
	            }
	        ],
	        series: [
	            {
	                name: '直接访问',
	                type: 'bar',
	                barWidth: '60%',
	                data: nus
	            }
	        ]
        };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };
	</script>


</body>
</html>

pdsu-wzj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echart展示数据库数据

Echart展示数据库数据1.先看结果2.目录结构3.源码@Data@NoArgsConstructor@AllArgsConstructorpublic class Region { private String Atype;//物品 private int Amount;//数量}public interface RegionService { List<Region> findAll();}@Servicepublic class
复制链接

扫一扫

专栏目录