Web jsp development self --ajax + servlet + echarts + json + gson achieve ajax transmission servlert echarts and data visualization to obtain several methods Javascript html element

Thank the following bloggers, I have learned blog:

https://blog.csdn.net/ITBigGod/article/details/81023802 Jsp + + Echarts the Servlet dynamic data visualization

Javascript get html elements in several ways

https://www.jianshu.com/p/2afc2b3627d7 Echarts histogram columns each column set different colors

https://blog.csdn.net/JavaLiXL/article/details/78639103 Submit AJAX Servlet to process data

https://blog.csdn.net/adventer/article/details/79068498 with Gson json achieve the object, a set of mutual conversion list

https://blog.csdn.net/jal517486222/article/details/82778584 red, orange yellow green blue purple RGB value 16 binary, decimal

https://blog.csdn.net/weixin_40325475/article/details/79817482 solve the problem of incomplete echarts bar graph display X axis title

………………

1. First take the framework, written in echarts js code in html in

<!-- 引入 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);
    }
}