实时可视化大数据项目03 -- 前端和配置
1、index.html
<html>
<head>
<meta charset="utf-8">
<title>大数据经纪智慧屏title>
<script type="text/javascript" src="../static/js/jquery.js">script>
<link rel="stylesheet" href="../static/css/comon0.css">
head>
<script type="text/javascript">
$(document).ready(function(){
var myDate = new Date;
var year = myDate.getFullYear();//当前年
var mon = myDate.getMonth() + 1;//当前月
var ndate = myDate.getDate();//当前日
myDate.setTime(myDate.getTime() + 24*60*60*1000);
var ldate = myDate.getDate(); //明天
var lyear = year + 1 ; //明年年份
if (`${mon}`.length == 1) {
mon = "0" + mon;
}
if (`${ndate}`.length == 1) {
ndate = "0" + ndate;
}
if (`${ldate}`.length == 1) {
ldate = "0" + ldate;
}
var nowDate =year+'-'+mon+'-'+ndate;//今天
var lastDate =year+'-'+mon+'-'+ldate;//明天
var nowYear =year + "-01-01";//今年
var lastYear = lyear + "-01-01";//明年
//新增代码
//智慧屏
$(function(){
//请求参数会员信息，会员信息和保费
$.ajax({
//请求方式
type : "GET",
//请求地址
url : "/getVipAndPremium",
//数据，json字符串
data : null,
//请求成功
success : function(vipPResult) {
// 1824
当月保费1920
上月保费19%
上个月环比增长率"
"
"
1824
会籍期内会员1920
权益余额19%
保费时间达成率"
"
"
- "
+ yearpremium +"" + viptotal +"";
document.getElementById("vip_premium").innerHTML = vip_premium;
//日期和天气
weather = "日期：" + crttm + "";
document.getElementById("weather").innerHTML = weather;
});
//新会员
$.get("/queryUserNow",{indexName:"xls_member_sum", groupName:"lookupResult.group_worker.keyword",
groupList:"车险转换,车险批量转换", registerTime:"lookupResult.register_time",
registerFrom:nowDate,registerTo:lastDate,
includes:"lookupResult.name,lookupResult.group_worker,lookupResult.member_level,lookupResult.depname3",
lookupResult:"lookupResult"}, function (data) {
//{name: "用户H00184093", groupWorker: "默认", memberLevel: "黑铁", depName3: "深圳宝安营业部"}
//{name: "黄护安", groupWorker: "默认", memberLevel: "黄金", depName3: "惠州营业部"}
//{name: "用户H00183986", groupWorker: "默认", memberLevel: "钻石", depName3: "深圳宝安营业部"}
for(j = 0,len=data.length; j < len; j++) {
var name = data[j].name;
var memberLevel = data[j].memberLevel;
var groupWorker = data[j].groupWorker;
var depName3 = data[j].depName3;
//日期和天气
vip_desc = ""
1今日新增会员列表 24岁 - 女 - 广州
dz_desc = " ![](\"../static/images/head.jpg\")
" + number + "优秀店长： " + group + ", 店员数据量：" + groupCount + " ";
$("#dz_desc_ul").append(dz_desc);
//$("#dz_desc ul").html(dz_desc);
}
//document.getElementById("dz_desc_ul").innerHTML = dz_desc;
var html2=$(".adduser ul").html()
$(".adduser ul").append(html2)
var ls=$(".adduser li").length/2+1
a=0
ref = setInterval(function(){
a++
if(a==ls){
a=1
$(".adduser ul").css({marginTop:0})
$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
}
$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
},4300);
});
})
script>
<body>
<div class="loading">
<div class="loadbox"> <img src="../static/images/loading.gif"> 页面加载中... div>
div>
<div class="head">
<h1><img src="../static/images/logo.png">大数据经纪智慧屏h1>
<div id="weather" class="weather"><img src="../static/images/weather.png"> div>
div>
<div class="mainbox">
<ul class="clearfix">
<li>
<div class="boxall" style="height: 2.7rem">
<div class="alltitle">智慧屏div>
<div class="sycm">
<ul id="month_pre" class="clearfix">
ul>
<div style="border-bottom: 1px solid rgba(255,255,255,.1)">div>
<ul id="month_vip" class="clearfix">
ul>
div>
<div class="boxfoot">div>
div>
<div class="boxall" style="height: 2.65rem">
<div class="alltitle">车险转换激活比例div>
<div class="sy" id="echarts1">div>
<div class="sy" id="echarts2">div>
<div class="sy" id="echarts3">div>
<div class="boxfoot">div>
div>
<div class="boxall" style="height: 2.95rem">
<div class="alltitle">会员职群区分比例div>
<div id="echarts4" style="height: 2.2rem; width: 100%;">div>
<div class="boxfoot">div>
div>
li>
<li>
<div class="bar">
<div id="vip_premium" class="barbox">
数据展示<-->
div>
<div class="barbox2">
<ul class="clearfix">
<li class="pulll_left">当年保费 / 万元li>
<li class="pulll_left">当年会员li>
ul>
div>
div>
<div class="map">
<div class="map1"><img src="../static/images/lbx.png">div>
<div class="map2"><img src="../static/images/jt.png">div>
<div class="map3"><img src="../static/images/map.png">div>
<div class="map4" id="map_1">div>
div>
li>
<li>
<div class="boxall" style="height:5.2rem">
<div class="alltitle">会员信息div>
<div class="tabs">
<ul class="clearfix">
<li><a class="active" href="#">当天a>li>
<li><a href="#">当月a>li>
<li><a href="#">当年a>li>
ul>
div>
<div class="clearfix">
<div class="sy" id="echarts6">div>
<div class="sy" id="echarts7">div>
<div class="sy" id="echarts8">div>
div>
<div class="addnew">
<div class="tit02"><span>年度最佳店长(不包含车险转换，双十一)span>div>
<div id="dz_desc" class="adduser">
<ul id="dz_desc_ul" class="clearfix">
ul>
div>
div>
<div class="boxfoot">div>
div>
<div class="boxall" style="height: 3.4rem">
<div class="alltitle">实时新增会员信息（不包含车险转换）div>
<div id="vip_desc" class="wrap">
<ul id="vip_desc_ul">
ul>
div>
<div class="boxfoot">div>
div>
li>
ul>
div>
<div class="back">div>
<script language="JavaScript" src="../static/js/js.js">script>
<script type="text/javascript" src="../static/js/echarts.min.js">script>
<script type="text/javascript" src="../static/js/china.js">script>
<script type="text/javascript" src="../static/js/area_echarts.js">script>
<script type="text/javascript">
$(document).ready(function () {
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart6.resize();
myChart7.resize();
myChart8.resize();
})
window.addEventListener("resize", function () {
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart6.resize();
myChart7.resize();
myChart8.resize();
});
script>
<script type="text/javascript">
$(function(){
var myDate = new Date;
var year = myDate.getFullYear();//当前年
var mon = myDate.getMonth() + 1;//当前月
var ndate = myDate.getDate();//当前日
myDate.setTime(myDate.getTime() + 24*60*60*1000);
var ldate = myDate.getDate(); //明天
if (`${mon}`.length == 1) {
mon = "0" + mon;
}
if (`${ndate}`.length == 1) {
ndate = "0" + ndate;
}
if (`${ldate}`.length == 1) {
ldate = "0" + ldate;
}
var nowDate = year + '-' + mon + '-' + ndate;//今天
var lastDate = year + '-' + mon + '-' + ldate;//明天
//请求参数会员信息，当天，当月，当年。
var bodyList = {
indexName: "xls_member_sum", registerTime: "lookupResult.register_time", registerFrom: nowDate,
registerTo: lastDate, groupName: "车险转换", vipEndTime: "lookupResult.vip_end_time"
};
$.ajax({
//请求方式
type: "GET",
//请求地址
url: "/dateQueryTotal",
//数据，json字符串
data: bodyList,
//请求成功
success: function (resultTotal) {
//{"vipTotal": 7,"groupTotal": 1,"endTotal": 3}
var vipTotal = resultTotal.vipTotal;
var groupTotal = resultTotal.groupTotal;
var endTotal = resultTotal.endTotal;
myChart6.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#0088cc',
label: {
normal: {
position: 'center'
}
},
data: [{
value: vipTotal,
name: '新增会员',
label: {
normal: {
formatter: vipTotal + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}]
}]
});
myChart7.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#fccb00',
label: {
normal: {
position: 'center'
}
},
data: [{
value: groupTotal,
name: '车险转换会员',
label: {
normal: {
formatter: groupTotal + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
},
{
value: groupTotal / vipTotal,
name: '车险转换会员占比',
label: {
normal: {
formatter: '占比' + Math.round(groupTotal / vipTotal * 100) + '%',
textStyle: {
color: '#aaa',
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
});
myChart8.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#62b62f',
label: {
normal: {
position: 'center'
}
},
data: [{
value: endTotal,
name: '新增付费会员',
label: {
normal: {
formatter: endTotal + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}]
}]
})
},
//请求失败，包含具体的错误信息
error: function (e) {
console.log(e.status);
console.log(e.responseText);
}
});
});
// 间歇执行 setVipDesc是被调用的方法名称
$(function(){
setInterval(function(){setVipDesc()}, 60*1000*10);
});
//点击事件
//新增代码 定时异步调用
function setVipDesc() {
//$(function(){
var myDate = new Date;
var year = myDate.getFullYear();//当前年
var mon = myDate.getMonth() + 1;//当前月
var ndate = myDate.getDate();//当前日
myDate.setTime(myDate.getTime() + 24*60*60*1000);
var ldate = myDate.getDate();//明日
if (`${mon}`.length == 1) {
mon = "0" + mon;
}
if (`${ndate}`.length == 1) {
ndate = "0" + ndate;
}
if (`${ldate}`.length == 1) {
ldate = "0" + ldate;
}
var nowDate = year + '-' + mon + '-' + ndate;//今天
var lastDate = year + '-' + mon + '-' + ldate;//明天
//请求参数会员信息，当天，当月，当年。
var bodyList = {
indexName: "xls_member_sum", registerTime: "lookupResult.register_time", registerFrom: nowDate,
registerTo: lastDate, groupName: "车险转换", vipEndTime: "lookupResult.vip_end_time"
};
$.ajax({
//请求方式
type: "GET",
//请求地址
url: "/dateQueryTotal",
//数据，json字符串
data: bodyList,
//请求成功
success: function (resultTotal) {
//{"vipTotal": 7,"groupTotal": 1,"endTotal": 3}
var vipTotal = resultTotal.vipTotal;
var groupTotal = resultTotal.groupTotal;
var endTotal = resultTotal.endTotal;
myChart6.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#0088cc',
label: {
normal: {
position: 'center'
}
},
data: [{
value: vipTotal,
name: '新增会员',
label: {
normal: {
formatter: vipTotal + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}]
}]
});
myChart7.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#fccb00',
label: {
normal: {
position: 'center'
}
},
data: [{
value: groupTotal,
name: '车险转换会员',
label: {
normal: {
formatter: groupTotal + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
},
{
value: groupTotal / vipTotal,
name: '车险转换会员占比',
label: {
normal: {
formatter: '占比' + Math.round(groupTotal / vipTotal * 100) + '%',
textStyle: {
color: '#aaa',
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
});
myChart8.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#62b62f',
label: {
normal: {
position: 'center'
}
},
data: [{
value: endTotal,
name: '新增付费会员',
label: {
normal: {
formatter: endTotal + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}]
}]
})
},
//请求失败，包含具体的错误信息
error: function (e) {
console.log(e.status);
console.log(e.responseText);
}
});
}
//});
var myChart6 = echarts.init(document.getElementById('echarts6'));
option6 = {
series: []
};
var myChart7 = echarts.init(document.getElementById('echarts7'));
option7 = {
series: []
};
var myChart8 = echarts.init(document.getElementById('echarts8'));
option8 = {
series: []
};
setTimeout(function () {
myChart6.setOption(option6);
myChart7.setOption(option7);
myChart8.setOption(option8);
}, 500);
script>
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('echarts1'));
option1 = {
series: []
};
var myChart3 = echarts.init(document.getElementById('echarts3'));
option3 = {
series: []
};
var myChart2 = echarts.init(document.getElementById('echarts2'));
option2 = {
series: []
};
//新增代码
$(function(){
//请求参数"车险转换","车险批量转换"
var bodyList = {indexName:"xls_member_sum",group1:"车险转换", group2:"车险批量转换"};
//
$.ajax({
//请求方式
type : "GET",
//请求地址
url : "/carStateQuery",
//数据，json字符串
data : bodyList,
//请求成功
success : function(carStateResult) {
var vipState=0;
var cxzhTotal=0;
var cxzhState=0;
var cxzhScale=0;
var cxplTotal=0;
var cxplState=0;
var cxplScale=0.0;
//[{"name": "车险转换","numCount": 4,"stateCount": 0},
//{"name": "车险批量转换","numCount": 2,"stateCount": 0}]
for (var i = 0; i < carStateResult.length; i++) {
if (carStateResult[i].name=="车险批量转换") {
cxplTotal=carStateResult[i].numCount;
cxplState=carStateResult[i].stateCount;
cxplScale=carStateResult[i].loginScale;
}
if (carStateResult[i].name=="车险转换") {
cxzhTotal=carStateResult[i].numCount;
cxzhState=carStateResult[i].stateCount;
cxzhScale=carStateResult[i].loginScale;
}
vipState +=carStateResult[i].stateCount;
}
//激活人数
myChart1.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#0088cc',
label: {
normal: {
position: 'center'
}
},
data: [{
value: vipState,
name: '激活人数',
label: {
normal: {
formatter: vipState + '',
textStyle: {
fontSize: 20,
color: '#fff'
}
}
}
},
]
}]
});
//车险批量转换
myChart3.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#fccb00',
label: {
normal: {
position: 'center'
}
},
data: [{
value: cxplState,
name: '激活人次',
label: {
normal: {
formatter: cxplState + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}, {
value: cxplScale,
name: '激活率',
label: {
normal: {
formatter: '占比' + cxplScale + '%',
// function (params) {
// return '占比' + Math.round(cxzhState / cxzhTotal * 100) + '%'
// },
textStyle: {
color: '#aaa',
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
});
//车险转换
myChart2.setOption({
series:{
type: 'pie',
radius: ['70%', '80%'],
color: '#62b62f',
label: {
normal: {
position: 'center'
}
},
data: [{
value: cxzhState,
name: '激活人次',
label: {
normal: {
formatter: cxzhState + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}, {
value: cxzhScale,
name: '激活率',
label: {
normal: {
formatter: '占比' + cxzhScale + '%',
textStyle: {
color: '#aaa',
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}
})
},
//请求失败，包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
});
// 间歇执行 setVipDesc是被调用的方法名称
$(function(){
setInterval(function(){setVildDesc()}, 60*1000*10);
});
function setVildDesc() {
//请求参数"车险转换","车险批量转换"
var bodyList = {indexName:"xls_member_sum",group1:"车险转换", group2:"车险批量转换"};
//
$.ajax({
//请求方式
type : "GET",
//请求地址
url : "/carStateQuery",
//数据，json字符串
data : bodyList,
//请求成功
success : function(carStateResult) {
var vipState=0;
var cxzhTotal=0;
var cxzhState=0;
var cxzhScale=0;
var cxplTotal=0;
var cxplState=0;
var cxplScale=0.0;
//[{"name": "车险转换","numCount": 4,"stateCount": 0},
//{"name": "车险批量转换","numCount": 2,"stateCount": 0}]
for (var i = 0; i < carStateResult.length; i++) {
if (carStateResult[i].name=="车险批量转换") {
cxplTotal=carStateResult[i].numCount;
cxplState=carStateResult[i].stateCount;
cxplScale=carStateResult[i].loginScale;
}
if (carStateResult[i].name=="车险转换") {
cxzhTotal=carStateResult[i].numCount;
cxzhState=carStateResult[i].stateCount;
cxzhScale=carStateResult[i].loginScale;
}
vipState +=carStateResult[i].stateCount;
}
//激活人数
myChart1.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#0088cc',
label: {
normal: {
position: 'center'
}
},
data: [{
value: vipState,
name: '激活人数',
label: {
normal: {
formatter: vipState + '',
textStyle: {
fontSize: 20,
color: '#fff'
}
}
}
},
]
}]
});
//车险批量转换
myChart3.setOption({
series: [{
type: 'pie',
radius: ['70%', '80%'],
color: '#fccb00',
label: {
normal: {
position: 'center'
}
},
data: [{
value: cxplState,
name: '激活人次',
label: {
normal: {
formatter: cxplState + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}, {
value: cxplScale,
name: '激活率',
label: {
normal: {
formatter: '占比' + cxplScale + '%',
// function (params) {
// return '占比' + Math.round(cxzhState / cxzhTotal * 100) + '%'
// },
textStyle: {
color: '#aaa',
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
});
//车险转换
myChart2.setOption({
series:{
type: 'pie',
radius: ['70%', '80%'],
color: '#62b62f',
label: {
normal: {
position: 'center'
}
},
data: [{
value: cxzhState,
name: '激活人次',
label: {
normal: {
formatter: cxzhState + '',
textStyle: {
fontSize: 20,
color: '#fff',
}
}
}
}, {
value: cxzhScale,
name: '激活率',
label: {
normal: {
formatter: '占比' + cxzhScale + '%',
textStyle: {
color: '#aaa',
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}
})
},
//请求失败，包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
};
setTimeout(function () {
myChart1.setOption(option1);
myChart2.setOption(option2);
myChart3.setOption(option3);
}, 500);
script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('echarts4'));
//var plantCap = [{name: '工业', value: '222'}, {name: '农业', value: '115'}, {name: '互联网', value: '113'}, {name: '医疗', value: '95'}, {name: '文学', value: '92'}, {name: '服装', value: '87'}, {name: '裤子', value: '52'}];
var plantCap=[];
var datas = [];
$(function(){
var myDate = new Date;
var year = myDate.getFullYear();//当前年
var lyear = year + 1 ;
var nowYear =year + "-01-01";//今年
var lastYear = lyear + "-01-01";//明年
//请求参数
var bodyList = {indexName:"xls_member_sum",rangeQueryTime:"lookupResult.register_time",
termsQueryName:"lookupResult.group_worker.keyword",termsQueryList:"车险转换,车险批量转换,默认,互联网业务部双十一抽奖会员引流",
from:nowYear,to:lastYear};
//
$.ajax({
//请求方式
type : "GET",
//请求地址
url : "/queryIndexNotMustRangAggs",
//数据，json字符串
data : bodyList,
//请求成功
success : function(rangAggsResult) {
for (var i = 0; i < rangAggsResult.length; i++) {
var item = rangAggsResult[i];
var itemToStyle = datalist[i];
datas.push({
name: item.value + '\n' + item.name,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
normal: {
textStyle: {
fontSize: 14
}
}
},
itemStyle: {
normal: {
color: itemToStyle.color,
opacity: itemToStyle.opacity
}
},
})
}
myChart.setOption({
series: [{
data: datas
}]
});
var plantCap=rangAggsResult;
//plantCap = [...rangAggsResult];
},
//请求失败，包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
});
//现在这个方法不能清理幕布
// 间歇执行 setVipDesc是被调用的方法名称
// $(function(){
// setInterval(function(){setGroupDesc()}, 6*1000);
// });
function setGroupDesc() {
var myDate = new Date;
var year = myDate.getFullYear();//当前年
var lyear = year + 1 ;
var nowYear =year + "-01-01";//今年
var lastYear = lyear + "-01-01";//明年
//请求参数
var bodyList = {indexName:"xls_member_sum",rangeQueryTime:"lookupResult.register_time",
termsQueryName:"lookupResult.group_worker.keyword",termsQueryList:"车险转换,车险批量转换,默认,互联网业务部双十一抽奖会员引流",
from:nowYear,to:lastYear};
//
$.ajax({
//请求方式
type : "GET",
//请求地址
url : "/queryIndexNotMustRangAggs",
//数据，json字符串
data : bodyList,
//请求成功
success : function(rangAggsResult) {
for (var i = 0; i < rangAggsResult.length; i++) {
var item = rangAggsResult[i];
var itemToStyle = datalist[i];
datas.push({
name: item.value + '\n' + item.name,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
normal: {
textStyle: {
fontSize: 14
}
}
},
itemStyle: {
normal: {
color: itemToStyle.color,
opacity: itemToStyle.opacity
}
},
})
}
//清理
myChart.clear();
myChart.setOption({
series: [{
data: datas
}]
});
// var plantCap=rangAggsResult;
},
//请求失败，包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
};
var datalist = [{
offset: [56, 48],
symbolSize: 110,
color: 'rgba(73,188,247,.14)',
}, {
offset: [30, 70],
symbolSize: 70,
color: 'rgba(73,188,247,.14)'
}, {
offset: [0, 43],
symbolSize: 60,
color: 'rgba(73,188,247,.14)'
}, {
offset: [93, 30],
symbolSize: 70,
color: 'rgba(73,188,247,.14)'
}, {
offset: [26, 19],
symbolSize: 65,
color: 'rgba(73,188,247,.14)'
}, {
offset: [75, 75],
symbolSize: 60,
color: 'rgba(73,188,247,.14)'
}, {
offset: [100, 75],
symbolSize: 52,
color: 'rgba(73,188,247,.14)'
}];
option = {
grid: {
show: false,
top: 10,
bottom: 10
},
xAxis: [{
gridIndex: 0,
type: 'value',
show: false,
min: 0,
max: 100,
nameLocation: 'middle',
nameGap: 5
}],
yAxis: [{
gridIndex: 0,
min: 0,
show: false,
max: 100,
nameLocation: 'middle',
nameGap: 30
}],
series: [{
type: 'scatter',
symbol: 'circle',
symbolSize: 60,
label: {
normal: {
show: true,
formatter: '{b}',
color: '#FFF',
textStyle: {
fontSize: '14'
}
},
},
itemStyle: {
symbolSize: 60,
normal: {
color: '#F30'
}
},
data: datas
}]
};
myChart.setOption(option);
$(document).ready(function () {
myChart.resize();
})
window.addEventListener("resize", function () {
myChart.resize();
});
script>
<script type="text/javascript" src="../static/js/jquery.waypoints.min.js">script>
<script type="text/javascript" src="../static/js/jquery.countup.min.js">script>
<script type="text/javascript">
$('.counter').countUp();
script>
body>
html>
1.1、前端目录结构
1.2 静态页面介绍
1、CSS目录为渲染样式；
2、images是图片，导入你自己的图片改成相同的名字就可以使用；
3、js是js依赖，以及开源的echarts
2、pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0modelVersion>
<parent>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-parentartifactId>
<version>2.1.7.RELEASEversion>
<relativePath/>
parent>
<groupId>com.test.bigdatagroupId>
<artifactId>es-tagartifactId>
<version>1.0version>
<name>bigdata-esname>
<description>bigdata-esdescription>
<properties>
<java.version>1.8java.version>
<spark.version>2.1.0spark.version>
<scala.version>2.11scala.version>
properties>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.codehaus.janinogroupId>
<artifactId>commons-compilerartifactId>
<version>3.0.8version>
dependency>
<dependency>
<groupId>org.codehaus.janinogroupId>
<artifactId>janinoartifactId>
<version>3.0.8version>
dependency>
dependencies>
dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-data-elasticsearchartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-devtoolsartifactId>
<scope>runtimescope>
<optional>trueoptional>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-configuration-processorartifactId>
<optional>trueoptional>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-data-redisartifactId>
dependency>
<dependency>
<groupId>org.projectlombokgroupId>
<artifactId>lombokartifactId>
<optional>trueoptional>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-testartifactId>
<scope>testscope>
dependency>
<dependency>
<groupId>com.alibabagroupId>
<artifactId>fastjsonartifactId>
<version>1.2.59version>
dependency>
<dependency>
<groupId>org.elasticsearchgroupId>
<artifactId>elasticsearchartifactId>
<version>7.2.0version>
dependency>
<dependency>
<groupId>org.elasticsearch.clientgroupId>
<artifactId>elasticsearch-rest-high-level-clientartifactId>
<version>7.2.0version>
dependency>
dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-maven-pluginartifactId>
plugin>
<plugin>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-maven-pluginartifactId>
<configuration>
<fork>truefork>
configuration>
plugin>
plugins>
<resources>
<resource>
<directory>src/main/resourcesdirectory>
<filtering>truefiltering>
<excludes>
<exclude>application-*.propertiesexclude>
excludes>
resource>
<resource>
<directory>src/main/resourcesdirectory>
<filtering>falsefiltering>
<includes>
<include>application-${build.profile.id}.propertiesinclude>
includes>
resource>
resources>
build>
<profiles>
<profile>
<id>devid>
<properties>
<build.profile.id>devbuild.profile.id>
properties>
<activation>
<activeByDefault>trueactiveByDefault>
activation>
profile>
<profile>
<id>prodid>
<properties>
<build.profile.id>prodbuild.profile.id>
properties>
<activation>
<activeByDefault>falseactiveByDefault>
activation>
profile>
profiles>
project>
3、application.properties
用于替换开发环境和生产环境的变量
[email protected]@
4、application-dev.properties
server.port=8080
spring.devtools.livereload.enabled=true
spring.thymeleaf.prefix=classpath:/templates/
spring.mvc.static-path-pattern=/static/**
logging.config=classpath:logback.xml
# redis
spring.redis.host=redis
spring.redis.port=6379
# elasticsearch,多个逗号隔开
elasticsearch.ip=ip:9200,ip1:9200
5、application-prod.properties
server.port=8081
spring.devtools.livereload.enabled=false
spring.thymeleaf.prefix=classpath:/templates/
spring.mvc.static-path-pattern=/static/**
logging.config=classpath:logback.xml
# redis
spring.redis.host=redis
spring.redis.port=6379
# elasticsearch
elasticsearch.ip=ip:9200,ip1:9200
6、logback.xml
<configuration>
<property name="logDir" value="/test/log/bigdata/"/>
<appender name="stdout" class="ch.qos.logback.core.ConsoleAppender">
<layout class="ch.qos.logback.classic.PatternLayout">
<pattern>[%date]|%level|%thread|${PID:-}| |traceId:%X{X-B3-TraceId}|spanId:%X{X-B3-SpanId}|parentId:%X{X-B3-ParentSpanId}|%logger{50}:%L >>> %msg%npattern>
layout>
appender>
<appender name="logfile" class="ch.qos.logback.core.rolling.RollingFileAppender">
<File>${logDir}/bigdata.logFile>
<rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
<FileNamePattern>${logDir}/history/bigdata.%d{yyyy-MM-dd}.log.gzFileNamePattern>
<maxHistory>180maxHistory>
rollingPolicy>
<layout class="ch.qos.logback.classic.PatternLayout">
<pattern>%date [%thread] %-5level %logger{50}:%L - %msg%npattern>
layout>
<encoder>
<pattern>[%date]|%level|%thread|${PID:-}| |traceId:%X{X-B3-TraceId}|spanId:%X{X-B3-SpanId}|parentId:%X{X-B3-ParentSpanId}|%logger{50}:%L >>> %msg%npattern>
<charset>UTF-8charset>
encoder>
appender>
<root level="INFO">
<appender-ref ref="logfile"/>
<appender-ref ref="stdout"/>
root>
configuration>