Echarts连接数据库使用Ajax的简单使用

最新推荐文章于 2023-11-28 14:20:06 发布

夜雨微澜°

最新推荐文章于 2023-11-28 14:20:06 发布

阅读量3.2k

点赞数 7

分类专栏： Echarts 文章标签： java 开发语言 echarts

本文链接：https://blog.csdn.net/weixin_57504000/article/details/124557906

版权

Echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、项目环境

IDEA2019.3.3
MySql 5.7
SSM
echarts.js

二、柱状图简单案例

1.创建一个book表

2.后台准备

book实体类：

public class Book {
    private Integer bid;

    private String bname;

    private String btype;

    private Integer bnumber;

    public Book(Integer bid, String bname, String btype, Integer bnumber) {
        this.bid = bid;
        this.bname = bname;
        this.btype = btype;
        this.bnumber = bnumber;
    }

    public Book() {
        super();
    }

    public Integer getBid() {
        return bid;
    }

    public void setBid(Integer bid) {
        this.bid = bid;
    }

    public String getBname() {
        return bname;
    }

    public void setBname(String bname) {
        this.bname = bname;
    }

    public String getBtype() {
        return btype;
    }

    public void setBtype(String btype) {
        this.btype = btype;
    }

    public Integer getBnumber() {
        return bnumber;
    }

    public void setBnumber(Integer bnumber) {
        this.bnumber = bnumber;
    }
}

mapper层：

@Repository
public interface BookMapper {
    List<Book> selectAll();
}

service层：

public interface IBookService {
    List<Book> selectAll();
}

service实现类：

@Service
public class BookServiceImpl implements IBookService {
    @Autowired
    private BookMapper bookMapper;

    @Override
    public List<Book> selectAll() {
        return bookMapper.selectAll();
    }
}

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.zking.news.mapper.BookMapper" >
  <resultMap id="BaseResultMap" type="com.zking.news.model.Book" >
    <constructor >
      <idArg column="bid" jdbcType="INTEGER" javaType="java.lang.Integer" />
      <arg column="bname" jdbcType="VARCHAR" javaType="java.lang.String" />
      <arg column="btype" jdbcType="VARCHAR" javaType="java.lang.String" />
      <arg column="bnumber" jdbcType="INTEGER" javaType="java.lang.Integer" />
    </constructor>
  </resultMap>
  <sql id="Base_Column_List" >
    bid, bname, btype, bnumber
  </sql>
    <select id="selectAll" resultType="com.zking.news.model.Book">
      select * from book
    </select>
</mapper>

Controller层：

@Controller
public class IndexController {

    @Autowired
    private IBookService bookService;

    @RequestMapping("/All")
    public String toAll(){
        return "echarts";
    }

    @RequestMapping("/getAll")
    @ResponseBody
    public List<Book> selectAll(){
        List<Book> books = bookService.selectAll();
        System.out.println("books"+books);
        return books;
    };

}

三、前台页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <%@include file="/common/head.jsp"%>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" onclick="year()" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    function year(){
        var ctx = "${pageContext.request.contextPath}";
        var da = [];
        var nums = [];
        //这里是根据下拉框的内容进行柱形数据转化的
        $.ajax({
            url:ctx+'/getAll',//要请求的服务器url
            async:true,   //是否为异步请求
            cache:false,  //是否缓存结果
            type:"POST", //请求方式为POST
            dataType:"json",   //服务器返回的数据是什么类型
            success:function(result){  //这个方法会在服务器执行成功是被调用 ，参数result就是服务器返回的值(现在是json类型)
                var rows = result;
                console.log(result)
                //遍历循环从后台传过来的数据，将要用的数据放到定义好的数组中,不然获取不到值
                for(var i = rows.length-1;i>=0;i--){
                    da.push(rows[i].bname);
                }
                for(var i = rows.length-1;i>=0;i--){
                    nums.push(rows[i].bnumber);
                }
                if(result){
                    myChart.setOption({        //给echarts图标赋值
                        xAxis: {
                            data: da
                        },
                        series: [{
                            data: nums
                        }]
                    });
                }else{
                    alert("网页错误，请重写刷新网站")
                }
            }
        })
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '书本销量分析'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: da,
                axisLabel : {//标签内容太长的解决方案  坐标轴刻度标签的相关设置。
                    interval:0,
                    rotate:"45"
                }
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',//折线line 柱形bar			         data: nums,
                itemStyle : {//设置折线的颜色，点的颜色
                    normal : {
                        color:'#1A94E6'
                    },
                    lineStyle:{
                        color:'#1A94E6'
                    }
                }

            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>
</body>
</html>

效果：

博主水平有限，难免有错。欢迎评论交流

夜雨微澜°

关注

7
点赞
踩
44

收藏

觉得还不错? 一键收藏
0
评论
Echarts连接数据库使用Ajax的简单使用

一、项目环境IDEA2019.3.3 MySql 5.7 SSM echarts.js二、柱状图简单案例1.创建一个book表2.后台准备book实体类：public class Book { private Integer bid; private String bname; private String btype; private Integer bnumber; public Book(Integer bid, S.
复制链接

扫一扫