Echart显示后台数据

最新推荐文章于 2024-05-27 10:11:36 发布

lzm990311

最新推荐文章于 2024-05-27 10:11:36 发布

阅读量499

点赞数

分类专栏：毕业设计

本文链接：https://blog.csdn.net/lzm123456lq/article/details/105308368

版权

毕业设计专栏收录该内容

7 篇文章 3 订阅

订阅专栏

首先下载插件
地址

导入到你的项目中去
在这里插入图片描述

<%--
  Created by IntelliJ IDEA.
  User: 廖泽铭
  Date: 2020/4/4
  Time: 10:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<head>
    <title>Title</title>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main"  style="width: 800px;height:460px;margin: 100px">
    23111111111
</div>
</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption({
        title:{
            text:'2020维修量统计'
        },
        tooltip:{

        },
        legend:{
            data:['销量']
        },
        xAxis:{
            data:[]
        },
        yAxis:{

        },
        series:[
            {
                name:'销量',
                type:'bar',
                data:[]
            },
        ]
    });



    $.post(
        "${pageContext.request.contextPath}/getFixNumber.action", function(data){
            var xData = [];
            var yData = [];
            for(var i = 0;i<data.length;i++){
                    xData.push(data[i]['month'])
                // if(data[i]['subject_num'] !== null) {
                    yData.push(data[i]['fixNumber']);
                // }
            }
            myChart.setOption({
                xAxis:{
                    data:xData
                },
                series:[
                    {
                        name:'维修量',
                        data:yData
                    },
                ]
            });
        },
        "json"
    )

</script>
</html>

我现在想把每月的维修量用图表显示
因为我们要返回这样的数据
在这里插入图片描述
建立pojo文件

package com.lzm.pojo;

/**
 * @author lzm
 * @create 2020- 04- 04- 11:32
 */
public class FixNumber {
    int month;

    int fixNumber;

    public int getMonth() {
        return month;
    }

    public void setMonth(int month) {
        this.month = month;
    }

    public int getFixNumber() {
        return fixNumber;
    }

    public void setFixNumber(int fixNumber) {
        this.fixNumber = fixNumber;
    }
}

    @RequestMapping(value="/getFixNumber.action")
    @ResponseBody
    public List<FixNumber> getFixNumber() {
        List<FixNumber> fixNumberByMonth = analysisService.getFixNumberByMonth();
        return fixNumberByMonth;

    }

package com.lzm.service.Implement;

import com.lzm.mapper.TroubleInfoMapper;
import com.lzm.pojo.FixNumber;
import com.lzm.pojo.TroubleInfo;
import com.lzm.pojo.TroubleInfoExample;
import com.lzm.service.Interface.AnalysisService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;

import java.util.*;

/**
 * @author lzm
 * @create 2020- 04- 04- 11:36
 */
@Controller
public class AnalysisServiceImpl implements AnalysisService {
    @Autowired
    private TroubleInfoMapper troubleInfoMapper;
    @Override
    public List<FixNumber> getFixNumberByMonth() {
        int[] res=new int[12];
        List<FixNumber> fixNumbers=new ArrayList<>();
        TroubleInfoExample troubleInfoExample=new TroubleInfoExample();
        List<TroubleInfo> troubleInfos = troubleInfoMapper.selectByExample(troubleInfoExample);
        for (TroubleInfo troubleInfo:troubleInfos)
        {

            Calendar cal = Calendar.getInstance();
            Date date = troubleInfo.getDate();
            cal.setTime(date);
            int month = cal.get(Calendar.MONTH)+1;
            res[month]++;
        }
        for (int i = 1; i <=12 ; i++) {
           FixNumber fixNumber=new FixNumber();
           fixNumber.setMonth(i);
           fixNumber.setFixNumber(res[i-1]);
           fixNumbers.add(fixNumber);
        }
        return fixNumbers;
    }
}

其实返回数据很简单，主要是数据填充

 $.post(
        "${pageContext.request.contextPath}/getFixNumber.action", function(data){
            var xData = [];
            var yData = [];
            for(var i = 0;i<data.length;i++){
                    xData.push(data[i]['month'])
                // if(data[i]['subject_num'] !== null) {
                    yData.push(data[i]['fixNumber']);
                // }
            }
            myChart.setOption({
                xAxis:{
                    data:xData
                },
                series:[
                    {
                        name:'维修量',
                        data:yData
                    },
                ]
            });
        },
        "json"
    )