• echarts展示数据库的信息


      

      你可以选择要根据什么条件查,以及显示的图表是哪一种类型的。我这里做了柱状、折线、饼图。前两种的option设置差不多,但是饼图是不一样的。所以在做了判断才使用对应的配置项和数据显示图表。

      通过ajax像后台发送请求数据,从数据库查信息。看一下我的sql语句:

      

    String  sql="select "+information+" as leibie,count(*) as num from information group by "+information+" ";

      在数据库中测试一下sql语句。注意(count * 默认的列属性类型为int型)

       然后我们需要根据自己查询语句中as之后自己设置的列名创建一个实体类。

      

    package User;
    
    public class echarts {
        private String leibie;
        private Integer num;
        public String getLeibie() {
            return leibie;
        }
        public void setLeibie(String leibie) {
            this.leibie = leibie;
        }
        public Integer getNum() {
            return num;
        }
        public void setNum(int num) {
            this.num = num;
        }
        public echarts() {
            super();
        }
        public echarts(String leibie, int num) {
            super();
            this.leibie = leibie;
            this.num = num;
        }
        
        
        
    }

    Dao层的执行函数(从数据库查出数据存在list数组之中)

    //echarts按分类获取数据和数量
        public static List<echarts> getechartsdata(String sql) throws SQLException {
            // 查询语句的执行结果为一个表格,即多个学生对象的集合,所有可以创建数组列表对象来存储
            List<echarts> lst = new ArrayList<echarts>();
            // 获取连接对象
            Connection conn = Connect.getConn();
            try {
                // 连接对象conn调用createStatement()方法,创建一个执行SQL语句的对象st
                Statement st = conn.createStatement();
                // 执行SQL语句的对象st调用executeQuery()方法,执行查询语句,将查询到的结果返回到一个结果集中
                ResultSet rs = st.executeQuery(sql);
                // 遍历结果集对象
                while (rs.next()) {
                    echarts mes = new echarts();
                    mes.setLeibie(rs.getString("leibie"));
                    mes.setNum(rs.getInt("num"));
                    lst.add(mes);
                }
            } catch (Exception e) {
                System.out.println(e.getMessage());
            } finally {
                // 资源使用完之后,如果没有关闭,则需要关闭
                if (conn != null) {
                    conn.close();
                }
            }
            return lst;
        }

    servlet的echarts:

    //测试图表
            private void echarts(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException, SQLException {
                req.setCharacterEncoding("utf-8");
                resp.setContentType("text/html;charset=utf-8");
                
                String information=req.getParameter("information");
                
                
                
                String  sql="select "+information+" as leibie,count(*) as num from information group by "+information+" ";
                
                List<echarts>  echartslist= MessageService.getechartsdata(sql);
                //list转json
                JSONArray Js = JSONArray.fromObject(echartslist);
                
                resp.getWriter().print(Js);
                
                
    
    
                
            }

    前台界面jsp:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <select id="information">
            <option value="insattr">机构属性</option>
            <option value="belongarea">归属区域</option>
            <option value="totime">发布时间</option>
        
        </select>
        
        <select id="echartstype">
            <option value="bar">柱状图</option>
            <option value="line">折线图</option>
            <option value="pie">饼图</option>
        
        </select>
        <button id="select">查询</button>
    
     <div id="main" style=" 600px;height:400px;"></div>
     <div id="table"></div>
     
    </body>
    
    <script src="echarts/echarts.min.js"></script>
    <script src="js/jquery.min.js" charset="utf-8"></script>
    
    <script type="text/javascript">
    
    
        $("#select").click(function () {
            
            //获取图表的类型
            var echartstype=$("#echartstype").val();
            
            
            //获取查询条件
            var information=$("#information").val();
            //var informationtext=$("#information").text();
            
            echarts.init(document.getElementById('main')).dispose();//销毁前一个实例
            
            // 基于准备好的dom,初始化echarts实例,先销毁,在初始化
            var myChart = echarts.init(document.getElementById('main'));
            $.ajax({
                type: "post",
                url:"MessageServlet?method=echarts",
                async:false,
                cache:true,
                data:{"information":information},
                success:function (data) {
                    // 指定图表的配置项和数据
                    
                    //json字符串
                   // var js=data;
                  //json字符串转为json对象
                    var jsobj=JSON.parse(data)
                    
                    
                    //往table中显示先出来的数据
                    var text = "<table class='table table-hover table-striped table-bordered table-sm'>" +
                            "            <thead>" +
                            "                <tr>" +
                            "                    <th>名称</th>" +
                            "                    <th>总数</th>" +
                            "                </tr>" +
                            "            </thead><tbody>";
                        for (i = 0; i <jsobj.length; i++) {
                            text += "<tr id='w"+i+"'>" +
                                "<td>" + jsobj[i].leibie + "</td>" +
                                "<td>" + jsobj[i].num+ "</td>" +
                                "</tr>";
                        }
                        text += "</tbody></table>";
                        
                        $("#table").html(text);
                   
                    //将json字符串存储在两个一维数组中
                    let xxx=[];
                    let yyy=[];
                    
                    for(let i=0;i<jsobj.length;i++){
                        xxx.push(jsobj[i].leibie);
                        yyy.push(jsobj[i].num)
                    }
                    //柱状图,折线图显示
                    if (echartstype!="pie") {
                        var option = {
                                title: {
                                    text: '河北征集图表显示'
                                },
                                tooltip: {},
                                legend: {
                                     data:['数据量']
                                },
                                xAxis: {
                                    data:xxx,
                                    axisLabel: {
                                        //横坐标全部显示
                                        interval: 0,
                                        //横坐标倾斜45度
                                        rotate: -45,
                                    }
                                },
                                yAxis: {},
                                series: [{
                                    name:'数据量',//控制图例的显示,legend里的data可以不写
                                    //图的类型
                                    type:echartstype,
                                    data: yyy,//xAxis的data必须和series的data一一对应
                                    
                                }]
                            };
    
                    }else{//如果选则的是饼图的话
                        //转换数据的格式
                           var array=[];
                           var selected = {};
                           for (var i=0;i<xxx.length;i++){
                               //构造[{value:....,name:....}]格式的数据
                               array.push({value:yyy[i],name:xxx[i]});
                               //object,图例的选中状态
                               selected[xxx[i]] = i<6;
                           }
                        
                        
                        option = {
                                title: {
                                    text: '河北征集图表显示',
                                    
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                                },
                                legend: {
                                         type:'scroll',
                                        orient: 'vertical',
                                        left: 10,
                                        //如果 data 没有被指定,会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度
                                        data: xxx,
                                       // selected:selected,
                                },
                                series: [
                                    {
                                              name: '出现次数',
                                                type: 'pie',
                                                 radius: '55%',
                                              center: ['50%', '60%'],
                                                 data: array,//name属性控制图例的显示
                                              emphasis: {//高亮的扇区和标签样式
                                              itemStyle: {
                                                //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                              shadowBlur: 10,
                                              shadowOffsetX: 0,//阴影水平方向上的偏移距离。
                                              shadowColor: 'rgba(0, 0, 0, 0.5)'//阴影颜色
                                            }
                                        }
                                    }
                                ]
                            };
                        
                        
                        
                    }
                    
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
                error:function () {
                    alert("生成图表出错")
                }
            })
            
            
        })
            
        </script>
    </html>

      然后说一下这个柱状图,折线图用到的属性,图例的展示是legend--data(图里的数据集)属性控制的,你可以不写data属性。

      在柱状图和折线图中,如果没有这个属性,默认渠道series的name属性,如果写的话,要和series的name属性值保持一样。

      在饼图中如果不设置的话,默认会取到你的series--data中的name属性值。data的写法是[{value:....,name:.....},{.....}]。

      从前端传过来的转换成对应的格式:

      

    //json字符串装为json对象
    var jsobj=JSON.parse(data);
    //将json字符串存储在两个一维数组中
                    let xxx=[];
                    let yyy=[];
                    
                    for(let i=0;i<jsobj.length;i++){
                        xxx.push(jsobj[i].leibie);
                        yyy.push(jsobj[i].num)
                    }

                 var array=[];
                           var selected = {};
                           for (var i=0;i<xxx.length;i++){
                               //构造[{value:....,name:....}]格式的数据
                               array.push({value:yyy[i],name:xxx[i]});
                               //object,图例的选中状态
                               selected[xxx[i]] = i<6;
                           }
     

      折线图和柱状图中,xAxis中的data要和series的data一一对应。

    var jsobj=JSON.parse(data);
    //将json字符串存储在两个一维数组中
                    let xxx=[];
                    let yyy=[];
                    
                    for(let i=0;i<jsobj.length;i++){
                        xxx.push(jsobj[i].leibie);
                        yyy.push(jsobj[i].num)
                    }

      如果你注意的话会发现的每次点击事件,都进行了一个销毁的操作。

      

    echarts.init(document.getElementById('main')).dispose();//销毁前一个实例
            
            // 基于准备好的dom,初始化echarts实例,先销毁,在初始化
            var myChart = echarts.init(document.getElementById('main'));

      销毁之后再初始化。原因是你如果进行多次查询,图的类型不一样的话,会出现堆叠。如下:

      

       就像这样,底层会有坐标系。切记。

      

  • 相关阅读:
    [CF1336C] Kaavi and Magic Spell
    [CF1338C] Perfect Triples
    [CF1353F] Decreasing Heights
    [CF1442B] Identify the Operations
    [CF1354E] Graph Coloring
    [CF1364D] Ehab's Last Corollary
    php-fpm和fastcgi的区别
    phpredis实现互斥锁
    关于lnmp情况下PHP单线程的理解
    客户端断开链接以后 PHP执行过程实测
  • 原文地址:https://www.cnblogs.com/moxihuishou/p/13917404.html
Copyright © 2020-2023  润新知