安利demo-白红宇

安利demo

阅读量：5036 次

发布时间：2019-06-12

本文共 12325 字，大约阅读时间需要 41 分钟。

<html>

<style>

html, body, #map {

width: 100%;

height: 100%;

}

html, body {

margin: 0;

padding: 0;

}

margin:0;

padding:0;

}

body,html{

height:100%;

}

#container,#map,#deck-layer{

height:100%;

}

#deck-layer{

position:absolute;

top:0;

left:0;

}

.slider {

position: relative;

-webkit-box-sizing: border-box;

box-sizing: border-box;

height: 10px;

background:#FFFFFF;

}

.title1 {

position: absolute;

left: 847px;

top: 48px;

width: 298.2px;

height: 74px;

text-align: center;

line-height: 74px;

font-family: MicrosoftYaHei;

font-size: 35.93px;

color: #FFFFFF;

letter-spacing: 0;

opacity: 0.75;

background: #101114;

box-shadow: 0 0 11px 1px rgba(67,202,255,0.25);

}

.chart {

position: absolute;

left: 12px;

top: 98px;

width: 483px;

height: 483px;

opacity: 0.9;

background: #08101C;

border: 1px solid #313D4F;

}

.search {

position: absolute;

right: 12px;

top: 98px;

width: 484px;

height: 39px;

background: #08101C;

border: 1px solid #313D4F;

}

.chart-line {

position: absolute;

right: 12px;

top: 145px;

width: 484px;

height: 323px;

opacity: 0.95;

background: #08101C;

border: 1px solid #313D4F;

}

.wrapper {

position: absolute;

left: 503px;

bottom: 30px;

width: 914px;

}

.wrapper > div {

margin: 35px 0;

}

.search_con {

position: absolute;

top: 98px;

z-index: 10;

height: 39px;

background: #ffffff;

border: 1px solid #313D4F;

}

#datepicker {

opacity: 0.9;

background: #08101C;

width: 200px;

right: 300px;

color: #FFFFFF;

}

#case-type{

opacity: 0.9;

background: #08101C;

color: #FFFFFF;

right: 200px;

padding-left:1px;

width: 100px;

}

#weather {

right: 100px;

padding-left:1px;

width: 100px;

color: #FFFFFF;

opacity: 0.9;

background: #08101C;

}

#search_btn {

opacity: 0.9;

background: #08101C;

right: 13px;

width: 90px;

color: #FFFFFF;

}

</style>

<body>

</div>

Case预测分析

</div>

</div>

</select>

</select>

</div>

</div>

$( "#datepicker" ).datepicker();

var cdate = new Date();

var cmonth = (cdate.getMonth() + 1).toString();

if (cmonth.length == 1) cmonth = "0"+cmonth;

var cday = cdate.getDate().toString();

if (cday.length == 1) cday = "0"+cday;

$( "#datepicker" ).val(cmonth+"/"+cday+"/"+cdate.getFullYear());

var dom = document.getElementById("chart");

var myChart = echarts.init(dom);

var app = {};

option = null;

var data = {};

