Echarts&Ajax动态传递数据

控制类

@Controller
public class HbaseControllor {
	HbaseReadeTable hbaseReadeTable=new HbaseReadeTable() ;
	
	@RequestMapping("getData4Hbase2Echarts")
	public  String getData4Hbase2Echarts(Model model) throws Exception{
		JSONArray arr=new JSONArray();
		JSONArray arr2=new JSONArray();
		JSONObject jo=new JSONObject();
		List<HbasePojo>  dataMap=hbaseReadeTable.getHbaseData();
		for (HbasePojo hbasePojo : dataMap) {
			String str=hbasePojo.getKey().substring(5,hbasePojo.getKey().toString().length()).split("_")[1];
//			arr.add(str.substring(8).substring(0,2)+":"+str.substring(10));
//			System.out.print(" ---  "+str);
			String seconds=str.substring(10);
			if (seconds.length()<2) {
				seconds=0+seconds;
			}
			arr.add(str.substring(8).substring(0,2)+":"+seconds);
			arr2.add(hbasePojo.getValue());
		}
		System.out.println(arr);
		System.out.println(arr2);
		jo.put("time", arr);
		jo.put("value", arr2);
		model.addAttribute("data", jo);
		return "/BI/RealTime4Hbase";
	}
	
	@ResponseBody
	@RequestMapping("upData4Hbase2Echarts")
	public  JSONObject upData4Hbase2Echarts(Model model) throws Exception{
		JSONArray arr=new JSONArray();
		JSONArray arr2=new JSONArray();
		JSONObject jo=new JSONObject();
		List<HbasePojo>  dataMap=hbaseReadeTable.getHbaseData();
		for (HbasePojo hbasePojo : dataMap) {
			String str=hbasePojo.getKey().substring(5,hbasePojo.getKey().toString().length()).split("_")[1];
//			arr.add(str.substring(8).substring(0,2)+":"+str.substring(10));
//			System.out.print(" ---  "+str);
			String seconds=str.substring(10);
			if (seconds.length()<2) {
				seconds=0+seconds;
			}
			arr.add(str.substring(8).substring(0,2)+":"+seconds);
			arr2.add(hbasePojo.getValue());
		}
		System.out.println(arr);
		System.out.println(arr2);
		jo.put("time", arr);
		jo.put("value", arr2);
		return jo;
		
	}
}

实体类

public class HbasePojo {

	private String key;
	private String value;
	public HbasePojo(String key, String value) {
		super();
		this.key = key;
		this.value = value;
	}
	public HbasePojo() {
		super();
	}
	@Override
	public String toString() {
		return "HbasePojo [key=" + key + ", value=" + value + "]";
	}
	public String getKey() {
		return key;
	}
	public void setKey(String key) {
		this.key = key;
	}
	public String getValue() {
		return value;
	}
	public void setValue(String value) {
		this.value = value;
	}
	
}
Hbase Manager控制类Dao

public class HbaseReadeTable {
public static void main(String[] args) throws Exception {
	UtilHbase hbaseUtil=new UtilHbase();
	String hbaseTabName="wangtianxin_bigscreen_realtime_stats";
	//前缀字段:wtx_bidscreen01
	DataUtil dataUtil=new DataUtil();
	List<String> key4redis=dataUtil.getIOData4RealTimeDate2RedisKey("2012", "1", "2");
//			String finalKey="wtx_bidscreen01_"+string;
	hbaseUtil.getData(hbaseTabName, key4redis);
	hbaseUtil.cleanUp();
}
public static List<HbasePojo>  getHbaseData() throws Exception{
	UtilHbase hbaseUtil=new UtilHbase();
	String hbaseTabName="wangtianxin_bigscreen_realtime_stats";
	//前缀字段:wtx_bidscreen01
	DataUtil dataUtil=new DataUtil();
	List<String> key4redis=dataUtil.getIOData4RealTimeDate2RedisKey("2012", "1", "2");
	List<HbasePojo> dataMap=hbaseUtil.getData(hbaseTabName, key4redis);
	hbaseUtil.cleanUp();
	return dataMap;
}
}

Hbase 工具类

public class UtilHbase {

	//用于链接hbase的连接器对象,类似mysql jdbc的connection
	public Connection connection;
    //用hbase configuration初始化配置信息的时候会自动加载当前应用classpath下的hbase-site.xml
	public static Configuration configuration = HBaseConfiguration.create();
	
	//初始化hbase操作对象
	public UtilHbase() throws Exception{
	    // ad = new HBaseAdmin(configuration); //过期了，推荐使用Admin
		configuration.set("hbase.zookeeper.quorum", "IP地址");
		configuration.set("hbase.zookeeper.property.clientPort", "端口");
		configuration.set("zookeeper.znode.parent", "/hbase-unsecure");
		//初始化connection连接器
		connection=ConnectionFactory.createConnection(configuration);
	}



    // 新增数据到表里面Put
    public void putData4BigData(String table_name,String rowKey,String value) throws Exception {
        TableName tableName = TableName.valueOf(table_name);
        Table table = connection.getTable(tableName);
        List<Put> batPut = new ArrayList<Put>();
            // 构建put的参数是rowkey rowkey_i (Bytes工具类，各种java基础数据类型和字节数组之间的相互转换)
            Put put = new Put(Bytes.toBytes(rowKey));
            put.addColumn(Bytes.toBytes("five_minutes_stats"), Bytes.toBytes("five_minutes"),
                    Bytes.toBytes(value));
            batPut.add(put);
        table.put(batPut);
        System.out.println("表插入数据成功！");
    }

