echarts在java中与后台交互

完整流程:

    python爬取股票信息-------将信息保存到数据库----------通过ajax发送post请求到java后台-----java后台连接数据库获取到数据库信息-------通过echarts进行展示(柱状图、折线图)

python爬取股票信息就不贴代码了,主要是后面的。

jsp

1、通过ajax发送post请求到后台获取数据进行展示

<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<%  
    String path = request.getContextPath();  
    String basePath = request.getScheme() + "://" + request.getServerName()  
            + ":" + request.getServerPort() + path + "/";  
%>  
<!DOCTYPE>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <title>Hello ECharts</title>  
    <!-- 引入使用的ECharts.JS -->  
    <script src="echarts.js"></script>  
    <script src="jquery.min.js"></script>  
</head>  
<body>  
    <!--设置展示ECharts图表的区域 -->  
    <div id="myDiv" style="height: 750px;width:1000px;"></div>  
    <script type="text/javascript">  
        function loadData(option) {  
            $.ajax({  
                type : 'post',  //传输类型  
                async : false,  //同步执行  
                url : 'bar.do', //web.xml中注册的Servlet的url-pattern  
                data : {},  
                dataType : 'json', //返回数据形式为json  
                success : function(result) {  
                    if (result) {  
                        //初始化xAxis[0]的data  
                        option.xAxis[0].data = [];  
                        for (var i=0; i<result.length; i++) {  
                            option.xAxis[0].data.push(result[i].day);  

                        }  

        //因为我是进行了3个数据方面进行的展示,所以写了三个,下面的命名请原谅

                        //初始化series[0]的data  
                        option.series[0].data = [];  
                        for (var i=0; i<result.length; i++) {  
                            option.series[0].data.push(result[i].kaipan);
                            //option.series[0].data.push(result[i].shoupan);  
                        }  
                         //初始化series[1]的data  
                        option.series[1].data = [];  
                        for (var i=0; i<result.length; i++) {  
                            option.series[1].data.push(result[i].kaipan);  
                       }  
                        option.series[2].data = [];  
                        for (var i=0; i<result.length; i++) {  
                            option.series[2].data.push(result[i].heightmax);  
                       }  
                    }  
                },  
                error : function(errorMsg) {  
                    alert("加载数据失败");  
                }  
            });
        } 
        var myChart = echarts.init(document.getElementById('myDiv'));  
        var option = {  
            tooltip : {  
                show : true ,
                formatter:'名称:{a}<br>时间:{b}<br>金额:{c}'
            },
            title:{
            text:"股票价格趋势"
            },
            legend : {  
                data : [ '开盘','收盘','最高价' ]  
            },  
            xAxis : [ {  
                type : 'category'  ,
                axisLabel: {
            formatter: function (value) {
                return echarts.format.formatTime('MM-dd', value);
            }
        }
            } ], 
            //滑动时间轴
            dataZoom: [
            {
                type: 'slider',
                show: true,
                start: 94,
                end: 100,
                handleSize: 8
            },
            {
                type: 'inside',
                start: 94,
                end: 100
            },
            {
                type: 'slider',
                show: true,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 12,
                height: '70%',
                handleSize: 8,
                showDataShadow: false,
                left: '93%'
            }
        ],
            yAxis : [ {  
                type : 'value'  
            } ],  
            series : [ {  
                name : '开盘',  
                type : 'bar',
                markPoint:{
                data:[
                {type:'max',name:'最大值'},
                {type:'min',name:'最小值'}
                ]
                } ,
                markLine:{
                data:[
                {type:'average',name:'平均值',itemStyle:{
                    normal:{
                    color:'red'
                    }
                    }}
                ]
                }
                },{
                name:'收盘',
                type:'line',
                markPoint:{
                data:[
                {type:'max',name:'最大值'},
                {type:'min',name:'最小值'}
                ]
                } ,
                markLine:{
                data:[
                {type:'average',name:'平均值',lineStyle:{
                    normal:{
                    color:'black'
                    }
                    }}
                ]
                }
                },{
                name:'最高价',
                type:'line',
                markPoint:{
                data:[
                {type:'max',name:'最大值'},
                {type:'min',name:'最小值'}
                ]
                } ,
                markLine:{
                data:[
                {type:'average',name:'平均值',lineStyle:{
                    normal:{
                    color:'blue'
                    }
                    }}
                ]
                }    
            },
            ]
            
        };  
        //加载数据到option  
        loadData(option);  
        //设置option  
        myChart.setOption(option);  
    </script>  
