社区首页 >专栏 >ECharts与java后台交互绘制图表

ECharts与java后台交互绘制图表

别团等shy哥发育

发布于 2023-02-25 09:26:29

81601

代码可运行

文章被收录于专栏：全栈开发那些事全栈开发那些事

运行总次数：1

代码可运行

ECharts与java后台交互绘制图表

效果如下:

1、test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Echarts文件-->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height: 400px;"></div>


<script type="text/javascript">
    var myChart=echarts.init(document.getElementById('main'));
    //显示标题，图例和空的坐标轴
    myChart.setOption({
        title : {
            text : 'ECharts'
        },
        tooltip : {
            show : true
        },
        legend : {
            data : [ '销量' ]
        },
        xAxis : {
            data : []
        },
        yAxis : {},
        series : [ {
            name : '销量',
            type : 'line',//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示，具体类型可进入ECharts官方查找API
            data : []
        } ]
    });
    myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

    var names = []; //类别数组（实际用来盛放X轴坐标值）
    var nums = []; //销量数组（实际用来盛放Y坐标值）
    $.ajax({
        type : "post",
        async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "test", //请求发送到Controller处，路径我上面写好了的，直接拼的，你自己按照你的写
        data : {},
        dataType : "json", //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
                for (var i = 0; i < result.length; i++) {
                    names.push(result[i].name); //挨个取出类别并填入类别数组
                }
                for (var i = 0; i < result.length; i++) {
                    nums.push(result[i].num); //挨个取出销量并填入销量数组
                }
                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({ //加载数据图表
                    xAxis : {
                        data : names
                    },
                    series : [ {
                        // 根据名字对应到相应的系列
                        name : '销量',
                        data : nums
                    } ]
                });

            }

        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })



</script>
</body>
</html>

2、创建实体类

package com.echart.pojo;

public class Product {
    //类别名称
    private String name;
    //销量
    private Integer num;

    public Product(String name, Integer num) {
        this.name = name;
        this.num = num;
    }

    public Product() {
    }

    public String getName() {
        return name;
    }


    public void setName(String name) {
        this.name = name;
    }

    public Integer getNum() {
        return num;
    }

    public void setNum(Integer num) {
        this.num = num;
    }

    @Override
    public String toString() {
        return "Product{" +
                "name='" + name + '\'' +
                ", num=" + num +
                '}';
    }
}

3、创建一个servlet用于后台处理

为了方便，这里就不用SSM框架的Controller查数据库了，自己造几个数据传到前台，测试效果和查数据库是一样的

package com.echart.test;

import com.echart.pojo.Product;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/test")
public class lineTest extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       Product product1=new Product("手机",2000);
       Product product2=new Product("电脑",3000);
       Product product3=new Product("显示器",200);
       Product product4=new Product("主机",5000);

        List<Product> list=new ArrayList<>();
        list.add(product1);
        list.add(product2);
        list.add(product3);
        list.add(product4);
        //提供java-json相互转换功能的类
        ObjectMapper mapper=new ObjectMapper();
        //将list中的对象转换为Json格式的数组
        String json=mapper.writeValueAsString(list);
        System.out.println(json);

        //将json数据返回给客户端
        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().write(json);



    }
}