option = {

title : {

text: 'Case数量',

x:'left',

textStyle: {

color: '#ccc'

}

tooltip : {

trigger: 'item',

formatter: "{a} <br/>{b} : {c} ({d}%)"

series : [

{

radius: ['20%', '70%'],

name: '名称',

type: 'pie',

center: ['40%', '50%'],

data: data.seriesData,

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

]

};

var dom1 = document.getElementById("chart-line");

var myChart1 = echarts.init(dom1);

var app1 = {};

option1 = null;

option1 = {

title: {

text: '查询结果',

textStyle: {

color: '#ccc'

}

tooltip: {

trigger: 'axis'

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

toolbox: {

feature: {

saveAsImage: {}

}

xAxis: {

type: 'category',

boundaryGap: false,

data: [],

axisLabel:{ //调整x轴的lable

textStyle:{

color:'#FFFFFF' // 让字体变大

}

yAxis: {

type: 'value',

axisLabel:{ //调整x轴的lable

textStyle:{

color:'#FFFFFF' // 让字体变大

}

series: [

]

};

var case_data = {};

minemap.accessToken = '449ba822788c46bea9f90dfba48e5269';

minemap.solution = '4009';

const map = new minemap.Map({

container: 'map',

style: 'http://minedata.cn/service/solu/style/id/4009',

center: [118.8386378, 32.0313616],

zoom: 10,

bearing: 0,

pitch: 45,

});

//视角初始化参数

const INITIAL_VIEW_STATE = {

latitude: 32.0313616,

longitude: 118.8386378,

zoom: 10,

bearing: 0,

pitch: 45,

maxZoom: 17,

};

//光源初始化参数

const LIGHT_SETTINGS = {

lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],

ambientRatio: 0.4,

diffuseRatio: 0.6,

specularRatio: 0.2,

lightsStrength: [0.8, 0.0, 0.8, 0.0],

numberOfLights: 2

};

//颜色范围

const colorRange = [

[1, 152, 189],

[73, 227, 206],

[216, 254, 181],

[254, 237, 177],

[254, 173, 84],

[209, 55, 78]

];

var deckgl = new deck.Deck({

id: 'deck-layer',

canvas: 'deck-layer',

width: '100%',

height: '100%',

viewState: INITIAL_VIEW_STATE,

controller: deck.MapController,

onViewportChange: viewState => {

// if(!this.hexagonLayer.isShow) return;

deckgl.setProps({viewState});

map.jumpTo({

center: [viewState.longitude, viewState.latitude],

zoom: viewState.zoom,

bearing: viewState.bearing,

pitch: viewState.pitch

})

}

});

$.getJSON("http://localhost:8081/case/inter1",function(result){

var newdata1 = []

result.data.dccn.forEach(function(v){

var d = {}

d.name = v.countyID

d.value = v.dcn

newdata1.push(d)

})

option.series[0].data = newdata1

myChart.setOption(option, true);

});

//http://ip:port/areaIndex/queryIntervalCityCaseNum/{date}/{cityCode}/{timeFlag}/{caseType}/{weatherType}

$.getJSON("http://localhost:8081/case/inter3",function(result){

case_data = result;

var linedata = []

option1.xAxis.data.length = 0

result.data.icn.forEach(function(v){

option1.xAxis.data.push(v.hour+':00')

linedata.push(v.scn)

})

option1.series.length = 0

option1.series.push(

{

//name:'搜索引擎',

type:'line',

stack: '总量',

data:linedata

}

)

$.getJSON("http://localhost:8081/case/inter5",function(arr_result){

var linedata2 = []

arr_result.data.ibaat.forEach(function(row){

linedata2.push(row.baat)

})

option1.series.push(

{

//name:'搜索引擎',

type:'line',

stack: '总量',

data:linedata2

}

)

myChart1.setOption(option1, true);

})

var hour = new Date().getHours().toString()

if (hour.length == 1) hour = "0"+hour;

case_data.data.icn.forEach(function(v){

if (v.hour == hour){

/**

const data = res.geometry.coordinates.map((d) => {

return {position: d}

});

const data = []

var min_lng = 180.1;

var min_lat = 90.1;

var max_lng = 0;

var max_lat = 0;

v.cpan.forEach(function(v2){

if (min_lng > v2.lon) min_lng = v2.lon;

if (min_lat > v2.lat) min_lat = v2.lat;

if (max_lng < v2.lon) max_lng = v2.lon;

if (max_lat < v2.lat) max_lat = v2.lat;

for(var cn=0;cn<v2.cn;cn++){

data.push({"position":[v2.lon,v2.lat]})

}

})

deckgl.setProps({layers: makeHexLayer(data)});

var a = deckgl.props.viewState

a.longitude = (min_lng + max_lng) / 2;

a.latitude = (min_lat + max_lat) / 2;

deckgl.setProps(a)

map.setCenter({"lng":a.longitude,"lat":a.latitude})

}

});

function makeHexLayer(data) {

return new deck.HexagonLayer({

id: 'hexagon-layer',

data,

radius: 400,

opacity: 1,

elevationScale: 1,

elevationRange: [0, 10000],

extruded: true,

lightSettings: LIGHT_SETTINGS,

colorRange: colorRange,

})

}

// tick formatter

var formatter = d3.format(".0f");

var tickFormatter = function(d) {

return formatter(d) + ":00";

}

var size = 0

var slider = d3.slider().min(0).max(24).minecb(function(v) {

var hour = v.split(":")[0]

if (hour.length == 1) hour = "0"+ hour;

case_data.data.icn.forEach(function(v){

if (v.hour == hour){

/**

const data = res.geometry.coordinates.map((d) => {

return {position: d}

});

const data = []

var min_lng = 180.1;

var min_lat = 90.1;

var max_lng = 0;

var max_lat = 0;

v.cpan.forEach(function(v2){

if (min_lng > v2.lon) min_lng = v2.lon;

if (min_lat > v2.lat) min_lat = v2.lat;

if (max_lng < v2.lon) max_lng = v2.lon;

if (max_lat < v2.lat) max_lat = v2.lat;

for(var cn=0;cn<v2.cn;cn++){

data.push({"position":[v2.lon,v2.lat]})

}

})

deckgl.setProps({layers: makeHexLayer(data)});

var a = deckgl.props.viewState

a.longitude = (min_lng + max_lng) / 2;

a.latitude = (min_lat + max_lat) / 2;

deckgl.setProps(a)

map.setCenter({"lng":a.longitude,"lat":a.latitude})

}

});

}).ticks(10).showRange(true).value((new Date()).getHours())

.tickFormat(tickFormatter);

//var slider = d3.slider().min(0).max(24).ticks(10).showRange(true).value(6);

// Render the slider in the div

d3.select('#slider5').call(slider);

</script>

$( function() {

$("#search_btn").click(function(){

console.log($("#datepicker").val())

console.log($("#case-type").val())

console.log($("#weather").val())

//http://ip:port/areaIndex/queryDailyCityCaseNum/{date}/{cityCode}/{areaFlag}/{caseType}/{weatherType}

//$.get("http://ip:port/areaIndex/queryDailyCityCaseNum/{date}/{cityCode}/{areaFlag}/{caseType}/{weatherType}",function(data,status){

//});

//http://ip:port/areaIndex/queryDailyCityCaseNum/{date}/{cityCode}/{areaFlag}/{caseType}/{weatherType}

$.getJSON("http://localhost:8081/case/inter1",function(result){

var newdata1 = []

result.data.dccn.forEach(function(v){

var d = {}

d.name = v.countyID

d.value = v.dcn

newdata1.push(d)

})

option.series[0].data = newdata1

myChart.setOption(option, true);

});

//http://ip:port/areaIndex/queryIntervalCityCaseNum/{date}/{cityCode}/{timeFlag}/{caseType}/{weatherType}

$.getJSON("http://localhost:8081/case/inter3",function(result){

case_data = result;

var linedata = []

option1.xAxis.data.length = 0

result.data.icn.forEach(function(v){

option1.xAxis.data.push(v.hour+':00')

linedata.push(v.scn)

})

option1.series.length = 0

option1.series.push(

{

//name:'搜索引擎',

type:'line',

stack: '总量',

data:linedata

}

)

$.getJSON("http://localhost:8081/case/inter5",function(arr_result){

var linedata2 = []

arr_result.data.ibaat.forEach(function(row){

linedata2.push(row.baat)

})

option1.series.push(

{

//name:'搜索引擎',

type:'line',

stack: '总量',

data:linedata2

}

)

myChart1.setOption(option1, true);

})

var hour = new Date().getHours().toString()

if (hour.length == 1) hour = "0"+hour;

case_data.data.icn.forEach(function(v){

if (v.hour == hour){

/**

const data = res.geometry.coordinates.map((d) => {

return {position: d}

});

const data = []

var min_lng = 180.1;

var min_lat = 90.1;

var max_lng = 0;

var max_lat = 0;

v.cpan.forEach(function(v2){

if (min_lng > v2.lon) min_lng = v2.lon;

if (min_lat > v2.lat) min_lat = v2.lat;

if (max_lng < v2.lon) max_lng = v2.lon;

if (max_lat < v2.lat) max_lat = v2.lat;

for(var cn=0;cn<v2.cn;cn++){

data.push({"position":[v2.lon,v2.lat]})

}

})

deckgl.setProps({layers: makeHexLayer(data)});

var a = deckgl.props.viewState

a.longitude = (min_lng + max_lng) / 2;

a.latitude = (min_lat + max_lat) / 2;

deckgl.setProps(a)

map.setCenter({"lng":a.longitude,"lat":a.latitude})

}

});

})

} );

</script>

</body>

</html>

转载于:https://www.cnblogs.com/lilei2blog/p/9012353.html

你可能感兴趣的文章

[置顶] 细说Cookies

查看>>

[wp7软件]wp7~~新闻资讯，阅读软件下载大全！集合贴~~~

where,having与 group by连用的区别

查看>>

【MySQL】MySQL锁和隔离级别浅析二之 INSERT

查看>>

Oracle T4-2 使用ILOM CLI升级Firmware

查看>>

4.14上午

查看>>

数据分析 -- 白话一下什么是决策树模型(转载)

查看>>

Java SPI机制原理和使用场景

查看>>

web前端java script学习2017.7.18

中小团队基于Docker的Devops实践

Selenium-测试对象操作之：获取浏览器滚动条滚动距离