Web jsp开发自学——ajax+servlet+echarts+json+gson 实现ajax传输servlert和echarts的数据，可视化结果

感谢下面的博主，我学习的博客有：

https://blog.csdn.net/ITBigGod/article/details/81023802 Jsp+Servlet+Echarts实现动态数据可视化

Javascript获取html元素的几种方法

https://www.jianshu.com/p/2afc2b3627d7 Echarts柱状图每根柱子设置不同柱子颜色

https://blog.csdn.net/JavaLiXL/article/details/78639103 AJAX处理数据提交到Servlet

https://blog.csdn.net/adventer/article/details/79068498 用Gson实现json与对象、list集合之间的相互转化

https://blog.csdn.net/jal517486222/article/details/82778584 红橙黄绿青蓝紫 RGB值 16进制、10进制

https://blog.csdn.net/weixin_40325475/article/details/79817482 解决echarts柱形图X轴标题显示不全的问题

………………

1.先搭框架，在html里在js中写echarts的代码

<!-- 引入 echarts.js -->
<script type="text/javascript" src="js/echarts.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>

            <div style="width:100% ;float:none;display:block; ">
                <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="main" style="width: 1100px; height: 340px; margin:0 0 0 0;"></div>
            </div>

js里的代码

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        //3.初始化，默认显示标题，图例和xy空坐标轴
        myChart.setoption({

            title : {
                text : '按学院统计选课人数',
                x:'center',
                y:'top'
            },
            tooltip : {},

            legend : {
                data : [ '人数' ],
                left:'10%',
            },
            xAxis : {
                data : []
            },
            yAxis : {},
            series : [ {
                name : '人数',
                type : 'bar',
                data : []
            } ]
        });

        //4.设置加载动画(非必须)
        myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

        //5.定义数据存放数组(动态变)
        var names = []; //建立一个类别数组（实际用来盛放X轴坐标值）
        var nums = []; //建立一个销量数组（实际用来盛放Y坐标值）

        //6.ajax发起数据请求
        $.ajax({
            type : "post",
            async : true, //异步请求（同步请求将会锁住浏览器，其他操作须等请求完成才可执行）
            url : "TestServlet", //请求发送到TestServlet
            data : {},
            dataType : "json", //返回数据形式为json

            //7.请求成功后接收数据name+num两组数据
            success : function(result) {
                //result为服务器返回的json对象
                if (result) {
                    //8.取出数据存入数组
                    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(); //隐藏加载动画

                    //9.覆盖操作-根据数据加载数据图表
                    myChart.setoption({
                        xAxis : {
                            data : names,
                            axisLabel:{  
                            interval:0,//横轴信息全部显示  
                            }

                        },
                        series : [ {
                            // 根据名字对应到相应的数据
                            name : '人数',
                            data : nums,
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        // build a color map as your need.
                                        var colorList = [
                                          '#FF0000','#FF7D00','#FFFF00','#00FF00','#00FFFF',
                                           '#0000FF','#FF00FF','#FAD860','#F3A43B','#60C0DD',
                                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                        ];
                                        return colorList[params.dataIndex];
                                    },            　　
                                }
                            },
                        } ]
                    });

                }

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

2.写servlet

public class TestServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws servletexception, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws servletexception, IOException {
        String sql = "select * from v_count_college order by number desc";
        //System.out.println(sql);
        List<Product> list = new ArrayList<Product>();
        DBBean db = new DBBean();    
        db.getConnection();
        ResultSet rs = db.executeQuery(sql);
        try {
            while(rs.next())
            {
                list.add(new Product(rs.getString(1), rs.getInt(2)));
                System.out.println(rs.getString(1));
            }
        }catch(Exception e) {
            e.printstacktrace();
        }    
        
        System.out.println("这里是doPost");
        //定义一个list集合
        

        // 数据添加到集合里面，这里可以改为获取sql数据信息，然后转为json字符串，然后存到list中。
        //这里把“类别名称”和“销量”作为两个属性封装在一个Product类里，
        //每个Product类的对象都可以看作是一个类别（X轴坐标值）与销量（Y轴坐标值）的集合。
        //list.add(new Product("短袖", 10));
        //list.add(new Product("牛仔裤", 20));
        //list.add(new Product("羽绒服", 30));

        Gson gson2 = new Gson();
        String json = gson2.toJson(list);
        
        //ObjectMapper mapper = new ObjectMapper(); // 提供java-json相互转换功能的类

        //String json = mapper.writeValueAsstring(list); // 将list中的对象转换为Json字符串

        System.out.println(json);

        // 将json字符串数据返回给前端
        response.setContentType("text/html; charset=utf-8");
        response.getWriter().write(json);
    }
}

3.servlet里需要下载与gson相关的jar包

Web jsp开发自学——ajax+servlet+echarts+json+gson 实现ajax传输servlert和echarts的数据，可视化结果

相关推荐