</body>  

</html>

2、barCandBean.java

package com.helloBar;
public class barCandBean {
private String day;
private String shoupan;
private String kaipan;
private String heightmax;
//private String slowmin;
public String getDay() {
return day;
}
public String getHeightmax() {
return heightmax;
}
public void setHeightmax(String heightmax) {
this.heightmax = heightmax;
}
public String getShoupan() {
return shoupan;
}
public void setShoupan(String shoupan) {
this.shoupan = shoupan;
}
public void setDay(String day) {
this.day = day;
}
public String getKaipan() {
return kaipan;
}
public void setKaipan(String kaipan) {
this.kaipan = kaipan;
}
}

3、BarCandDao.java

package com.helloBar;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class barCandDao {
Connection connection;
public Connection getConnection() {
try {
String name = "xxx";//用户名
String password = "xxx";//密码
String url = "jdbc:mysql://127.0.0.1:3306/stockdatabase";//连接stockdatabase数据库
Class.forName("com.mysql.jdbc.Driver");
connection = DriverManager.getConnection(url, name, password);
} catch (Exception e) {
e.printStackTrace();
}
return connection;
}
public void setConnection(Connection connection) {
this.connection = connection;
}
public ArrayList<barCandBean> listAll() {
ArrayList<barCandBean> list = new ArrayList<barCandBean>();
PreparedStatement pstmt = null;
ResultSet rs = null;

try {

pstmt = this.getConnection().prepareStatement("SELECT * FROM stock_600000");
rs = pstmt.executeQuery();
while (rs.next()) {
barCandBean bar = new barCandBean();
bar.setKaipan(rs.getString("kaipan"));
bar.setDay(rs.getString("day"));
bar.setHeightmax(rs.getString("heightmax"));
bar.setShoupan(rs.getString("shoupan"));
//bar.setSlowmin(rs.getString("slowmin"));
list.add(bar);
System.out.println("连接数据库成功");
}
} catch (Exception e) {
e.printStackTrace();
//System.out.println("连接失败");
} finally {
try {
connection.close();
} catch (Exception e) {
e.printStackTrace();
}
}
return list;
}
}

4、HelloBarCand.java

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//创建了一个barcanddao的对象,barcanddao主要是对数据库的连接和对数据库的操作
        barCandDao barcanddao=new barCandDao();
        //调用barcanddao的select_all()方法把从数据库中读取所有的数据返回的是一个ArrayList,ArrayList里面放的是一个barBean
        ArrayList<barCandBean> array = (ArrayList<barCandBean>) barcanddao.listAll();
        System.out.println("s"+array);
        //设置返回时的编码格式
        response.setContentType("text/html; charset=utf-8");
      //调用JSONArray.fromObject方法把array中的对象转化为JSON格式的数组
        JSONArray json=JSONArray.fromObject(array);
        System.out.println(json.toString());
        //返回给前段页面
        PrintWriter out = response.getWriter();  
        out.println(json);  
        out.flush();  
        out.close();   
}

4.web.xml

<servlet>
    <servlet-name>helloBarCand</servlet-name>
    <servlet-class>com.helloBar.helloBarCand</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>helloBarCand</servlet-name>
    <url-pattern>/bar.do</url-pattern>

  </servlet-mapping>

5、数据库表就不进行贴了

扫描二维码关注公众号,回复: 1924783 查看本文章

//其中Java代码参考其它博客代码,十分感谢~


猜你喜欢

转载自blog.csdn.net/qq_38698632/article/details/79589377