You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1445 lines
47 KiB
1445 lines
47 KiB
<!DOCTYPE html>
|
|
<%@ page language="java" pageEncoding="UTF-8" %>
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
<%@ include file="/common/ctx.jsp" %>
|
|
<%
|
|
SysUser homesyuser = (SysUser) request.getSession().getAttribute("admin");
|
|
String homesyuserregion = homesyuser.getDid() + "";
|
|
request.setAttribute("homesyuserregion", homesyuserregion);
|
|
%>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description"
|
|
content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
|
|
<meta name="author" content="Coderthemes">
|
|
<title>数据首页</title>
|
|
<link type="text/css" rel="stylesheet" href="${ctx}/css/cjy_style.css"/>
|
|
<link rel="stylesheet" type="text/css" href="${ctx}/css/cjy_con.css">
|
|
<script type="text/javascript" src="${ctx}/js/jquery-1.7.1.min.js"></script>
|
|
<script type="text/javascript" src="${ctx }/js/echarts.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
chax2();
|
|
chax3();
|
|
chax4();
|
|
chax5();
|
|
chax6();
|
|
chax7();
|
|
//chax8();
|
|
});
|
|
//旅游资源分布
|
|
//涉旅人员
|
|
function chax2() {
|
|
var myChart = echarts.init(document.getElementById('bar_char02'));
|
|
var iname = new Array();
|
|
var dataout = new Array();
|
|
<c:forEach items="${slry}" var="item" varStatus="status" >
|
|
iname.push("${item.iname}");
|
|
dataout.push("${item.nums}");
|
|
</c:forEach>
|
|
var name = new Array();
|
|
var out = new Array();
|
|
for (var i = iname.length - 1; i >= 0; i--) {
|
|
var tobj = new Object();
|
|
name.push(iname[i]);
|
|
tobj.name = iname[i];
|
|
tobj.value = dataout[i]
|
|
out.push(tobj);
|
|
}
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
x: 'left',
|
|
data: name
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
selectedMode: 'single',
|
|
radius: [0, '80%'],
|
|
//minAngle : 5,
|
|
label: {
|
|
normal: {
|
|
position: 'inner'
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: out
|
|
},]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
//多媒体资源
|
|
function chax3() {
|
|
var myChart = echarts.init(document.getElementById('bar_char03'));
|
|
var iname = new Array();
|
|
var dataout = new Array();
|
|
<c:forEach items="${dmt}" var="item" varStatus="status" >
|
|
iname.push("${item.iname}");
|
|
dataout.push("${item.nums}");
|
|
</c:forEach>
|
|
var name = new Array();
|
|
var out = new Array();
|
|
|
|
for (var i = iname.length - 1; i >= 0; i--) {
|
|
var tobj = new Object();
|
|
name.push(iname[i]);
|
|
tobj.name = iname[i];
|
|
tobj.value = dataout[i]
|
|
out.push(tobj);
|
|
}
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
x: 'left',
|
|
data: name
|
|
},
|
|
series: [{
|
|
|
|
type: 'pie',
|
|
radius: ['50%', '80%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: '30',
|
|
fontWeight: 'bold'
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: out
|
|
}]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
//电信数据
|
|
function chax4() {
|
|
var myChart = echarts.init(document.getElementById('bar_char04'));
|
|
var iname = new Array();
|
|
var dataout = new Array();
|
|
/*
|
|
|
|
|
|
<c:forEach items="${dianx}" var="item" varStatus="status" >
|
|
iname.push("
|
|
|
|
${item.iname}");
|
|
dataout.push("
|
|
|
|
${item.nums}");
|
|
|
|
</c:forEach> */
|
|
iname.push("自驾游");
|
|
iname.push("自由行");
|
|
iname.push("跟团游");
|
|
iname.push("其他");
|
|
var name = new Array();
|
|
var out = new Array();
|
|
dataout = [188164, 98301, 189992, 49313];
|
|
for (var i = iname.length - 1; i >= 0; i--) {
|
|
var tobj = new Object();
|
|
name.push(iname[i]);
|
|
tobj.name = iname[i];
|
|
tobj.value = dataout[i]
|
|
out.push(tobj);
|
|
}
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: name
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
radius: ['', '80%'],
|
|
center: ['50%', '50%'],
|
|
data: out,
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
},
|
|
normal: {
|
|
color: function (params) {
|
|
var colorList = ['#0285D0', '#D11314', '#D9731E', '#27727B'];
|
|
return colorList[params.dataIndex]
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
//公共设施
|
|
function chax5() {
|
|
var myChart = echarts.init(document.getElementById('bar_char05'));
|
|
|
|
var iname = new Array();
|
|
var dataout = new Array();
|
|
<c:forEach items="${ggss}" var="item" varStatus="status" >
|
|
iname.push("${item.iname}");
|
|
dataout.push("${item.nums}");
|
|
</c:forEach>
|
|
var name = new Array();
|
|
var out = new Array();
|
|
|
|
for (var i = iname.length - 1; i >= 0; i--) {
|
|
name.push(iname[i]);
|
|
out.push(dataout[i]);
|
|
}
|
|
option = {
|
|
tooltip: {},
|
|
legend: {},
|
|
xAxis: {
|
|
name: '单位：个',
|
|
},
|
|
yAxis: {
|
|
|
|
data: name,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "black",
|
|
fontSize: 16
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data: out,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right'
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: function (params) {
|
|
var colorList = ['#C1232B', '#B5C334', '#FCCE10',
|
|
'#E87C25', '#27727B', '#FE8463', '#9BCA63',
|
|
'#FAD860', '#F3A43B', '#60C0DD', '#D7504B',
|
|
'#C6E579', '#F4E001', '#F0805A', '#26C0C0'];
|
|
return colorList[params.dataIndex]
|
|
}
|
|
}
|
|
}
|
|
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
//旅游新媒体
|
|
function chax6() {
|
|
var myChart = echarts.init(document.getElementById('bar_char06'));
|
|
var iname = new Array();
|
|
var dataout = new Array();
|
|
<c:forEach items="${lyxmt}" var="item" varStatus="status" >
|
|
iname.push("${item.iname}");
|
|
dataout.push("${item.nums}");
|
|
</c:forEach>
|
|
var name = new Array();
|
|
var out = new Array();
|
|
|
|
for (var i = iname.length - 1; i >= 0; i--) {
|
|
var tobj = new Object();
|
|
name.push(iname[i]);
|
|
tobj.name = iname[i];
|
|
tobj.value = dataout[i]
|
|
out.push(tobj);
|
|
}
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b}: {c}条 ({d}%)",
|
|
},
|
|
color: ['#00B2EE', '#4876FF', '#EE7600', '#AB82FF', '#EE8262',
|
|
'#9BCD9B', '#778899', '#FFB90F'],
|
|
legend: {
|
|
orient: 'vertical',
|
|
x: 'left',
|
|
data: name
|
|
},
|
|
textStyle: {
|
|
fontSize: 14
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '55%',
|
|
selectedMode: 'single',
|
|
center: ['40%', '50%'],
|
|
data: out,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
] // data : out
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
//政务管理
|
|
function chax7() {
|
|
var myChart = echarts.init(document.getElementById('bar_char07'));
|
|
var iname = new Array();
|
|
var dataout = new Array();
|
|
<c:forEach items="${zwgl}" var="item" varStatus="status" >
|
|
iname.push("${item.iname}");
|
|
dataout.push("${item.nums}");
|
|
</c:forEach>
|
|
var name = new Array();
|
|
var out = new Array();
|
|
|
|
for (var i = iname.length - 1; i >= 0; i--) {
|
|
name.push(iname[i]);
|
|
out.push(dataout[i]);
|
|
}
|
|
|
|
option = {
|
|
color: ['#3398DB'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '1%',
|
|
right: '1%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: name,
|
|
axisLabel: {
|
|
rotate: 40, //刻度旋转45度角
|
|
textStyle: {
|
|
color: "black",
|
|
fontSize: 16
|
|
}
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
name: '单位：条',
|
|
}],
|
|
series: [{
|
|
type: 'bar',
|
|
barWidth: '60%',
|
|
data: out,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top'
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: function (params) {
|
|
var colorList = ['#9AFF02', '#46A3FF', '#FCCE10',
|
|
'#5CADAD', '#FF5809', '#FE8463', '#9BCA63',
|
|
'#FAD860', '#F3A43B', '#60C0DD', '#D7504B',
|
|
'#C6E579', '#F4E001', '#F0805A', '#26C0C0'];
|
|
return colorList[params.dataIndex]
|
|
}
|
|
}
|
|
}
|
|
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
//运营管理
|
|
function chax8() {
|
|
var myChart = echarts.init(document.getElementById('bar_char08'));
|
|
|
|
var iname = new Array();
|
|
var dataout = new Array();
|
|
<c:forEach items="${yygl}" var="item" varStatus="status" >
|
|
iname.push("${item.iname}");
|
|
dataout.push("${item.nums}");
|
|
</c:forEach>
|
|
var name = new Array();
|
|
var out = new Array();
|
|
|
|
for (var i = iname.length - 1; i >= 0; i--) {
|
|
name.push(iname[i]);
|
|
out.push(dataout[i]);
|
|
}
|
|
option = {
|
|
color: ['#3398DB'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '1%',
|
|
right: '1%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: name,
|
|
axisLabel: {
|
|
rotate: 25, //刻度旋转45度角
|
|
textStyle: {
|
|
color: "black",
|
|
fontSize: 12
|
|
}
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
name: '单位：条',
|
|
}],
|
|
series: [{
|
|
type: 'bar',
|
|
barWidth: '50%',
|
|
data: out,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top'
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: function (params) {
|
|
var colorList = ['#C1232B', '#B5C334', '#FCCE10',
|
|
'#E87C25', '#27727B', '#FE8463', '#9BCA63',
|
|
'#FAD860', '#F3A43B', '#60C0DD', '#D7504B',
|
|
'#C6E579', '#F4E001', '#F0805A', '#26C0C0'];
|
|
return colorList[params.dataIndex]
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
</script>
|
|
<style>
|
|
.btn-custom-default {
|
|
color: #58666e;
|
|
border-color: #dee5e7;
|
|
background-color: #fff;
|
|
box-shadow: 0 1px 1px rgb(90 90 90 / 10%);
|
|
}
|
|
|
|
.btn-custom-primary {
|
|
color: #fff;
|
|
border-color: #7266ba;
|
|
background-color: #7266ba;
|
|
box-shadow: 0 1px 1px rgb(90 90 90 / 10%);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style=" background:#fff;">
|
|
<div class="nr-nry">
|
|
<!--数据分布开始-->
|
|
<div class="zyfx-nry">
|
|
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lan">
|
|
<span class="icon icon-dxsj"></span>
|
|
</div>
|
|
<div class="wb">
|
|
<p class="shuzhi">${ha150ha }(条)</p>
|
|
<p class="shux">文化数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lan">
|
|
<span class="icon icon-lyzy"></span>
|
|
</div>
|
|
<div class="wb">
|
|
<p class="shuzhi">${ha1ha }(条)</p>
|
|
<p class="shux">旅游资源</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lv">
|
|
<span class="icon icon-lyry"></span>
|
|
</div>
|
|
<div class="wb">
|
|
<p class="shuzhi">${ha19ha }(条)</p>
|
|
<p class="shux">旅游人员</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lan">
|
|
<span class="icon icon-dmt"></span>
|
|
</div>
|
|
<div class="wb">
|
|
<p class="shuzhi">${ha27ha }(条)</p>
|
|
<p class="shux">多媒体资源</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lv">
|
|
<span class="icon icon-ggxx"></span>
|
|
</div>
|
|
<div class="wb">
|
|
<p class="shuzhi">${ha34ha }(条)</p>
|
|
<p class="shux">公共信息</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lv">
|
|
<span class="icon icon-lyxmt"></span>
|
|
</div>
|
|
<div class="wb">
|
|
<p class="shuzhi">${ha49ha }(条)</p>
|
|
<p class="shux">旅游新媒体</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lan">
|
|
<span class="icon icon-zwgl"></span>
|
|
</div>
|
|
<div class="wb">
|
|
<p class="shuzhi">${ha63ha }(条)</p>
|
|
<p class="shux">政务管理</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lan">
|
|
<span class="icon icon-dxsj"></span>
|
|
</div>
|
|
<div class="wb">
|
|
<p class="shuzhi">${ha101ha }(条)</p>
|
|
<p class="shux">运营商数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<!--数据分布结束-->
|
|
|
|
<!--旅游资源开始-->
|
|
<div class="box">
|
|
<h3 class="index-bt">
|
|
<strong class="xiaob"><span class="icon-xiao icon-lyzy"></span>
|
|
</strong>
|
|
<p>文化和旅游资源分布（单位：条）</p>
|
|
</h3>
|
|
<div class="sanlie">
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-lycs"></span>图书馆
|
|
</p>
|
|
<p class="shuliang">${ha154ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-glbm"></span>博物馆
|
|
</p>
|
|
<p class="shuliang">${ha153ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-hyxh"></span>文化馆
|
|
</p>
|
|
<p class="shuliang">${ha152ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-hyxh"></span>非遗名录
|
|
</p>
|
|
<p class="shuliang">${ha155ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-hyxh"></span>非遗传承人名录
|
|
</p>
|
|
<p class="shuliang">${ha156ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-qczl"></span>文化名城名镇名村
|
|
</p>
|
|
<p class="shuliang">${ha157ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-xxyt"></span>
|
|
全省文化设施情况
|
|
</p>
|
|
<p class="shuliang">${ha158ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-jq"></span>景区
|
|
</p>
|
|
<p class="shuliang">${ha2ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-lxs"></span>旅行社
|
|
</p>
|
|
<p class="shuliang">${ha7ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-zscs"></span>旅游饭店
|
|
</p>
|
|
<p class="shuliang">${ha9ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-cycs"></span>餐饮场所
|
|
</p>
|
|
<p class="shuliang">${ha10ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-gwcs"></span>购物场所
|
|
</p>
|
|
<p class="shuliang">${ha11ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-ylcs"></span>娱乐场所
|
|
</p>
|
|
<p class="shuliang">${ha12ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-mlxcy"></span>高尔夫球场
|
|
</p>
|
|
<p class="shuliang">${ha13ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao icon-cai-gl"></span>公路
|
|
</p>
|
|
<p class="shuliang">${ha108ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao"></span>旅游厕所
|
|
</p>
|
|
<p class="shuliang">${ha40ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao"></span>旅游商品
|
|
</p>
|
|
<p class="shuliang">${ha55ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao"></span>温泉
|
|
</p>
|
|
<p class="shuliang">${ha145ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao"></span>旅游目的地
|
|
</p>
|
|
<p class="shuliang">${ha146ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao"></span>游艇俱乐部
|
|
</p>
|
|
<p class="shuliang">${ha147ha }</p>
|
|
</div>
|
|
|
|
<div class="lie">
|
|
<p class="mingcheng">
|
|
<span class="caibiao"></span>旅游汽车公司
|
|
</p>
|
|
<p class="shuliang">${ha149ha }</p>
|
|
</div>
|
|
|
|
<div class="clear"></div>
|
|
</div>
|
|
</div>
|
|
<!--旅游资源结束-->
|
|
|
|
<%-- <div style="display: flex; padding: 0 20px">--%>
|
|
<%-- <div style="position: absolute;margin-left: 25%;z-index: 1;">--%>
|
|
<%-- <button id="but1" onclick="switchChart('age')" style="font-size: 18px; margin: 0px;" class="btn-custom-primary">年龄</button>--%>
|
|
<%-- <button id="but2" onclick="switchChart('sex')" style="font-size: 18px; margin: 0px;" class="btn-custom-default">性别</button>--%>
|
|
<%-- </div>--%>
|
|
<%-- <div id="chart1" style="flex:0 0 33.33%; width: 33.33%;height: 300px;"></div>--%>
|
|
<%-- <div id="chart2" style="flex:0 0 33.33%; width: 33.33%;height: 300px;"></div>--%>
|
|
<%-- <div id="chart3" style="flex:0 0 33.33%; width: 33.33%;height: 300px;"></div>--%>
|
|
<%-- </div>--%>
|
|
|
|
<div class="box-sanf" id="slryid">
|
|
<!--涉旅人员开始-->
|
|
<div class="pf-3">
|
|
<div class="box">
|
|
<h3 class="index-bt">
|
|
<strong class="xiaob"><span class="icon-xiao icon-lyry"></span>
|
|
</strong>
|
|
<p>涉旅人员</p>
|
|
</h3>
|
|
<div class="echart-tb" id="bar_char02" style="height:320px;"></div>
|
|
</div>
|
|
</div>
|
|
<!--涉旅人员结束-->
|
|
|
|
<!--多媒体资源开始-->
|
|
<div class="pf-3-center">
|
|
<div class="box">
|
|
<h3 class="index-bt">
|
|
<strong class="xiaob"><span class="icon-xiao icon-dmt"></span>
|
|
</strong>
|
|
<p>多媒体资源</p>
|
|
</h3>
|
|
<div class="echart-tb" style="height:320px;" id="bar_char03"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--多媒体资源结束-->
|
|
|
|
<!--电信数据开始-->
|
|
<div class="pf-3" id="cxfsid">
|
|
<div class="box">
|
|
<h3 class="index-bt">
|
|
<strong class="xiaob"><span class="icon-xiao icon-dxsj"></span>
|
|
</strong>
|
|
<p>出行方式数据</p>
|
|
</h3>
|
|
<div class="echart-tb" style="height:320px;" id="bar_char04"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--电信数据结束-->
|
|
<div class="clear"></div>
|
|
<!--公共信息开始-->
|
|
<div class="box" id="ggxxid">
|
|
<h3 class="index-bt">
|
|
<strong class="xiaob"><span class="icon-xiao icon-ggxx"></span>
|
|
</strong>
|
|
<p>公共信息</p>
|
|
</h3>
|
|
<div class="echart-tb" style="height:500px;" id='bar_char05'></div>
|
|
</div>
|
|
<!--公共信息结束-->
|
|
|
|
<!--旅游新媒体开始-->
|
|
<div class="box" id="lyxmtid">
|
|
<h3 class="index-bt">
|
|
<strong class="xiaob"><span class="icon-xiao icon-lyxmt"></span>
|
|
</strong>
|
|
<p>旅游新媒体</p>
|
|
</h3>
|
|
<div class="echart-tb" style="height:500px;" id='bar_char06'></div>
|
|
</div>
|
|
<!--旅游新媒体结束-->
|
|
|
|
<!--政务管理开始-->
|
|
<div class="box" id="zwglid">
|
|
<h3 class="index-bt">
|
|
<strong class="xiaob"><span class="icon-xiao icon-zwgl"></span>
|
|
</strong>
|
|
<p>政务管理</p>
|
|
</h3>
|
|
<div class="echart-tb" style="height:500px;" id='bar_char07'></div>
|
|
</div>
|
|
<!--政务管理结束-->
|
|
|
|
</div>
|
|
<div class="footer-nry">
|
|
<p>中国联合网络通信有限公司河北省分公司 ©技术支持</p>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="${ctx}/js/echarts/echarts.min.js"></script>
|
|
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var homesyuserregion = '${homesyuserregion}';
|
|
if (homesyuserregion != null && homesyuserregion != "" && homesyuserregion != "null" && homesyuserregion != undefined && homesyuserregion != 'undefined') {
|
|
if (homesyuserregion == '130000') {
|
|
$("#slryid").css("display", "none"); // 隐藏 涉旅人员 多媒体资源
|
|
$("#cxfsid").css("display", "none"); // 出行方式数据
|
|
$("#ggxxid").css("display", "none"); // 公共信息
|
|
$("#lyxmtid").css("display", "none"); // 旅游新媒体
|
|
$("#zwglid").css("display", "none"); // 政务管理
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<script type="text/javascript">
|
|
let ageAndSex;
|
|
function switchChart(type){
|
|
if(type == 'age'){
|
|
$("#but1").removeClass("btn-custom-default").addClass("btn-custom-primary");
|
|
$("#but2").removeClass("btn-custom-primary").addClass("btn-custom-default");
|
|
touristAgeAndSex(ageAndSex.age, ageAndSex.age, ageAndSex.age);
|
|
} else if(type == 'sex'){
|
|
$("#but1").removeClass("btn-custom-primary").addClass("btn-custom-default");
|
|
$("#but2").removeClass("btn-custom-default").addClass("btn-custom-primary");
|
|
touristAgeAndSex(ageAndSex.sex, ageAndSex.sex, ageAndSex.sex);
|
|
}
|
|
}
|
|
|
|
$.ajax({
|
|
type:'post',
|
|
url:'${ctx}/bmhebeidayindex4/lastSevenDaysTouristAgeAndSex.do',
|
|
dataType:'json',
|
|
success:function(data){
|
|
ageAndSex = data;
|
|
touristAgeAndSex(data.age, data.age, data.age);
|
|
}
|
|
});
|
|
|
|
function touristAgeAndSex(data) {
|
|
let yAxisData = data.keys;
|
|
let data1 = data.acctNumData;
|
|
let data2 = data.transAtData;
|
|
let option = {
|
|
title: {
|
|
text: "近七日游客性别年龄画像"
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line',
|
|
axis: 'y',
|
|
},
|
|
formatter: "{a}<br/>{b}：{c}%"
|
|
},
|
|
legend: {
|
|
bottom: 0
|
|
},
|
|
grid: [
|
|
{
|
|
show: false,
|
|
left: '10%',
|
|
top: '15%',
|
|
width: '40%',
|
|
containLabel: true,
|
|
bottom: 22
|
|
},
|
|
{
|
|
show: false,
|
|
left: '6%',
|
|
top: '15%',
|
|
bottom: 22,
|
|
width: '0%',
|
|
},
|
|
{
|
|
show: false,
|
|
left: '50%',
|
|
top: '15%',
|
|
bottom: 22,
|
|
containLabel: true,
|
|
width: '40%',
|
|
}
|
|
],
|
|
xAxis: [
|
|
{
|
|
type: 'value',
|
|
inverse: true,
|
|
minInterval: 15,
|
|
axisLabel: {
|
|
show: true,
|
|
formatter: '{value}%',
|
|
color: '#979797',
|
|
margin: 0
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
gridIndex: 1,
|
|
show: true,
|
|
axisLabel: {
|
|
color: '#979797',
|
|
margin: 0
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#979797',
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
gridIndex: 2,
|
|
type: 'value',
|
|
minInterval: 15,
|
|
axisLabel: {
|
|
show: true,
|
|
interval: '1',
|
|
formatter: '{value}%',
|
|
color: '#979796',
|
|
margin: 0
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'category',
|
|
inverse: false,
|
|
position: 'right',
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#979797'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
data: yAxisData
|
|
},
|
|
{
|
|
type: 'category',
|
|
inverse: false,
|
|
gridIndex: 1,
|
|
position: 'left',
|
|
axisLabel: {
|
|
align: 'left',
|
|
padding: [8, 0, 0, 0],
|
|
fontSize: 12,
|
|
fontWeight: 500,
|
|
color: `#979797`
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#979797'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
data: yAxisData
|
|
},
|
|
{
|
|
type: 'category',
|
|
inverse: false,
|
|
gridIndex: 2,
|
|
position: 'left',
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#979797'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
data: yAxisData
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
barWidth: 20,
|
|
name: '人次占比',
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: {
|
|
type: "linear",
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 0,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: "rgb(158,177,113)"
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(65, 255, 113, 0.78)"
|
|
}
|
|
],
|
|
globalCoord: false
|
|
}
|
|
}
|
|
},
|
|
data: data1
|
|
},
|
|
{
|
|
type: 'bar',
|
|
barWidth: 20,
|
|
xAxisIndex: 2,
|
|
yAxisIndex: 2,
|
|
name: '金额占比',
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: {
|
|
type: "linear",
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 0,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: "rgba(163,122,67,0.78)"
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(255, 199, 117, 0.78)"
|
|
}
|
|
],
|
|
globalCoord: false
|
|
}
|
|
}
|
|
},
|
|
data: data2
|
|
}
|
|
]
|
|
};
|
|
|
|
var composite_chart = echarts.init(document.getElementById("chart1"));
|
|
composite_chart.setOption(option);
|
|
}
|
|
|
|
// 行业消费
|
|
$.ajax({
|
|
type:'post',
|
|
url:'${ctx}/bmhebeidayindex2/nearSevenDaysConsumerIndustry.do',
|
|
dataType:'json',
|
|
success:function(data){
|
|
tourConsumerIndustry(data);
|
|
}
|
|
});
|
|
|
|
// 消费行业
|
|
function tourConsumerIndustry(data){
|
|
let arr = [];
|
|
for (const key in data) {
|
|
let object = new Object();
|
|
object.name = key;
|
|
object.value = data[key].ratio;
|
|
object.num = data[key].num;
|
|
arr.push(object);
|
|
}
|
|
|
|
let total = 100;
|
|
|
|
var rich = {
|
|
white: {
|
|
fontSize: 16,
|
|
color: '#333333',
|
|
align: 'center',
|
|
padding: [3, 0]
|
|
}
|
|
};
|
|
var color=['#ff5900', '#06d3c4', '#ffbc32', '#572ccc', '#ff3976']
|
|
var seriesObj = [{
|
|
name: '消费行业',
|
|
type: 'pie',
|
|
clockWise: false,
|
|
radius: ['43%', '58%'],
|
|
hoverAnimation: true,
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true,
|
|
position: 'outside',
|
|
fontSize: 16,
|
|
formatter: function(params) {
|
|
if(params.name !== '') {
|
|
return params.name + '：' + params.value + '%';
|
|
}else {
|
|
return '';
|
|
}
|
|
},
|
|
rich: rich
|
|
},
|
|
labelLine: {
|
|
show: true,
|
|
length: 5,
|
|
length2: 15,
|
|
}
|
|
}
|
|
},
|
|
data: arr
|
|
}];
|
|
var option = {
|
|
color : color,
|
|
tooltip: {
|
|
formatter: function (params, ticket, callback) {
|
|
return params.seriesName + "：" + params.data.name + "<br/>消费占比：" + params.data.value + "%<br/>消费金额：" + (params.data.num / 10000).toFixed(2) + "万元";
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
title:{
|
|
text:"旅游消费行业",
|
|
},
|
|
graphic:{
|
|
type:"text",
|
|
left:"center",
|
|
top:"45%",
|
|
style:{
|
|
text: total,
|
|
fill:"#A37BFD",
|
|
fontSize:30,
|
|
align:"center",
|
|
}
|
|
},
|
|
series: seriesObj
|
|
}
|
|
|
|
var composite_chart = echarts.init(document.getElementById("chart2"));
|
|
composite_chart.setOption(option);
|
|
}
|
|
|
|
// 近七日消费变化
|
|
$.ajax({
|
|
type:'post',
|
|
url:'${ctx}/bmhebeidayindex1/nearSevenDaysTourConsumptionChange.do',
|
|
dataType:'json',
|
|
success:function(data){
|
|
|
|
x(data)
|
|
}
|
|
});
|
|
|
|
|
|
function x(data) {
|
|
let dates = [];
|
|
let acctNums = [];
|
|
let transAts = [];
|
|
|
|
for (const key in data.acctNum) {
|
|
dates.push(key);
|
|
acctNums.push((data.acctNum[key] / 10000).toFixed(2));
|
|
}
|
|
|
|
for (const key in data.transAt) {
|
|
transAts.push((data.transAt[key] / 10000).toFixed(2));
|
|
}
|
|
|
|
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
|
|
let option = {
|
|
backgroundColor: '#fff',
|
|
title: {
|
|
text: '近七日旅游消费变化',
|
|
},
|
|
legend: {
|
|
bottom: '0%',
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
label: {
|
|
show: true,
|
|
backgroundColor: '#fff',
|
|
color: '#556677',
|
|
borderColor: 'rgba(0,0,0,0)',
|
|
shadowColor: 'rgba(0,0,0,0)',
|
|
shadowOffsetY: 0
|
|
},
|
|
lineStyle: {
|
|
width: 0
|
|
}
|
|
},
|
|
backgroundColor: '#fff',
|
|
textStyle: {
|
|
color: '#5c6c7c'
|
|
},
|
|
padding: [10, 10],
|
|
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
|
|
},
|
|
grid: {
|
|
top: '20%',
|
|
bottom: '17%',
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: dates,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#DCE2E8'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
interval: 1,
|
|
textStyle: {
|
|
color: '#556677'
|
|
},
|
|
// 默认x轴字体大小
|
|
fontSize: 12,
|
|
// margin:文字到x轴的距离
|
|
margin: 15
|
|
},
|
|
axisPointer: {
|
|
label: {
|
|
// padding: [11, 5, 7],
|
|
padding: [0, 0, 10, 0],
|
|
// 这里的margin和axisLabel的margin要一致!
|
|
margin: 15,
|
|
// 移入时的字体大小
|
|
fontSize: 12,
|
|
backgroundColor: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: '#fff' // 0% 处的颜色
|
|
}, {
|
|
// offset: 0.9,
|
|
offset: 0.86,
|
|
color: '#fff' // 0% 处的颜色
|
|
}, {
|
|
offset: 0.86,
|
|
color: '#33c0cd' // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: '#33c0cd' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
},
|
|
boundaryGap: false
|
|
}],
|
|
yAxis: [{
|
|
name: "旅游人次（万人）",
|
|
nameTextStyle: {
|
|
color: '#556677'
|
|
},
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#DCE2E8'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#556677'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
}, {
|
|
name: "游客消费金额（万元）",
|
|
nameTextStyle: {
|
|
color: '#556677'
|
|
},
|
|
type: 'value',
|
|
position: 'right',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#556677'
|
|
},
|
|
formatter: '{value}'
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#DCE2E8'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '游客消费金额',
|
|
type: 'line',
|
|
data: transAts,
|
|
symbolSize: 1,
|
|
symbol: 'circle',
|
|
smooth: true,
|
|
yAxisIndex: 1,
|
|
showSymbol: false,
|
|
lineStyle: {
|
|
width: 5,
|
|
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
|
|
offset: 0,
|
|
color: '#73DD39'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#73DDFF'
|
|
}
|
|
]),
|
|
shadowColor: 'rgba(115,221,255, 0.3)',
|
|
shadowBlur: 10,
|
|
shadowOffsetY: 20
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: colorList[1],
|
|
borderColor: colorList[1]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '旅游人次',
|
|
type: 'line',
|
|
data: acctNums,
|
|
symbolSize: 1,
|
|
yAxisIndex: 0,
|
|
symbol: 'circle',
|
|
smooth: true,
|
|
showSymbol: false,
|
|
lineStyle: {
|
|
width: 5,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
offset: 0,
|
|
color: '#fe9a'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#fe9a8b'
|
|
}
|
|
]),
|
|
shadowColor: 'rgba(254,154,139, 0.3)',
|
|
shadowBlur: 10,
|
|
shadowOffsetY: 20
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: colorList[2],
|
|
borderColor: colorList[2]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
var composite_chart = echarts.init(document.getElementById("chart3"));
|
|
composite_chart.setOption(option);
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|