    // 查询数据
    public List<HbasePojo> getData(String table_Name,List<String> rowkeys) throws Exception {
    	List<HbasePojo> dataMap=new ArrayList<HbasePojo>();
    	TableName tableName = TableName.valueOf(table_Name);
        Table table = connection.getTable(tableName);
        // 构建get对象
        List<Get> gets = new ArrayList<Get>();
        for (String rowkey : rowkeys) {
        	 Get get = new Get(Bytes.toBytes("wtx_bidscreen01_"+rowkey));
        	  gets.add(get);
		}
        Result[] results = table.get(gets);
        for (Result result : results) {
            // 使用cell获取result里面的数据
            CellScanner cellScanner = result.cellScanner();
            while (cellScanner.advance()) {
                Cell cell = cellScanner.current();
                // 从单元格cell中把数据获取并输出
                // 使用 CellUtil工具类，从cell中把数据获取出来
                String rowkey = Bytes.toString(CellUtil.cloneRow(cell));
                String value = Bytes.toString(CellUtil.cloneValue(cell));
                HbasePojo hbPojo=new HbasePojo();
                hbPojo.setKey(rowkey);
                hbPojo.setValue(value);
                dataMap.add(hbPojo);
                System.out.println("rowkey:" + rowkey +",value:" + value);
            }
        }
		return dataMap;
    }

    // 关闭连接
    public void cleanUp() throws Exception {
        connection.close();
    }

}

前端页面

<html>

<head>
    <meta charset="utf-8">
    <script src='https://cdn.bootcss.com/echarts/3.7.0/echarts.simple.js'></script>
    <script th:src='@{/js/wordcloud/echarts.min.js}'></script>
    <script th:src='@{/js/jquery/jquery-1.11.1.min.js}'></script>

</head>

<body>
    <style>
        html,
        body,
        #main {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
    <div id='main'></div>
<script th:inline="javascript">
//thymealf动态渲染传递内置对象中的数据
        var data = [[${data}]];

        var xAxis = data.time;
        var yAxis = data.value;
    </script>
<script>
//注册echarst变量
        var chart = echarts.init(document.getElementById('main'));
	//设置初始化折线图数据,通过thymealf动态渲染加载
        option = {
            title: {
                text: '微博用户数据实时-PV',
                subtext: '真实数据'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxis
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 人'
                },
                axisPointer: {
                    snap: true
                }
            }, visualMap: {
                show: false,
                dimension: 0,
                pieces: [{
                    lte: 6,
                    color: 'green'
                }, {
                    gt: 6,
                    lte: 8,
                    color: 'red'
                }, {
                    gt: 8,
                    lte: 14,
                    color: 'green'
                }, {
                    gt: 14,
                    lte: 17,
                    color: 'red'
                }, {
                    gt: 17,
                    color: 'green'
                }]
            },
            series: [
                {
                    name: '用户量',
                    type: 'line',
                    smooth: true,
                    data: yAxis,
                    markArea: {
                        data: [ [{
                            name: '早高峰',
                            xAxis: '07:30'
                        }, {
                            xAxis: '10:00'
                        }], [{
                            name: '晚高峰',
                            xAxis: '17:30'
                        }, {
                            xAxis: '21:15'
                        }] ]
                    }
                }
            ]
        };

//Ajax循环递归发送请求
        //假设每隔5秒发送一次请求
        window.onload = function() {
            getApi();
        }

        function getApi() {
            //设置时间 5-秒  1000-毫秒  这里设置你自己想要的时间 
            setTimeout(getApi, 5 * 1000);
            $.ajax({
                url: 'http://10.9.0.27:8084/upData4Hbase2Echarts',
                type: 'get',
                dataType: 'json',
                success: function(data) {
//变量传递
                     xAxis = data.time;
                    console.log(xAxis);
                     yAxis = data.value;
                    console.log(yAxis);

                }
            })
            //在succes成功回调函数中进行方法回调,每次请求后都对数据进行更新
            chart.setOption({

                title: {
                    text: '微博用户数据实时-UV',
                    subtext: '真实数据'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxis
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} 人'
                    },
                    axisPointer: {
                        snap: true
                    }
                }, visualMap: {
                    show: false,
                    dimension: 0,
                    pieces: [{
                        lte: 6,
                        color: 'green'
                    }, {
                        gt: 6,
                        lte: 8,
                        color: 'red'
                    }, {
                        gt: 8,
                        lte: 14,
                        color: 'green'
                    }, {
                        gt: 14,
                        lte: 17,
                        color: 'red'
                    }, {
                        gt: 17,
                        color: 'green'
                    }]
                },
                series: [
                    {
                        name: '用电量',
                        type: 'line',
                        smooth: true,
                        data: yAxis,
                        markArea: {
                            data: [ [{
                                name: '早高峰',
                                xAxis: '07:30'
                            }, {
                                xAxis: '10:00'
                            }], [{
                                name: '晚高峰',
                                xAxis: '17:30'
                            }, {
                                xAxis: '21:15'
                            }] ]
                        }
                    }
                ]
            	
            });
//将设置更新到charset组建中
            window.onresize = chart.resize;
        }

     
    </script>
</body>

</html>