louzin
1 year ago
11 changed files with 1420 additions and 467 deletions
@ -0,0 +1,316 @@ |
|||||||
|
package com.louzin.openhdh.controller; |
||||||
|
|
||||||
|
import com.louzin.openhdhapi.utils.HiveConnecter; |
||||||
|
import org.springframework.stereotype.Controller; |
||||||
|
import org.springframework.web.bind.annotation.*; |
||||||
|
import com.louzin.openhdhapi.utils.WeblogPreProcess; |
||||||
|
import com.louzin.openhdhapi.utils.hdfsapi; |
||||||
|
import java.sql.ResultSet; |
||||||
|
import java.sql.SQLException; |
||||||
|
import java.util.*; |
||||||
|
|
||||||
|
@Controller |
||||||
|
@ResponseBody |
||||||
|
@CrossOrigin |
||||||
|
public class ParserController { |
||||||
|
private static HiveConnecter hiveConnecter; |
||||||
|
//对指定路径下的文件进行采集分析,结果生成至result文件夹下
|
||||||
|
@PostMapping("/parser") |
||||||
|
public int parserWebLog(@RequestParam("parserpath") String parserpath) { |
||||||
|
hdfsapi hdfs = new hdfsapi(); |
||||||
|
if (hdfs.ifexistsFolder("/result"+parserpath)){ |
||||||
|
if(hdfs.deleteFolder("/result"+parserpath)){//删除成功则进行下一步
|
||||||
|
WeblogPreProcess weblogPreProcess=new WeblogPreProcess(); |
||||||
|
try { |
||||||
|
weblogPreProcess.runjob(parserpath); |
||||||
|
return 0; |
||||||
|
} catch (Exception e) { |
||||||
|
System.out.println("webLogPreProcess runjob Error!"); |
||||||
|
return 1; |
||||||
|
} |
||||||
|
}else{ |
||||||
|
System.out.println("hdfs文件权限有误!!!"); |
||||||
|
return 2; |
||||||
|
} |
||||||
|
} |
||||||
|
else { |
||||||
|
System.out.println("数据已过滤!!!!"); |
||||||
|
return 3; |
||||||
|
} |
||||||
|
} |
||||||
|
//将分析好的数据加载到Hive的origin表中
|
||||||
|
@GetMapping("/loaddatatohive") |
||||||
|
public boolean loaddatatohive(@RequestParam String loaddatapath){ |
||||||
|
String loadsql="load data inpath '"+loaddatapath+"' into table ods_weblog_origin"; |
||||||
|
try { |
||||||
|
hiveConnecter=HiveConnecter.getInstance(); |
||||||
|
hiveConnecter.getConn(); |
||||||
|
hiveConnecter.executeSQLByStatement(loadsql); |
||||||
|
System.out.println("load success!"); |
||||||
|
new hdfsapi().deleteFolder(loaddatapath); |
||||||
|
return true; |
||||||
|
} catch (Exception e) { |
||||||
|
System.out.println(e); |
||||||
|
return false; |
||||||
|
} |
||||||
|
} |
||||||
|
@GetMapping("/deletefolder") |
||||||
|
public boolean deletefolder(@RequestParam String deletepath){ |
||||||
|
System.out.println("将要删除 "+deletepath); |
||||||
|
return new hdfsapi().deleteFolder(deletepath); |
||||||
|
} |
||||||
|
//从origin中更新t_ods_tmp_referurl t_ods_tmp_detail并对ods_weblog_detail进行复写
|
||||||
|
@PostMapping("/hivedbupdate") |
||||||
|
public boolean hivedbupdate(){ |
||||||
|
//加载数据到hive
|
||||||
|
try { |
||||||
|
hiveConnecter= HiveConnecter.getInstance(); |
||||||
|
hiveConnecter.getConn(); |
||||||
|
String sql1="set hive.exec.dynamic.partition=true"; |
||||||
|
String sql2="set hive.exec.dynamic.partition.mode=nonstrict"; |
||||||
|
String dropt_ods_tmp_referurl="drop table t_ods_tmp_referurl"; |
||||||
|
String dropt_ods_tmp_detail="drop table t_ods_tmp_detail"; |
||||||
|
hiveConnecter.executeSQLByStatement(sql1); |
||||||
|
hiveConnecter.executeSQLByStatement(sql2); |
||||||
|
//判断双表是否存在
|
||||||
|
ResultSet rs = hiveConnecter.executeQueryBYStatement("show tables in datacenter like 't_ods_tmp_referurl'"); |
||||||
|
if(rs.next()){ |
||||||
|
System.out.println("t_ods_tmp_referurl表存在!"); |
||||||
|
hiveConnecter.executeSQLByStatement(dropt_ods_tmp_referurl); |
||||||
|
System.out.println("referurl删除成功"); |
||||||
|
} |
||||||
|
rs=hiveConnecter.executeQueryBYStatement("show tables in datacenter like 't_ods_tmp_detail'"); |
||||||
|
if(rs.next()){ |
||||||
|
System.out.println("t_ods_tmp_detail表存在!"); |
||||||
|
hiveConnecter.executeSQLByStatement(dropt_ods_tmp_detail); |
||||||
|
System.out.println("detail删除成功"); |
||||||
|
} |
||||||
|
//创建中间表
|
||||||
|
String createreferurl="create table t_ods_tmp_referurl as SELECT a.*,b.*\n" + |
||||||
|
" FROM ods_weblog_origin a LATERAL VIEW \n" + |
||||||
|
" parse_url_tuple(regexp_replace(http_referer, \"\\\"\", \"\"),\n" + |
||||||
|
" 'HOST', 'PATH','QUERY', 'QUERY:id') b as host, path, query, query_id"; |
||||||
|
hiveConnecter.executeSQLByStatement(createreferurl); |
||||||
|
String createdetail="create table t_ods_tmp_detail as select b.*,substring(time_local,0,10) as daystr,\n" + |
||||||
|
" substring(time_local,12) as tmstr,\n" + |
||||||
|
" substring(time_local,6,2) as month,\n" + |
||||||
|
" substring(time_local,9,2) as day,\n" + |
||||||
|
" substring(time_local,11,3) as hour\n" + |
||||||
|
" from t_ods_tmp_referurl b"; |
||||||
|
hiveConnecter.executeSQLByStatement(createdetail); |
||||||
|
String insertOverWritedetail="insert overwrite table ods_weblog_detail partition(datestr)\n" + |
||||||
|
" select distinct otd.valid,otd.remote_addr,otd.remote_user,\n" + |
||||||
|
" otd.time_local,otd.daystr,otd.tmstr,otd.month,otd.day,otd.hour,\n" + |
||||||
|
" otr.request,otr.status,otr.body_bytes_sent,\n" + |
||||||
|
" otr.http_referer,otr.host,otr.path,\n" + |
||||||
|
" otr.query,otr.query_id,otr.http_user_agent,otd.daystr\n" + |
||||||
|
" from t_ods_tmp_detail as otd,t_ods_tmp_referurl as otr \n" + |
||||||
|
" where otd.remote_addr=otr.remote_addr \n" + |
||||||
|
" and otd.time_local=otr.time_local \n" + |
||||||
|
" and otd.body_bytes_sent=otr.body_bytes_sent \n" + |
||||||
|
" and otd.request=otr.request"; |
||||||
|
hiveConnecter.executeSQLByStatement(insertOverWritedetail); |
||||||
|
System.out.println("数据入库完成,开始分析"); |
||||||
|
//browser分析
|
||||||
|
String truncateBrowser="truncate table dw_use_browser"; |
||||||
|
String updateBrowser0="insert into table dw_use_browser select 'Firefox' as name,COUNT(*) as count from ods_weblog_detail WHERE http_user_agent like '%Firefox%'"; |
||||||
|
String updateBrowser1="insert into table dw_use_browser select 'Chrome' as name,COUNT(*) as count from ods_weblog_detail WHERE http_user_agent like '%Chrome%'"; |
||||||
|
String updateBrowser2="insert into table dw_use_browser select 'MobileSafari' as name,COUNT(*) as count from ods_weblog_detail WHERE http_user_agent like '%MobileSafari%'"; |
||||||
|
String updateBrowser3="insert into table dw_use_browser select 'Edge/IE' as name,COUNT(*) as count from ods_weblog_detail WHERE http_user_agent like '%Trident%'"; |
||||||
|
String updateBrowser4="insert into table dw_use_browser select 'Safari' as name,COUNT(*) as count from ods_weblog_detail WHERE http_user_agent like '%Safari%'"; |
||||||
|
hiveConnecter.executeSQLByStatement(truncateBrowser); |
||||||
|
hiveConnecter.executeSQLByStatement(updateBrowser0); |
||||||
|
hiveConnecter.executeSQLByStatement(updateBrowser1); |
||||||
|
hiveConnecter.executeSQLByStatement(updateBrowser2); |
||||||
|
hiveConnecter.executeSQLByStatement(updateBrowser3); |
||||||
|
hiveConnecter.executeSQLByStatement(updateBrowser4); |
||||||
|
//weekpvs分析
|
||||||
|
String truncateWeekpvs="truncate table dw_pvs_week"; |
||||||
|
String updateWeekpvs="insert into table dw_pvs_week select datestr,COUNT(*) as count from ods_weblog_detail group by datestr"; |
||||||
|
hiveConnecter.executeSQLByStatement(truncateWeekpvs); |
||||||
|
hiveConnecter.executeSQLByStatement(updateWeekpvs); |
||||||
|
//allpvs
|
||||||
|
String truncateAllpvs="truncate table dw_pvs_all"; |
||||||
|
String updateAllpvs="insert into table dw_pvs_all select request,COUNT(*) as pvs from ods_weblog_detail owd where request !='/' group by request ORDER by pvs desc limit 10"; |
||||||
|
hiveConnecter.executeSQLByStatement(truncateAllpvs); |
||||||
|
hiveConnecter.executeSQLByStatement(updateAllpvs); |
||||||
|
//pvsusertop5
|
||||||
|
String truncatePvsuser="truncate table dw_pvs_user"; |
||||||
|
String updatePvsuser="insert into table dw_pvs_user select remote_addr ,count(remote_addr) as userpvs from ods_weblog_detail owd group by remote_addr order by userpvs desc limit 5"; |
||||||
|
hiveConnecter.executeSQLByStatement(truncatePvsuser); |
||||||
|
hiveConnecter.executeSQLByStatement(updatePvsuser); |
||||||
|
//headerupdate
|
||||||
|
String truncateHeader="truncate table ods_weblog_count"; |
||||||
|
String update1="insert into table ods_weblog_count select 'ct1',count(*) from ods_weblog_origin"; |
||||||
|
String update2="insert into table ods_weblog_count select 'ct2',count(*) from ods_weblog_origin where valid='true'"; |
||||||
|
String update3="insert into table ods_weblog_count select 'ct3',count(*) from ods_weblog_origin where valid='false'"; |
||||||
|
String update4="insert into table ods_weblog_count select 'ct4',count(*) from ods_weblog_detail where valid='false'"; |
||||||
|
hiveConnecter.executeSQLByStatement(truncateHeader); |
||||||
|
hiveConnecter.executeSQLByStatement(update1); |
||||||
|
hiveConnecter.executeSQLByStatement(update2); |
||||||
|
hiveConnecter.executeSQLByStatement(update3); |
||||||
|
hiveConnecter.executeSQLByStatement(update4); |
||||||
|
return true; |
||||||
|
} catch (Exception e) { |
||||||
|
hiveConnecter.closeAll(); |
||||||
|
System.out.println(e); |
||||||
|
return false; |
||||||
|
} |
||||||
|
} |
||||||
|
@GetMapping("/truncateall") |
||||||
|
public boolean truncateall(){ |
||||||
|
String truncate1="truncate table dw_pvs_all"; |
||||||
|
String truncate2="truncate table t_ods_tmp_referurl"; |
||||||
|
String truncate3="truncate table t_ods_tmp_detail"; |
||||||
|
String truncate4="truncate table ods_weblog_detail"; |
||||||
|
String truncate5="truncate table dw_use_browser"; |
||||||
|
String truncate6="truncate table dw_pvs_user"; |
||||||
|
String truncate7="truncate table dw_pvs_week"; |
||||||
|
String truncate8="truncate table ods_weblog_count"; |
||||||
|
String truncate9="truncate table ods_weblog_origin"; |
||||||
|
System.out.println("清除所有数据!"); |
||||||
|
try{ |
||||||
|
hiveConnecter= HiveConnecter.getInstance(); |
||||||
|
hiveConnecter.getConn(); |
||||||
|
hiveConnecter.executeSQLByStatement(truncate1); |
||||||
|
hiveConnecter.executeSQLByStatement(truncate2); |
||||||
|
hiveConnecter.executeSQLByStatement(truncate3); |
||||||
|
hiveConnecter.executeSQLByStatement(truncate4); |
||||||
|
hiveConnecter.executeSQLByStatement(truncate5); |
||||||
|
hiveConnecter.executeSQLByStatement(truncate6); |
||||||
|
hiveConnecter.executeSQLByStatement(truncate7); |
||||||
|
hiveConnecter.executeSQLByStatement(truncate8); |
||||||
|
hiveConnecter.executeSQLByStatement(truncate9); |
||||||
|
return true; |
||||||
|
} |
||||||
|
catch (Exception e){ |
||||||
|
return false; |
||||||
|
} |
||||||
|
} |
||||||
|
@GetMapping("/dbcount") |
||||||
|
public List dbcount() throws SQLException, ClassNotFoundException { |
||||||
|
hiveConnecter=HiveConnecter.getInstance(); |
||||||
|
hiveConnecter.getConn(); |
||||||
|
List<String> lists=new ArrayList(); |
||||||
|
ResultSet rs = hiveConnecter.executeQueryBYStatement("select * from ods_weblog_count"); |
||||||
|
while (rs.next()){ |
||||||
|
lists.add(rs.getString(2)); |
||||||
|
} |
||||||
|
lists.forEach(item->{ |
||||||
|
System.out.println(item); |
||||||
|
}); |
||||||
|
rs.close(); |
||||||
|
return lists; |
||||||
|
} |
||||||
|
//总体响应
|
||||||
|
@PostMapping("/alldata") |
||||||
|
public List alldata(){ |
||||||
|
List<Map<String,List>> listmap=new ArrayList<>(); |
||||||
|
Map<String,List> map=new HashMap<>(); |
||||||
|
map.put("weekcount",weekcount()); |
||||||
|
map.put("allpvcount",allpvcount()); |
||||||
|
map.put("browsercount",browsercount()); |
||||||
|
map.put("top5count",top5count()); |
||||||
|
listmap.add(map); |
||||||
|
return listmap; |
||||||
|
} |
||||||
|
//top5
|
||||||
|
@PostMapping("/top5count") |
||||||
|
public List top5count(){ |
||||||
|
List<Map<String, Object>> listmap = new ArrayList<Map<String, Object>>(); |
||||||
|
String sql ="select * from dw_pvs_user"; |
||||||
|
try { |
||||||
|
hiveConnecter=HiveConnecter.getInstance(); |
||||||
|
hiveConnecter.getConn(); |
||||||
|
ResultSet rs = hiveConnecter.executeQueryBYStatement(sql); |
||||||
|
while (rs.next()){ |
||||||
|
Map<String, Object> map = new HashMap<>(); |
||||||
|
map.put("name",rs.getString(1)); |
||||||
|
map.put("count",rs.getString(2)); |
||||||
|
listmap.add(map); |
||||||
|
} |
||||||
|
rs.close(); |
||||||
|
System.out.println(listmap); |
||||||
|
return listmap; |
||||||
|
} catch (Exception e) { |
||||||
|
System.out.println(e); |
||||||
|
return null; |
||||||
|
} |
||||||
|
} |
||||||
|
//每日访问记录折线图
|
||||||
|
@PostMapping("/weekcount") |
||||||
|
public List weekcount(){ |
||||||
|
List<Map<String, Object>> listmap = new ArrayList<Map<String, Object>>(); |
||||||
|
String sql ="select * from dw_pvs_week"; |
||||||
|
try { |
||||||
|
hiveConnecter=HiveConnecter.getInstance(); |
||||||
|
hiveConnecter.getConn(); |
||||||
|
ResultSet rs = hiveConnecter.executeQueryBYStatement(sql); |
||||||
|
while (rs.next()){ |
||||||
|
Map<String, Object> map = new HashMap<>(); |
||||||
|
map.put("logdate",rs.getString(1)); |
||||||
|
map.put("count",rs.getString(2)); |
||||||
|
listmap.add(map); |
||||||
|
} |
||||||
|
rs.close(); |
||||||
|
Collections.sort(listmap, new Comparator<Map<String, Object>>() { |
||||||
|
@Override |
||||||
|
public int compare(Map<String, Object> o1, Map<String, Object> o2) { |
||||||
|
String date1 = (String)o1.get("logdate"); |
||||||
|
String date2 = (String)o2.get("logdate"); |
||||||
|
//降序
|
||||||
|
return date1.compareTo(date2); |
||||||
|
} |
||||||
|
}); |
||||||
|
System.out.println(listmap); |
||||||
|
return listmap; |
||||||
|
} catch (Exception e) { |
||||||
|
System.out.println(e); |
||||||
|
return null; |
||||||
|
} |
||||||
|
} |
||||||
|
@PostMapping("/allpvcount") |
||||||
|
public List allpvcount(){ |
||||||
|
List<Map<String, Object>> listmap = new ArrayList<Map<String, Object>>(); |
||||||
|
String sql ="select * from dw_pvs_all"; |
||||||
|
try { |
||||||
|
hiveConnecter=HiveConnecter.getInstance(); |
||||||
|
hiveConnecter.getConn(); |
||||||
|
ResultSet rs = hiveConnecter.executeQueryBYStatement(sql); |
||||||
|
while (rs.next()){ |
||||||
|
Map<String, Object> map = new HashMap<>(); |
||||||
|
map.put("path",rs.getString(1)); |
||||||
|
map.put("count",rs.getString(2)); |
||||||
|
listmap.add(map); |
||||||
|
} |
||||||
|
rs.close(); |
||||||
|
System.out.println(listmap); |
||||||
|
return listmap; |
||||||
|
} catch (Exception e) { |
||||||
|
System.out.println(e); |
||||||
|
return null; |
||||||
|
} |
||||||
|
} |
||||||
|
@PostMapping("/browsercount") |
||||||
|
public List browsercount() { |
||||||
|
List<Map<String, Object>> listmap = new ArrayList<Map<String, Object>>(); |
||||||
|
String Firefoxsql = "select * from dw_use_browser"; |
||||||
|
try { |
||||||
|
hiveConnecter = HiveConnecter.getInstance(); |
||||||
|
hiveConnecter.getConn(); |
||||||
|
ResultSet rs = hiveConnecter.executeQueryBYStatement(Firefoxsql); |
||||||
|
while (rs.next()) { |
||||||
|
Map<String, Object> map = new HashMap<>(); |
||||||
|
map.put("name", rs.getString(1)); |
||||||
|
map.put("value", rs.getString(2)); |
||||||
|
listmap.add(map); |
||||||
|
} |
||||||
|
rs.close(); |
||||||
|
System.out.println(listmap); |
||||||
|
return listmap; |
||||||
|
} catch (Exception e) { |
||||||
|
System.out.println(e); |
||||||
|
return null; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -1,7 +1,142 @@ |
|||||||
package com.louzin.openhdhapi.test; |
package com.louzin.openhdhapi.test; |
||||||
|
import com.louzin.openhdhapi.utils.HiveConnecter; |
||||||
|
import com.louzin.openhdhapi.utils.WeblogPreProcess; |
||||||
|
import com.louzin.openhdhapi.utils.hdfsapi; |
||||||
|
import org.junit.Test; |
||||||
|
import java.io.IOException; |
||||||
|
import java.sql.ResultSet; |
||||||
|
import java.sql.SQLException; |
||||||
|
import java.util.*; |
||||||
|
|
||||||
public class helloworld { |
public class helloworld { |
||||||
public void helloworldtest(){ |
private static HiveConnecter hiveConnecter; |
||||||
System.out.println("Hello S!"); |
@Test |
||||||
|
public void helloworldtest() throws Exception { |
||||||
|
//加载数据到hive
|
||||||
|
hiveConnecter=HiveConnecter.getInstance(); |
||||||
|
hiveConnecter.getConn(); |
||||||
|
String sql1="set hive.exec.dynamic.partition=true"; |
||||||
|
String sql2="set hive.exec.dynamic.partition.mode=nonstrict"; |
||||||
|
String dropt_ods_tmp_referurl="drop table t_ods_tmp_referurl"; |
||||||
|
String dropt_ods_tmp_detail="drop table t_ods_tmp_detail"; |
||||||
|
hiveConnecter.executeSQLByStatement(sql1); |
||||||
|
hiveConnecter.executeSQLByStatement(sql2); |
||||||
|
//判断双表是否存在
|
||||||
|
ResultSet rs = hiveConnecter.executeQueryBYStatement("show tables in datacenter like 't_ods_tmp_referurl'"); |
||||||
|
if(rs.next()){ |
||||||
|
System.out.println("t_ods_tmp_referurl表存在!"); |
||||||
|
hiveConnecter.executeSQLByStatement(dropt_ods_tmp_referurl); |
||||||
|
System.out.println("referurl删除成功"); |
||||||
|
} |
||||||
|
rs=hiveConnecter.executeQueryBYStatement("show tables in datacenter like 't_ods_tmp_detail'"); |
||||||
|
if(rs.next()){ |
||||||
|
System.out.println("t_ods_tmp_detail表存在!"); |
||||||
|
hiveConnecter.executeSQLByStatement(dropt_ods_tmp_detail); |
||||||
|
System.out.println("detail删除成功"); |
||||||
|
} |
||||||
|
//创建中间表
|
||||||
|
String createreferurl="create table t_ods_tmp_referurl as SELECT a.*,b.*\n" + |
||||||
|
" FROM ods_weblog_origin a LATERAL VIEW \n" + |
||||||
|
" parse_url_tuple(regexp_replace(http_referer, \"\\\"\", \"\"),\n" + |
||||||
|
" 'HOST', 'PATH','QUERY', 'QUERY:id') b as host, path, query, query_id"; |
||||||
|
hiveConnecter.executeSQLByStatement(createreferurl); |
||||||
|
String createdetail="create table t_ods_tmp_detail as select b.*,substring(time_local,0,10) as daystr,\n" + |
||||||
|
" substring(time_local,12) as tmstr,\n" + |
||||||
|
" substring(time_local,6,2) as month,\n" + |
||||||
|
" substring(time_local,9,2) as day,\n" + |
||||||
|
" substring(time_local,11,3) as hour\n" + |
||||||
|
" from t_ods_tmp_referurl b"; |
||||||
|
hiveConnecter.executeSQLByStatement(createdetail); |
||||||
|
String insertOverWritedetail="insert overwrite table ods_weblog_detail partition(datestr)\n" + |
||||||
|
" select distinct otd.valid,otd.remote_addr,otd.remote_user,\n" + |
||||||
|
" otd.time_local,otd.daystr,otd.tmstr,otd.month,otd.day,otd.hour,\n" + |
||||||
|
" otr.request,otr.status,otr.body_bytes_sent,\n" + |
||||||
|
" otr.http_referer,otr.host,otr.path,\n" + |
||||||
|
" otr.query,otr.query_id,otr.http_user_agent,otd.daystr\n" + |
||||||
|
" from t_ods_tmp_detail as otd,t_ods_tmp_referurl as otr \n" + |
||||||
|
" where otd.remote_addr=otr.remote_addr \n" + |
||||||
|
" and otd.time_local=otr.time_local \n" + |
||||||
|
" and otd.body_bytes_sent=otr.body_bytes_sent \n" + |
||||||
|
" and otd.request=otr.request"; |
||||||
|
hiveConnecter.executeSQLByStatement(insertOverWritedetail); |
||||||
|
System.out.println("数据入库完成"); |
||||||
|
} |
||||||
|
@Test |
||||||
|
public void loaddata(){ |
||||||
|
String loadatapath="/result/flume/events/23-05-17/1440/"; |
||||||
|
String loadsql="load data inpath '"+loadatapath+"' into table ods_weblog_origin"; |
||||||
|
try { |
||||||
|
hiveConnecter=HiveConnecter.getInstance(); |
||||||
|
hiveConnecter.getConn(); |
||||||
|
hiveConnecter.executeSQLByStatement(loadsql); |
||||||
|
System.out.println("load success!"); |
||||||
|
new hdfsapi().deleteFolder(loadatapath); |
||||||
|
} catch (Exception e) { |
||||||
|
System.out.println(e); |
||||||
|
} |
||||||
|
} |
||||||
|
@Test |
||||||
|
public void weekcount(){ |
||||||
|
// Map<String,String> map=new HashMap<>();
|
||||||
|
List<Map<String, Object>> listmap = new ArrayList<Map<String, Object>>(); |
||||||
|
String Firefoxsql="select COUNT(*) as pvs from ods_weblog_detail WHERE http_user_agent like '%Firefox%'"; |
||||||
|
String Chromesql="select COUNT(*) as pvs from ods_weblog_detail WHERE http_user_agent like '%Chrome%'"; |
||||||
|
String MobileSafarisql="select COUNT(*) as pvs from ods_weblog_detail WHERE http_user_agent like '%MobileSafari%'"; |
||||||
|
String Tridentsql="select COUNT(*) as pvs from ods_weblog_detail WHERE http_user_agent like '%Trident%'"; |
||||||
|
String Safarisql="select COUNT(*) as pvs from ods_weblog_detail WHERE http_user_agent like '%Safari%'"; |
||||||
|
try { |
||||||
|
hiveConnecter=HiveConnecter.getInstance(); |
||||||
|
hiveConnecter.getConn(); |
||||||
|
ResultSet rs = hiveConnecter.executeQueryBYStatement(Firefoxsql); |
||||||
|
while (rs.next()){ |
||||||
|
Map<String, Object> map = new HashMap<>(); |
||||||
|
map.put("browser","firefox"); |
||||||
|
map.put("count",rs.getString(1)); |
||||||
|
listmap.add(map); |
||||||
|
} |
||||||
|
rs = hiveConnecter.executeQueryBYStatement(Chromesql); |
||||||
|
while (rs.next()){ |
||||||
|
Map<String, Object> map = new HashMap<>(); |
||||||
|
map.put("browser","Chrome"); |
||||||
|
map.put("count",rs.getString(1)); |
||||||
|
listmap.add(map); |
||||||
|
} |
||||||
|
rs = hiveConnecter.executeQueryBYStatement(MobileSafarisql); |
||||||
|
while (rs.next()){ |
||||||
|
Map<String, Object> map = new HashMap<>(); |
||||||
|
map.put("browser","MobileSafari"); |
||||||
|
map.put("count",rs.getString(1)); |
||||||
|
listmap.add(map); |
||||||
|
} |
||||||
|
rs = hiveConnecter.executeQueryBYStatement(Tridentsql); |
||||||
|
while (rs.next()){ |
||||||
|
Map<String, Object> map = new HashMap<>(); |
||||||
|
map.put("browser","IE/Edge"); |
||||||
|
map.put("count",rs.getString(1)); |
||||||
|
listmap.add(map); |
||||||
|
} |
||||||
|
rs = hiveConnecter.executeQueryBYStatement(Safarisql); |
||||||
|
while (rs.next()){ |
||||||
|
Map<String, Object> map = new HashMap<>(); |
||||||
|
map.put("browser","Safari"); |
||||||
|
map.put("count",rs.getString(1)); |
||||||
|
listmap.add(map); |
||||||
|
} |
||||||
|
// Collections.sort(listmap, new Comparator<Map<String, Object>>() {
|
||||||
|
// @Override
|
||||||
|
// public int compare(Map<String, Object> o1, Map<String, Object> o2) {
|
||||||
|
// String date1 = (String)o1.get("logdate");
|
||||||
|
// String date2 = (String)o2.get("logdate");
|
||||||
|
// //降序
|
||||||
|
// return date1.compareTo(date2);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
System.out.println(listmap); |
||||||
|
// map.forEach((key,value)->{
|
||||||
|
// System.out.println(key+" "+value);
|
||||||
|
// });
|
||||||
|
} catch (Exception e) { |
||||||
|
System.out.println(e); |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
@ -0,0 +1,104 @@ |
|||||||
|
package com.louzin.openhdhapi.utils; |
||||||
|
|
||||||
|
import org.junit.After; |
||||||
|
import org.junit.Before; |
||||||
|
import org.junit.Test; |
||||||
|
|
||||||
|
import java.sql.*; |
||||||
|
import java.util.ArrayList; |
||||||
|
import java.util.List; |
||||||
|
import java.util.Map; |
||||||
|
|
||||||
|
public class jdbcHiveConnect { |
||||||
|
public jdbcHiveConnect(){} |
||||||
|
private static String driverName = "org.apache.hive.jdbc.HiveDriver"; |
||||||
|
private static String url = "jdbc:hive2://local1:10000/datacenter"; |
||||||
|
private static String user = "root"; |
||||||
|
private static String password = ""; |
||||||
|
private static Connection conn = null; |
||||||
|
private static Statement stmt = null; |
||||||
|
private static ResultSet rs = null; |
||||||
|
// 加载驱动、创建连接
|
||||||
|
@Before |
||||||
|
public void init() throws Exception { |
||||||
|
Class.forName(driverName); |
||||||
|
conn = DriverManager.getConnection(url,user,password); |
||||||
|
stmt = conn.createStatement(); |
||||||
|
} |
||||||
|
@Test |
||||||
|
public List<String> showAllTable() throws SQLException, ClassNotFoundException { |
||||||
|
Class.forName(driverName); |
||||||
|
conn = DriverManager.getConnection(url,user,password); |
||||||
|
stmt = conn.createStatement(); |
||||||
|
String sql="show tables"; |
||||||
|
rs=stmt.executeQuery(sql); |
||||||
|
List<String> lists=new ArrayList<>(); |
||||||
|
while (rs.next()){ |
||||||
|
System.out.println(rs.getString(1)); |
||||||
|
lists.add(rs.getString(1)); |
||||||
|
} |
||||||
|
if ( rs != null) { |
||||||
|
rs.close(); |
||||||
|
} |
||||||
|
if (stmt != null) { |
||||||
|
stmt.close(); |
||||||
|
} |
||||||
|
if (conn != null) { |
||||||
|
conn.close(); |
||||||
|
} |
||||||
|
return lists; |
||||||
|
} |
||||||
|
@Test |
||||||
|
public void selectData_all_true() throws SQLException { |
||||||
|
String sql="select * from ods_weblog_detail owd where valid ='true'"; |
||||||
|
rs=stmt.executeQuery(sql); |
||||||
|
List lists=new ArrayList<>(); |
||||||
|
while (rs.next()){ |
||||||
|
List copylist=new ArrayList<>(); |
||||||
|
copylist.add(rs.getString("remote_addr")); |
||||||
|
copylist.add(rs.getString("time_local")); |
||||||
|
copylist.add(rs.getString("daystr")); |
||||||
|
copylist.add(rs.getString("request")); |
||||||
|
lists.add(copylist); |
||||||
|
} |
||||||
|
lists.forEach(item-> System.out.println(item.toString())); |
||||||
|
} |
||||||
|
@Test |
||||||
|
public List selectData_day_pv() throws SQLException, ClassNotFoundException { |
||||||
|
Class.forName(driverName); |
||||||
|
conn = DriverManager.getConnection(url,user,password); |
||||||
|
stmt = conn.createStatement(); |
||||||
|
String sql="select remote_addr,COUNT(remote_addr)as pv" + |
||||||
|
" from ods_weblog_detail" + |
||||||
|
" group by remote_addr order by pv desc limit 10"; |
||||||
|
rs=stmt.executeQuery(sql); |
||||||
|
List lists=new ArrayList<>(); |
||||||
|
while (rs.next()){ |
||||||
|
Map<String,String> copymap=Map.of("value",rs.getString(2),"name",rs.getString(1)); |
||||||
|
lists.add(copymap); |
||||||
|
} |
||||||
|
if ( rs != null) { |
||||||
|
rs.close(); |
||||||
|
} |
||||||
|
if (stmt != null) { |
||||||
|
stmt.close(); |
||||||
|
} |
||||||
|
if (conn != null) { |
||||||
|
conn.close(); |
||||||
|
} |
||||||
|
// return lists;
|
||||||
|
return lists; |
||||||
|
} |
||||||
|
@After |
||||||
|
public void destory() throws Exception { |
||||||
|
if ( rs != null) { |
||||||
|
rs.close(); |
||||||
|
} |
||||||
|
if (stmt != null) { |
||||||
|
stmt.close(); |
||||||
|
} |
||||||
|
if (conn != null) { |
||||||
|
conn.close(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -1,383 +1,476 @@ |
|||||||
<template> |
<template> |
||||||
<div id="myechart"> |
<div id="myechart"> |
||||||
<div id="topdiv" class="abox mtop10px" style="margin-top: 10px;"> |
<div id="topdiv" class="abox mtop10px" style="margin-top: 10px;"> |
||||||
<!-- 第1个图表 --> |
<!-- 第1个图表 --> |
||||||
<div class="radisbd" style="width: 32%;"> |
<div class="radisbd" style="width: 32%;"> |
||||||
<div id="echart1" class="echartrs"></div> |
<div id="echart1" class="echartrs"></div> |
||||||
</div> |
</div> |
||||||
<!-- 第2个图表 --> |
<!-- 第2个图表 --> |
||||||
<div class="radisbd" style="width: 32%;"> |
<div class="radisbd" style="width: 32%;"> |
||||||
<div id="echart2" class="echartrs" style="height: 290px;"></div> |
<div id="echart2" class="echartrs" style="height: 290px;"></div> |
||||||
</div> |
</div> |
||||||
<!-- 第3个图表 --> |
<!-- 第3个图表 --> |
||||||
<div class="radisbd" style="width: 32%;"> |
<div class="radisbd" style="width: 32%;"> |
||||||
<div id="echart3" class="echartrs"></div> |
<div id="echart3" class="echartrs"></div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div id="middiv" class="abox" style="margin-top: 20px;"> |
<div id="middiv" class="abox" style="margin-top: 20px;"> |
||||||
<div class="radisbd" style="width: 32%;"> |
<div class="radisbd" style="width: 32%;"> |
||||||
<div id="echart4" style="height: 300px;"></div> |
<div id="echart4" style="height: 300px;"></div> |
||||||
</div> |
</div> |
||||||
<div class="radisbd" style="width: 65%;"> |
<div class="radisbd" style="width: 65%;"> |
||||||
<div id="echart5" style="height: 300px;"> |
<div id="echart5" style="height: 300px;"> |
||||||
|
|
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<!-- <div id="bottomdiv" class="abox mtop10px" style="margin-top: 20px;">3</div> --> |
<!-- <div id="bottomdiv" class="abox mtop10px" style="margin-top: 20px;">3</div> --> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import * as echarts from 'echarts'; |
import axios from 'axios'; |
||||||
export default{ |
import * as echarts from 'echarts'; |
||||||
name:"myechart", |
export default { |
||||||
data() { |
name: "myechart", |
||||||
return{ |
data() { |
||||||
|
return { |
||||||
} |
ec1data: [], |
||||||
}, |
ec1data2: [], |
||||||
methods:{ |
ec2data: [4, 5, 6, 7], |
||||||
drawechart1(){ |
ec3data: [], |
||||||
var chartDom = document.getElementById('echart1'); |
ec3data2: [], |
||||||
var myChart = echarts.init(chartDom); |
ec4data: [], |
||||||
var option; |
ec4data: [], |
||||||
option = { |
ec5data: [], |
||||||
xAxis: { |
ec5data2: [], |
||||||
type: 'category', |
} |
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
}, |
||||||
}, |
methods: { |
||||||
yAxis: {type: 'value'}, |
getdataec1() { |
||||||
series: [ |
var that = this |
||||||
{ |
axios.post("/alldata").then(resp => { |
||||||
data: [150, 230, 224, 218, 135, 147, 260], |
// resp.data[0].weekcount(item=>{ |
||||||
type: 'line' |
// this.ec1data.push(item.logdate); |
||||||
} |
// this.ec1data2.push(item.count); |
||||||
] |
// }) |
||||||
}; |
console.log(resp.data[0]); |
||||||
option && myChart.setOption(option); |
for (var i = 0; i < resp.data[0].weekcount.length; i++) { |
||||||
}, |
that.ec1data.push(resp.data[0].weekcount[i].logdate) |
||||||
drawechart2(){ |
that.ec1data2.push(resp.data[0].weekcount[i].count) |
||||||
var chartDom = document.getElementById('echart2'); |
} |
||||||
var myChart = echarts.init(chartDom); |
for (var i = 0; i < resp.data[0].allpvcount.length; i++) { |
||||||
var option; |
that.ec5data.push(resp.data[0].allpvcount[i].path) |
||||||
option = { |
that.ec5data2.push(resp.data[0].allpvcount[i].count) |
||||||
title: { |
} |
||||||
text: '周访问追踪', |
for (var i = 0; i < resp.data[0].top5count.length; i++) { |
||||||
left: 'left', |
that.ec3data.push(resp.data[0].top5count[i].name) |
||||||
textStyle: { |
that.ec3data2.push(resp.data[0].top5count[i].count) |
||||||
fontSize: 10 |
} |
||||||
} |
that.ec4data = resp.data[0].browsercount |
||||||
}, |
console.log("渲染数据完成!"); |
||||||
tooltip: { |
}).catch(function(error) { |
||||||
trigger: 'axis', |
console.log(error); |
||||||
axisPointer: { |
that.$message({ |
||||||
type: 'cross', |
showClose: true, |
||||||
label: { |
message: '请求出错!请检查是否开启集群或联系管理员!', |
||||||
backgroundColor: '#6a7985' |
type: 'error' |
||||||
} |
}); |
||||||
} |
}) |
||||||
}, |
setTimeout(function() { |
||||||
legend: { |
that.drawechart1() |
||||||
data: ['Ip1', 'Ip2', 'Ip3', 'Ip4', 'Ip5'] |
that.drawechart2() |
||||||
}, |
that.drawechart3() |
||||||
toolbox: { |
that.drawechart4() |
||||||
feature: { |
that.drawechart5() |
||||||
saveAsImage: {} |
}, 2000); |
||||||
} |
}, |
||||||
}, |
drawechart1() { |
||||||
grid: { |
var chartDom = document.getElementById('echart1'); |
||||||
left: '3%', |
var myChart1 = echarts.init(chartDom); |
||||||
right: '4%', |
var option; |
||||||
bottom: '3%', |
option = { |
||||||
containLabel: true |
xAxis: { |
||||||
}, |
type: 'category', |
||||||
xAxis: [ |
data: this.ec1data, |
||||||
{ |
axisLabel: { |
||||||
type: 'category', |
textStyle: { |
||||||
boundaryGap: false, |
fontSize: '6' |
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
} |
||||||
} |
} |
||||||
], |
}, |
||||||
yAxis: [ |
yAxis: { |
||||||
{ |
type: 'value' |
||||||
type: 'value' |
}, |
||||||
} |
series: [{ |
||||||
], |
data: this.ec1data2, |
||||||
series: [ |
type: 'line' |
||||||
{ |
}], |
||||||
name: 'Ip1', |
tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据 |
||||||
type: 'line', |
trigger: 'axis', |
||||||
stack: 'Total', |
backgroundColor: 'rgba(32, 33, 36,.7)', |
||||||
areaStyle: {}, |
borderColor: 'rgba(32, 33, 36,0.20)', |
||||||
emphasis: { |
borderWidth: 1, |
||||||
focus: 'series' |
textStyle: { // 文字提示样式 |
||||||
}, |
color: '#fff', |
||||||
data: [120, 132, 101, 134, 90, 230, 210] |
fontSize: '12' |
||||||
}, |
}, |
||||||
{ |
axisPointer: { // 坐标轴虚线 |
||||||
name: 'Ip2', |
type: 'cross', |
||||||
type: 'line', |
label: { |
||||||
stack: 'Total', |
backgroundColor: '#6a7985' |
||||||
areaStyle: {}, |
} |
||||||
emphasis: { |
}, |
||||||
focus: 'series' |
} |
||||||
}, |
}; |
||||||
data: [220, 182, 191, 234, 290, 330, 310] |
option && myChart1.setOption(option); |
||||||
}, |
}, |
||||||
{ |
drawechart2() { |
||||||
name: 'Ip3', |
var chartDom = document.getElementById('echart2'); |
||||||
type: 'line', |
var myChart = echarts.init(chartDom); |
||||||
stack: 'Total', |
var option; |
||||||
areaStyle: {}, |
option = { |
||||||
emphasis: { |
title: { |
||||||
focus: 'series' |
text: '周访问追踪', |
||||||
}, |
left: 'left', |
||||||
data: [150, 232, 201, 154, 190, 330, 410] |
textStyle: { |
||||||
}, |
fontSize: 10 |
||||||
{ |
} |
||||||
name: 'Ip4', |
}, |
||||||
type: 'line', |
tooltip: { |
||||||
stack: 'Total', |
trigger: 'axis', |
||||||
areaStyle: {}, |
axisPointer: { |
||||||
emphasis: { |
type: 'cross', |
||||||
focus: 'series' |
label: { |
||||||
}, |
backgroundColor: '#6a7985' |
||||||
data: [320, 332, 301, 334, 390, 330, 320] |
} |
||||||
}, |
} |
||||||
{ |
}, |
||||||
name: 'Ip5', |
legend: { |
||||||
type: 'line', |
data: ['Ip1', 'Ip2', 'Ip3', 'Ip4', 'Ip5'] |
||||||
stack: 'Total', |
}, |
||||||
label: { |
toolbox: { |
||||||
show: true, |
feature: { |
||||||
position: 'top' |
saveAsImage: {} |
||||||
}, |
} |
||||||
areaStyle: {}, |
}, |
||||||
emphasis: { |
grid: { |
||||||
focus: 'series' |
left: '3%', |
||||||
}, |
right: '4%', |
||||||
data: [820, 932, 901, 934, 1290, 1330, 1320] |
bottom: '3%', |
||||||
} |
containLabel: true |
||||||
] |
}, |
||||||
}; |
xAxis: [{ |
||||||
option && myChart.setOption(option); |
type: 'category', |
||||||
}, |
boundaryGap: false, |
||||||
drawechart3(){ |
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
||||||
var chartDom = document.getElementById('echart3'); |
}], |
||||||
var myChart = echarts.init(chartDom); |
yAxis: [{ |
||||||
var option; |
type: 'value' |
||||||
option = { |
}], |
||||||
xAxis: { |
series: [{ |
||||||
type: 'category', |
name: 'Ip1', |
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
type: 'line', |
||||||
}, |
stack: 'Total', |
||||||
yAxis: { |
areaStyle: {}, |
||||||
type: 'value' |
emphasis: { |
||||||
}, |
focus: 'series' |
||||||
series: [ |
}, |
||||||
{ |
data: [120, 132, 101, 134, 90, 230, 210] |
||||||
data: [120, 200, 150, 80, 70, 110, 130], |
}, |
||||||
type: 'bar', |
{ |
||||||
showBackground: true, |
name: 'Ip2', |
||||||
backgroundStyle: { |
type: 'line', |
||||||
color: 'rgba(180, 180, 180, 0.2)' |
stack: 'Total', |
||||||
} |
areaStyle: {}, |
||||||
} |
emphasis: { |
||||||
] |
focus: 'series' |
||||||
}; |
}, |
||||||
option && myChart.setOption(option); |
data: [220, 182, 191, 234, 290, 330, 310] |
||||||
}, |
}, |
||||||
drawechart4(){ |
{ |
||||||
var chartDom = document.getElementById('echart4'); |
name: 'Ip3', |
||||||
var myChart = echarts.init(chartDom); |
type: 'line', |
||||||
var option; |
stack: 'Total', |
||||||
option = { |
areaStyle: {}, |
||||||
tooltip: { |
emphasis: { |
||||||
trigger: 'item' |
focus: 'series' |
||||||
}, |
}, |
||||||
legend: { |
data: [150, 232, 201, 154, 190, 330, 410] |
||||||
top: '5%', |
}, |
||||||
left: 'center' |
{ |
||||||
}, |
name: 'Ip4', |
||||||
series: [ |
type: 'line', |
||||||
{ |
stack: 'Total', |
||||||
name: 'Access From', |
areaStyle: {}, |
||||||
type: 'pie', |
emphasis: { |
||||||
radius: ['40%', '70%'], |
focus: 'series' |
||||||
avoidLabelOverlap: false, |
}, |
||||||
itemStyle: { |
data: [320, 332, 301, 334, 390, 330, 320] |
||||||
borderRadius: 10, |
}, |
||||||
borderColor: '#fff', |
{ |
||||||
borderWidth: 2 |
name: 'Ip5', |
||||||
}, |
type: 'line', |
||||||
label: { |
stack: 'Total', |
||||||
show: false, |
label: { |
||||||
position: 'center' |
show: true, |
||||||
}, |
position: 'top' |
||||||
emphasis: { |
}, |
||||||
label: { |
areaStyle: {}, |
||||||
show: true, |
emphasis: { |
||||||
fontSize: 40, |
focus: 'series' |
||||||
fontWeight: 'bold' |
}, |
||||||
} |
data: [820, 932, 901, 934, 1290, 1330, 1320] |
||||||
}, |
} |
||||||
labelLine: { |
] |
||||||
show: false |
}; |
||||||
}, |
option && myChart.setOption(option); |
||||||
data: [ |
}, |
||||||
{ value: 1048, name: 'Ip1' }, |
drawechart3() { |
||||||
{ value: 735, name: 'Ip2' }, |
var chartDom = document.getElementById('echart3'); |
||||||
{ value: 580, name: 'Ip3' }, |
var myChart = echarts.init(chartDom); |
||||||
{ value: 484, name: 'Ip4' }, |
var option; |
||||||
{ value: 300, name: 'Ip5' } |
option = { |
||||||
] |
xAxis: { |
||||||
} |
type: 'category', |
||||||
] |
data: this.ec3data, |
||||||
}; |
axisLabel: { |
||||||
option && myChart.setOption(option); |
textStyle: { |
||||||
}, |
fontSize: '6' |
||||||
drawechart5(){ |
} |
||||||
var chartDom = document.getElementById('echart5'); |
} |
||||||
var myChart = echarts.init(chartDom); |
}, |
||||||
var option; |
yAxis: { |
||||||
// prettier-ignore |
type: 'value' |
||||||
let dataAxis = ['M1', 'M2', 'M3', 'D1', 'D2', 'D3', 'H1', 'H2', 'H3', 'J4', 'J3', 'J2', 'J1', 'L1', 'L2', 'L3', 'L4', 'L5', 'L6', 'L7']; |
}, |
||||||
// prettier-ignore |
series: [{ |
||||||
let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220]; |
data: this.ec3data2, |
||||||
let yMax = 500; |
type: 'bar', |
||||||
let dataShadow = []; |
showBackground: true, |
||||||
for (let i = 0; i < data.length; i++) { |
backgroundStyle: { |
||||||
dataShadow.push(yMax); |
color: 'rgba(180, 180, 180, 0.2)' |
||||||
} |
} |
||||||
option = { |
}], |
||||||
title: { |
tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据 |
||||||
text: 'PV总览', |
trigger: 'axis', |
||||||
subtext: 'PVS 汇总' |
backgroundColor: 'rgba(32, 33, 36,.7)', |
||||||
}, |
borderColor: 'rgba(32, 33, 36,0.20)', |
||||||
xAxis: { |
borderWidth: 1, |
||||||
data: dataAxis, |
textStyle: { // 文字提示样式 |
||||||
axisLabel: { |
color: '#fff', |
||||||
inside: true, |
fontSize: '12' |
||||||
color: '#fff' |
}, |
||||||
}, |
axisPointer: { // 坐标轴虚线 |
||||||
axisTick: { |
type: 'cross', |
||||||
show: false |
label: { |
||||||
}, |
backgroundColor: '#6a7985' |
||||||
axisLine: { |
} |
||||||
show: false |
}, |
||||||
}, |
} |
||||||
z: 10 |
}; |
||||||
}, |
option && myChart.setOption(option); |
||||||
yAxis: { |
}, |
||||||
axisLine: { |
drawechart4() { |
||||||
show: false |
var chartDom = document.getElementById('echart4'); |
||||||
}, |
var myChart = echarts.init(chartDom); |
||||||
axisTick: { |
var option; |
||||||
show: false |
option = { |
||||||
}, |
tooltip: { |
||||||
axisLabel: { |
trigger: 'item' |
||||||
color: '#999' |
}, |
||||||
} |
legend: { |
||||||
}, |
top: '5%', |
||||||
dataZoom: [ |
left: 'center' |
||||||
{ |
}, |
||||||
type: 'inside' |
series: [{ |
||||||
} |
name: 'Access From', |
||||||
], |
type: 'pie', |
||||||
series: [ |
radius: ['40%', '70%'], |
||||||
{ |
avoidLabelOverlap: false, |
||||||
type: 'bar', |
itemStyle: { |
||||||
showBackground: true, |
borderRadius: 10, |
||||||
itemStyle: { |
borderColor: '#fff', |
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
borderWidth: 2 |
||||||
{ offset: 0, color: '#83bff6' }, |
}, |
||||||
{ offset: 0.5, color: '#188df0' }, |
label: { |
||||||
{ offset: 1, color: '#188df0' } |
show: false, |
||||||
]) |
position: 'center' |
||||||
}, |
}, |
||||||
emphasis: { |
emphasis: { |
||||||
itemStyle: { |
label: { |
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
show: true, |
||||||
{ offset: 0, color: '#2378f7' }, |
fontSize: 40, |
||||||
{ offset: 0.7, color: '#2378f7' }, |
fontWeight: 'bold' |
||||||
{ offset: 1, color: '#83bff6' } |
} |
||||||
]) |
}, |
||||||
} |
labelLine: { |
||||||
}, |
show: false |
||||||
data: data |
}, |
||||||
} |
data: this.ec4data |
||||||
] |
}] |
||||||
}; |
}; |
||||||
// Enable data zoom when user click bar. |
option && myChart.setOption(option); |
||||||
const zoomSize = 6; |
}, |
||||||
myChart.on('click', function (params) { |
drawechart5() { |
||||||
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]); |
var chartDom = document.getElementById('echart5'); |
||||||
myChart.dispatchAction({ |
var myChart = echarts.init(chartDom); |
||||||
type: 'dataZoom', |
var option; |
||||||
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], |
// prettier-ignore |
||||||
endValue: |
let dataAxis = this.ec5data; |
||||||
dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)] |
// prettier-ignore |
||||||
}); |
let data = this.ec5data2; |
||||||
}); |
let yMax = 500; |
||||||
option && myChart.setOption(option); |
let dataShadow = []; |
||||||
} |
for (let i = 0; i < data.length; i++) { |
||||||
}, |
dataShadow.push(yMax); |
||||||
mounted() { |
} |
||||||
this.drawechart1() |
option = { |
||||||
this.drawechart2() |
title: { |
||||||
this.drawechart3() |
text: 'PV总览', |
||||||
this.drawechart4() |
subtext: 'PVS 汇总' |
||||||
this.drawechart5() |
}, |
||||||
} |
xAxis: { |
||||||
} |
data: dataAxis, |
||||||
|
axisLabel: { |
||||||
|
inside: true, |
||||||
|
color: '#fff' |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
z: 10 |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
axisLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
color: '#999' |
||||||
|
} |
||||||
|
}, |
||||||
|
dataZoom: [{ |
||||||
|
type: 'inside' |
||||||
|
}], |
||||||
|
series: [{ |
||||||
|
type: 'bar', |
||||||
|
showBackground: true, |
||||||
|
itemStyle: { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||||
|
offset: 0, |
||||||
|
color: '#83bff6' |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 0.5, |
||||||
|
color: '#188df0' |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: '#188df0' |
||||||
|
} |
||||||
|
]) |
||||||
|
}, |
||||||
|
emphasis: { |
||||||
|
itemStyle: { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||||
|
offset: 0, |
||||||
|
color: '#2378f7' |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 0.7, |
||||||
|
color: '#2378f7' |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: '#83bff6' |
||||||
|
} |
||||||
|
]) |
||||||
|
} |
||||||
|
}, |
||||||
|
data: data |
||||||
|
}] |
||||||
|
}; |
||||||
|
// Enable data zoom when user click bar. |
||||||
|
const zoomSize = 6; |
||||||
|
myChart.on('click', function(params) { |
||||||
|
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]); |
||||||
|
myChart.dispatchAction({ |
||||||
|
type: 'dataZoom', |
||||||
|
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], |
||||||
|
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)] |
||||||
|
}); |
||||||
|
}); |
||||||
|
option && myChart.setOption(option); |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
// this.drawechart2() |
||||||
|
// this.drawechart3() |
||||||
|
// this.drawechart4() |
||||||
|
this.getdataec1() |
||||||
|
// this.getdataec3() |
||||||
|
// this.getdataec5() |
||||||
|
} |
||||||
|
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped> |
<style scoped> |
||||||
.radisbd{ |
.radisbd { |
||||||
background-color: white; |
background-color: white; |
||||||
border-radius: 15px; |
border-radius: 15px; |
||||||
box-shadow: 6px 6px 2px 1px rgba(0, 0, 255, .2); |
box-shadow: 6px 6px 2px 1px rgba(0, 0, 255, .2); |
||||||
} |
} |
||||||
.mtop10px{ |
|
||||||
margin-top: 10px; |
.mtop10px { |
||||||
} |
margin-top: 10px; |
||||||
.mtop20px{ |
} |
||||||
margin-top: 20px; |
|
||||||
} |
.mtop20px { |
||||||
.mtop40px{ |
margin-top: 20px; |
||||||
margin-top: 40px; |
} |
||||||
} |
|
||||||
.echartrs{ |
.mtop40px { |
||||||
width: 100%; |
margin-top: 40px; |
||||||
height: 300px; |
} |
||||||
margin: 0 auto; |
|
||||||
line-height: 300px; |
.echartrs { |
||||||
margin-top: 10px; |
width: 100%; |
||||||
} |
height: 300px; |
||||||
.abox{ |
margin: 0 auto; |
||||||
height: 300px; |
line-height: 300px; |
||||||
width: 100%; |
margin-top: 10px; |
||||||
margin: 0 auto; |
} |
||||||
display: flex; |
|
||||||
justify-content: space-around; |
.abox { |
||||||
} |
height: 300px; |
||||||
#myechart{ |
width: 100%; |
||||||
width: 100%; |
margin: 0 auto; |
||||||
height: 960px; |
display: flex; |
||||||
background-color: #F3F4FA; |
justify-content: space-around; |
||||||
display: flex; |
} |
||||||
flex-direction: column; |
|
||||||
} |
#myechart { |
||||||
#topdiv{ |
width: 100%; |
||||||
|
height: 760px; |
||||||
|
background-color: #F3F4FA; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
#topdiv {} |
||||||
|
|
||||||
|
#middiv { |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
|
||||||
} |
#bottomdiv { |
||||||
#middiv{ |
background-color: blue; |
||||||
display: flex; |
|
||||||
justify-content: space-around; |
|
||||||
} |
|
||||||
#bottomdiv{ |
|
||||||
background-color: blue; |
|
||||||
|
|
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
Loading…
Reference in new issue