<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" import="java.sql.*"%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<form >
<table align="center">
<tr>
<%String limit = "";
String limit2 = ""; %>
<td>
单位名: <input type="text" name="limit" value="<%=limit%>">
</td>
<td>
需求名:<input type="text" name="limit2" value="<%=limit2%>">
<input type="submit" name="submit" id="submit" value="查询" >
</td>
</tr>
</table>
</form>
<form name="form1" id="form1" action="">
<table align="center" border="1" width="900" name="table1" id="table1">
<tbody id="table">
<tr>
<td>ip</td>
<!-- <td>需求状态</td> -->
<td>数量</td>
</tr>
<jsp:useBean id="db" class="DBBean.Bean" scope="page" />
<%
String Ip = "";
String data = "";
String time = "";
String number = "";
String type = "";
String sql="";
String sql2="";
String tijiao="";
String baocun="";
String data1="";
String data2="";
String data3="";
String data4="";
String data5="";
String data6="";
String ata1="";
String ata2="";
String ata3="";
String ata4="";
String ata5="";
String ata6="";
String order = request.getParameter("limit");
String order2 = request.getParameter("limit2");
String ip1="119.131.143.179";
String ip2="114.248.224.214";
String ip3="115.193.172.253";
String ip4="183.39.154.199";
String ip5="117.100.231.8";
String ip6="122.71.75.164";
// System.out.println("需求管理界面的：" + Iname);
sql="select count(case when ip='119.131.143.179' then 1 end) as'119.131.143.179',count(case when ip='114.248.224.214' then 1 end) as'114.248.224.214',count(case when ip='115.193.172.253' then 1 end) as'115.193.172.253',count(case when ip='183.39.154.199' then 1 end) as'183.39.154.199', count(case when ip='117.100.231.8' then 1 end) as'117.100.231.8', count(case when ip='122.71.75.164' then 1 end) as'122.71.75.164'from hbase";
//sql="select ip from ";
// sql2="select count(case when iresult='已提交' then 1 end) as 已提交,count(case when iresult='已保存' then 1 end) as 已保存,count(case when iresult='形式审核未通过' then 1 end) as 形式审核未通过,count(case when iresult='形式审核通过' then 1 end) as 形式审核通过, count(case when iresult='技术审核未通过' then 1 end) as 技术审核未通过, count(case when iresult='技术审核通过' then 1 end) as 技术审核通过 from xuqiu";
ResultSet da = db.executeQuery(sql);
while (da.next()) {
//System.out.println(rs.getString(1)); //可以输出Inamenum的所有值 比如Iname为图书馆 那么输出图书馆1 图书馆2 图书馆3
data1=da.getString(1);
data2=da.getString(2);
data3=da.getString(3);
data4=da.getString(4);
data5=da.getString(5);
data6=da.getString(6);
out.println("<tr><td>" +ip1 + "</td><td>" + data1 + "</td></tr>");
out.println("<tr><td>" +ip2 + "</td><td>" + data2 + "</td></tr>");
out.println("<tr><td>" +ip3 + "</td><td>" + data3 + "</td></tr>");
out.println("<tr><td>" +ip4 + "</td><td>" + data4 + "</td></tr>");
out.println("<tr><td>" +ip5 + "</td><td>" + data5 + "</td></tr>");
out.println("<tr><td>" +ip6 + "</td><td>" + data6 + "</td></tr>");
}
%>
</tbody>
</table>
</form>
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="keshihua/bingtu/echarts.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/echarts-gl.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/ecStat.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/dataTool.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/china.js"></script>
<script type="text/javascript" src="keshihua/bingtu/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['119.131.143.179', '114.248.224.214', '115.193.172.253', '183.39.154.199', '117.100.231.8', '122.71.75.164']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: <%=data1%>, name: '119.131.143.179'},
{value: <%=data2%>, name: '114.248.224.214'},
{value: <%=data3%>, name: '115.193.172.253'},
{value: <%=data4%>, name: '183.39.154.199'},
{value: <%=data5%>, name: '117.100.231.8'},
{value: <%=data6%>, name: '122.71.75.164'}
]
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
<div id="container2" style="height: 100%"></div>
<script type="text/javascript" src="keshihua/bingtu/echarts.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/echarts-gl.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/ecStat.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/dataTool.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/china.js"></script>
<script type="text/javascript" src="keshihua/bingtu/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container2");
var myChart2 = echarts.init(dom);
var app = {};
option = null;
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['119.131.143.179', '114.248.224.214', '115.193.172.253', '183.39.154.199', '117.100.231.8', '122.71.75.164']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: <%=data1%>, name: '119.131.143.179'},
{value: <%=data2%>, name: '114.248.224.214'},
{value: <%=data3%>, name: '115.193.172.253'},
{value: <%=data4%>, name: '183.39.154.199'},
{value: <%=data5%>, name: '117.100.231.8'},
{value: <%=data6%>, name: '122.71.75.164'}
]
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>T233</title>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="keshihua/bingtu/echarts.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/echarts-gl.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/ecStat.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/dataTool.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/china.js"></script>
<script type="text/javascript" src="keshihua/bingtu/world.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="css/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div id="main" style="height: 400px;width: 600px"></div>
<table class="table table-bordered table-hover" id="table">
<thead>
<tr>
<th>动漫名称</th>
<th>喜欢人数</th>
</tr>
</thead>
<tbody>
<tr id="tr1">
<td>火影忍者</td>
<td>500</td>
</tr>
<tr id="tr2">
<td>海贼王</td>
<td>300</td>
</tr>
<tr id="tr3">
<td>妖精的尾巴</td>
<td>200</td>
</tr>
<tr id="tr4">
<td>死神</td>
<td>400</td>
</tr>
<tr id="tr5">
<td>七龙珠</td>
<td>600</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// 页面加载函数
$(function () {
//进行echarts的初始化
var myEcharts = echarts.init(document.getElementById("main"));
var option = {
// 定义标题
title : {
text:"环形图示例"
},
// 鼠标悬停显示数据
tooltip:{
},
//图例
legend : {
data: ['火影忍者','海贼王','妖精的尾巴','死神','七龙珠']
},
//数据
series :[
{
radius:['55%','70%'], //半径
label:{
normal:{
// 取消在原来的位置显示
show:false,
// 在中间显示
position:'center'
},
// 高亮扇区
emphasis:{
show:true,
textStyle:{
fontSize:30,
fontWeight:'bold'
}
}
},
data:[
// 对应图例的值
{name:'火影忍者',value:500},
{name:'海贼王',value:300},
{name:'妖精的尾巴',value:200},
{name:'死神',value:400},
{name:'七龙珠',value:600}
],
type:'pie',
//关掉南丁格尔图
//roseType:'radius'
}
]
};
// 设置配置项
myEcharts.setOption(option);
// 设置echarts的点击事件
myEcharts.on('click',function (params) {
// 获取table下所有的tr
let trs = $("#table tbody tr");
for (let i = 0;i<trs.length;i++){
// 获取tr下所有的td
let tds = trs.eq(i).find("td");
// 先把之前的标记的success去掉
$("#table tbody tr").eq(i).removeClass('success');
// 如果点击图示的名字和table下的某一个行的第一个td的值一样
if (params.name == tds.eq(0).text()){
//设置success状态
$("#table tbody tr").eq(i).addClass('success');
// 跳转到页面指定的id位置
$("html,body").animate({scrollTop:$("#table tbody tr").eq(i).offset().top},1000);
}
}
});
// 当鼠标落在tr时，显示浮动
$("#table tbody").find("tr").on("mouseenter",function () {
// 获得当前匹配元素的个数
let row = $(this).prevAll().length;
// 获得当前tr下td的名字
let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
// 设置浮动
myEcharts.dispatchAction({ type: 'showTip',seriesIndex: 0, name:name});//选中高亮
});
// 当鼠标移开tr时候取消浮动
$("#table tbody").find("tr").on("mouseleave",function () {
// 获得当前匹配元素的个数
let row = $(this).prevAll().length;
// 获得当前tr下td的名字
let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
// 设置浮动
myEcharts.dispatchAction({ type: 'hideTip', name:name});//选中高亮
});
});
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼&柱混搭图表</title>
<style>
/* 配置样式让两个图表显示在一行 */
div{float: left}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div>
<!-- 饼状图Dom -->
<div id="main1" style="width: 500px;height:500px;"></div>
<!-- 柱状图Dom -->
<div id="main2" style="width: 500px;height:420px;"></div>
</div>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="keshihua/bingtu/echarts.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/echarts-gl.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/ecStat.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/dataTool.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/china.js"></script>
<script type="text/javascript" src="keshihua/bingtu/world.js"></script>
<script type="text/javascript">
// 指定饼状图图表的配置项和数据
var option1 = {
// 图表标题
title : {
text: '某站点用户访问来源', // 标题内容
subtext: '纯属虚构',
x:'center' // 居中显示
},
// 鼠标触发提示
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)" // 展示格式
},
// 图例
legend: {
orient : 'vertical', // 垂直显示
x : 'left', // 显示位置--左上
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', 225],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
// 指定柱状图图表的配置项和数据
var option2 = {
tooltip : {
trigger: 'axis',
axisPointer : { // 指示器类型，shadow为阴影指示器
type: 'shadow'
}
},
legend: {
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
// 工具栏组件
toolbox: {
show : true,
orient : 'vertical',
top : 'center',
feature : {
mark : {show: true},
// 启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true}, // 是否支持配置项还原
saveAsImage : {show: true} // 保存图片
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
grid: {
x2:40
},
series : [
{
name:'直接访问',
type:'bar',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'邮件营销',
type:'bar',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'bar',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'bar',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'搜索引擎',
type:'bar',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// 对饼状图dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('main1'));
myChart1.setOption(option1); // 按option1展示myChart1图表
// 对柱状图dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById('main2'));
myChart2.setOption(option2);
// 将myChart1和myChart2关联起来
echarts.connect([myChart1, myChart2])
// 配置自动适应Windows窗口大小
setTimeout(function (){
window.onresize = function () {
myChart.resize();
myChart2.resize();
}
},200)
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="keshihua/bingtu/echarts.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/echarts-gl.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/ecStat.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/dataTool.min.js"></script>
<script type="text/javascript" src="keshihua/bingtu/china.js"></script>
<script type="text/javascript" src="keshihua/bingtu/world.js"></script>
<title></title>
</head>
<body>
<div id="information"style="width: 400px;float: left;">
<table border="1">
<thead>
<tr>
<th>日期</th>
<th>产量</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>300</td>
</tr>
<tr>
<td>3</td>
<td>700</td>
</tr>
<tr>
<td>4</td>
<td>800</td>
</tr>
<tr>
<td>5</td>
<td>700</td>
</tr>
<tr>
<td>6</td>
<td>200</td>
</tr>
</tbody>
</table>
</div>
<div id="main"style="width: 600px;height:400px;float: left;">
</div>
<script type="text/javascript">
var information = []; // 数据的源头，取自于表格
var info = document.getElementById("information");
var table = info.getElementsByTagName("table");
var tr = table[0].getElementsByTagName("tr");
var myChart = echarts.init(document.getElementById('main'));
var chosex,chosey;//被选择的x、y
//初始化echarts实例 information
gainData();//获取数据源
operationEcharts();//运行echarts
trclick();//点击table的数据时右边进行标亮
interleavecolor();//隔行变色
function gainData() {//将table中的数据赋给information
var td = info.getElementsByTagName("td");
for(var i = 0;i<td.length - 1;i++,i++){
var x = td[i].innerText*1; // x轴
var y = td[i+1].innerText*1;// y轴
information.push([// 获取所有散点数据
x,
y
]);
}
}
//画echarts
function operationEcharts(){
var option = {
title: {
text: 'table与ECharts交互模式'
},
tooltip: {
padding: 10,
backgroundColor: '#222',
borderColor: '#777',
borderWidth: 1,
formatter: function (param) {
// return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
// + 'table与ECharts交互模式'
// + '</div>'
// + '日期：' + param.data[0]
// + "<div></div>"
// + '产量：' + param.data[1];
console.log(param);
}
},
legend: {
},
xAxis: {
splitLine: {show: false},
axisLine: {
lineStyle : {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
width: 2,
}
},
},
yAxis: {
splitLine: {show: true},
},
series: [{
name: '销量',
type: 'scatter',
data: information,
},
{
name: 'CHOSE',
type: 'effectScatter',
coordinateSystem: 'cartesian2d',
data: choseData(),
symbolSize: 12,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(25, 100, 150, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: '#FF4500'
}, {
offset: 1,
color: '#FFFF00'
}])
}
},
zlevel: 1,
label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[2];
},
position: 'top',
textStyle: {
color : '#FF4500'
}
}
}
}
]
};
myChart.setOption(option);
}
//标亮数据
function choseData(){
var chose = [];
if(null==chosex||null==chosey){
chosex = 1;
chosey = 100;
}
chose.push([chosex,chosey]);
return chose;
}
function trclick() {
for (var i = 1; i < tr.length; i++) {
tr[i].onclick = function clicktr() {
interleavecolor();
//重新加载一次隔行变色
this.style.background = "#FFFF00";
//被点击的变为黄色
var td = this.getElementsByTagName("td");
chosex = td[0].innerText*1;
chosey = td[1].innerText*1;
operationEcharts(); //重新运行Echarts
}
}
}
//隔行变色
function interleavecolor(){
for (j = 1; j < tr.length; j++) {
if(0 != j%2){
tr[j].style.background = "#F0FFF0";
}else{
tr[j].style.background = "#FFFAFA";
}
}
}
//如果点击echarts图
myChart.on('click', function (params) {
if(params.componentType == 'series') {
for (var k = 1; k < tr.length; k++) {
var tablex = String(tr[k].children[0].innerHTML); // 表格中的x轴
var tabley = String(tr[k].children[1].innerHTML); // 表格中的y轴
var chartx = String(params.data[0]);// 散点中的x轴
var charty = String(params.data[1]);// 散点中的y轴
if(tablex == chartx && tabley == charty) {
interleavecolor();
// 控制页面滚动到指定位置
tr[k].scrollIntoView();
tr[k].style.background = "#FFFF00";
// 对应行变为黄色
chosex = params.data[0];
chosey = params.data[1];
operationEcharts();//重新加载echarts视图
trclick();
break;
}
}
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号