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.
1117 lines
29 KiB
1117 lines
29 KiB
<template>
|
|
<v-scale-screen width="1920" height="1080">
|
|
<div id="index">
|
|
<!-- 左边 -->
|
|
<div class="leftbox">
|
|
<!-- 客流 -->
|
|
<div class="keliu">
|
|
<span class="kliu_title">客流趋势</span>
|
|
<div class="kliu_st">
|
|
<span id="yitem" :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')">年</span>
|
|
<span id="mitem" :class="klselt == 'm' ? 'spactive' : ''" @click="selitem('m')">月</span>
|
|
<span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')">日</span>
|
|
</div>
|
|
<!-- 柱状图 -->
|
|
<div class="tongjitu" id="homebar" style="height: 230px; width: 100%">
|
|
<!-- 柱图，注意样式 -->
|
|
</div>
|
|
<!-- 几大场馆预警图 -->
|
|
<div class="cgflow">
|
|
<!-- 左边的流量预警 -->
|
|
<div class="cgflow_leftbox">
|
|
<!-- 体育场的流量预警 -->
|
|
<div class="cgfitem">
|
|
<span class="cgtitle">体育场</span>
|
|
<span class="cgval">20%</span>
|
|
<span class="cgimg"><img src="../assets/index/tyc_icon.png" /></span>
|
|
</div>
|
|
<!-- 体育馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgtitle">体育馆</span>
|
|
<span class="cgval">20%</span>
|
|
<span class="cgimg"><img src="../assets/index/tyg_icon.png" /></span>
|
|
</div>
|
|
<!-- 游泳馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgtitle">游泳场</span>
|
|
<span class="cgval">20%</span>
|
|
<span class="cgimg"><img src="../assets/index/yyg_icon.png" /></span>
|
|
</div>
|
|
</div>
|
|
<!-- 右边流量预警 -->
|
|
<div class="cgflow_rightbox">
|
|
<!-- 图书馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgimg"><img src="../assets/index/tsg_icon.png" /></span>
|
|
<span class="cgval">20%</span>
|
|
<span class="cgtitle">图书馆</span>
|
|
</div>
|
|
<!-- 文化馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgimg"><img src="../assets/index/whg_icon.png" /></span>
|
|
<span class="cgval">20%</span>
|
|
<span class="cgtitle">文化馆</span>
|
|
</div>
|
|
<!-- 博物馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgimg"><img src="../assets/index/bwg_icon.png" /></span>
|
|
<span class="cgval">20%</span>
|
|
<span class="cgtitle">博物馆</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 今日各场馆人数趋势 -->
|
|
<div class="gcgqs">
|
|
<div class="gcg_title">今日各场馆人数趋势</div>
|
|
<div id="kl-line" style="width: 100%; height: 20vh"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- 中间 -->
|
|
<div class="centerbox">
|
|
<!-- 今日进馆人数 -->
|
|
<div class="jgrs">
|
|
<span id="jgval1" class="jgval jgval1">345,235</span>
|
|
<span class="jgdesc jgdesc1">今日进馆人数</span>
|
|
</div>
|
|
<!-- 本周进馆人数 -->
|
|
<div class="jgrs">
|
|
<span id="jgval2" class="jgval">345,235</span>
|
|
<span class="jgdesc">本周进馆人数</span>
|
|
</div>
|
|
<!-- 本月进馆人数 -->
|
|
<div class="jgrs">
|
|
<span id="jgval3" class="jgval jgval3">345,235</span>
|
|
<span class="jgdesc jgdesc3">本月进馆人数</span>
|
|
</div>
|
|
<!-- 会动的体育馆image -->
|
|
<div class="tygpic"><img src="../assets/index/zt.png" /></div>
|
|
<!-- 年度进馆人数 -->
|
|
<div class="ndjgrs">
|
|
<span class="nddesc">年度进馆人数</span>
|
|
<span class="ndval">33,532,890</span>
|
|
</div>
|
|
</div>
|
|
<!-- 右边 -->
|
|
<div class="rbox">
|
|
<div class="rbox_title">各场馆实施实时进馆人数</div>
|
|
<div class="rbox_con">
|
|
<!-- 各场馆实时人数 cg1 -->
|
|
<div class="rbitem">
|
|
<span class="rbcgname">体育场</span>
|
|
<span class="rbtitle">当前人数</span>
|
|
<span class="rbval">4,738</span>
|
|
<span class="rbrate">40%</span>
|
|
</div>
|
|
<!-- 各场馆实时人数 cg2 -->
|
|
<div class="rbitem">
|
|
<span class="rbcgname">体育场</span>
|
|
<span class="rbtitle">当前人数</span>
|
|
<span class="rbval">4,738</span>
|
|
<span class="rbrate">50%</span>
|
|
</div>
|
|
<!-- 各场馆实时人数 cg3 -->
|
|
<div class="rbitem">
|
|
<span class="rbcgname">体育场</span>
|
|
<span class="rbtitle">当前人数</span>
|
|
<span class="rbval">4,738</span>
|
|
<span class="rbrate">80%</span>
|
|
</div>
|
|
<!-- 各场馆实时人数 cg4 -->
|
|
<div class="rbitem">
|
|
<span class="rbcgname">体育场</span>
|
|
<span class="rbtitle">当前人数</span>
|
|
<span class="rbval">4,738</span>
|
|
<span class="rbrate">25%</span>
|
|
</div>
|
|
<!-- 各场馆实时人数 cg5 -->
|
|
<div class="rbitem">
|
|
<span class="rbcgname">体育场</span>
|
|
<span class="rbtitle">当前人数</span>
|
|
<span class="rbval">4,738</span>
|
|
<span class="rbrate">90%</span>
|
|
</div>
|
|
<!-- 各场馆实时人数 cg6 -->
|
|
<div class="rbitem">
|
|
<span class="rbcgname">体育场</span>
|
|
<span class="rbtitle">当前人数</span>
|
|
<span class="rbval">4,738</span>
|
|
<span class="rbrate">75%</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</v-scale-screen>
|
|
</template>
|
|
<script>
|
|
// 引入echarts
|
|
import * as echarts from "echarts";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 年月日选中的样式,默认日
|
|
klselt: "d",
|
|
};
|
|
},
|
|
//创建的时候修改背景图片
|
|
created() {
|
|
let cc = window.document.getElementById("app");
|
|
// 清除其他多余的classname
|
|
let len = cc.classList.length;
|
|
|
|
if (len > 1) {
|
|
cc.className = "btgym page_bg";
|
|
}
|
|
},
|
|
mounted() {
|
|
// 首页线图
|
|
this.home_bar();
|
|
// 折线图
|
|
this.line_zone();
|
|
|
|
this.addNumber(0, 345235, 'jgval1');
|
|
this.addNumber(0, 345235, 'jgval2');
|
|
this.addNumber(0, 345235, 'jgval3');
|
|
},
|
|
methods: {
|
|
//选择年月日中的某个
|
|
selitem(type) {
|
|
this.klselt = type;
|
|
},
|
|
// 透明背景柱状统计图
|
|
home_bar() {
|
|
var chartDom = document.getElementById("homebar");
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
//
|
|
// let that = this;
|
|
|
|
// option = {
|
|
// xAxis: {
|
|
// type: "category",
|
|
// data: that.bar_tdata,
|
|
// },
|
|
// yAxis: {
|
|
// type: "value",
|
|
// //网格线
|
|
// splitLine: {
|
|
// lineStyle: {
|
|
// type: "soild",
|
|
// color: "#2F00FF",
|
|
// },
|
|
// },
|
|
// },
|
|
// series: [
|
|
// {
|
|
// data: [120, 200, 150, 80, 70, 110, 130, 630, 530, 460],
|
|
// //data: that.bar_data,
|
|
// type: "bar",
|
|
// showBackground: true,
|
|
// // 设置顶部圆形
|
|
// symbolSize: function (d) {
|
|
// console.log(d);
|
|
// return d > 0 ? [10, 20] : [0, 0];
|
|
// },
|
|
// symbolPosition: "end",
|
|
|
|
// // symbolPosition:'end',
|
|
// // 背景颜色
|
|
// backgroundStyle: {
|
|
// symbolPosition: "end",
|
|
// symbolSize: [20, 20],
|
|
// symbolOffset: [0, "-20%"],
|
|
// opacity: 0.75,
|
|
// //color: 'rgba(180, 180, 180, 0.2)'
|
|
// color: {
|
|
// type: "linear",
|
|
// x: 0,
|
|
// y: 1,
|
|
// x2: 1,
|
|
// y2: 1,
|
|
// colorStops: [
|
|
// {
|
|
// offset: 0,
|
|
// color: "#2F00FF", // 0% 处的颜色
|
|
// },
|
|
// {
|
|
// offset: 0.2,
|
|
// color: "#000", // 50% 处的颜色
|
|
// },
|
|
// {
|
|
// offset: 0.8,
|
|
// color: "#000", // 50% 处的颜色
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: "#2F00FF", // 0% 处的颜色
|
|
// },
|
|
// ],
|
|
// global: false, // 缺省为 false
|
|
// },
|
|
// },
|
|
|
|
// // 条柱颜色
|
|
// color: {
|
|
// type: "linear",
|
|
// x: 0,
|
|
// y: 1,
|
|
// x2: 1,
|
|
// y2: 1,
|
|
// colorStops: [
|
|
// {
|
|
// offset: 0,
|
|
// color: "#00B4FF", // 0% 处的颜色
|
|
// },
|
|
// {
|
|
// offset: 0.6,
|
|
// color: "#2f00ff",
|
|
// },
|
|
// {
|
|
// offset: 0.8,
|
|
// color: "#2f00ff",
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: "#00B4FF", // 100% 处的颜色
|
|
// },
|
|
// ],
|
|
// global: false, // 缺省为 false
|
|
// },
|
|
// },
|
|
// ],
|
|
// };
|
|
|
|
|
|
// var xData = ['09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00', '17:00','18:00', '20:00', '21:00', '22:00'];
|
|
|
|
var data = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120]
|
|
// var data = [Math.random() * 300]
|
|
option = {
|
|
// backgroundColor: '#031245',
|
|
color: [
|
|
'#63caff',
|
|
'#49beff',
|
|
'#03387a',
|
|
'#03387a',
|
|
'#03387a',
|
|
'#6c93ee',
|
|
'#a9abff',
|
|
'#f7a23f',
|
|
'#27bae7',
|
|
'#ff6d9d',
|
|
'#cb79ff',
|
|
'#f95b5a',
|
|
'#ccaf27',
|
|
'#38b99c',
|
|
'#93d0ff',
|
|
'#bd74e0',
|
|
'#fd77da',
|
|
'#dea700',
|
|
],
|
|
grid: {
|
|
containLabel: true,
|
|
left: 30,
|
|
right: 0,
|
|
bottom: 0,
|
|
top: 60,
|
|
},
|
|
xAxis: {
|
|
axisLabel: {
|
|
color: '#FFFFFF',
|
|
fontSize: 12,
|
|
interval: 0,
|
|
// show: false,
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: '#384267',
|
|
},
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
width: 1,
|
|
type: 'solid',
|
|
},
|
|
show: true,
|
|
},
|
|
data: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '20:00', '21:00', '22:00'],
|
|
type: 'category',
|
|
},
|
|
yAxis: {
|
|
// show:false,
|
|
axisLabel: {
|
|
color: '#0095FF',
|
|
fontSize: 14,
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
width: 1,
|
|
},
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
type: 'solid',
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
width: 1,
|
|
type: 'solid',
|
|
},
|
|
show: false,
|
|
},
|
|
name: '',
|
|
},
|
|
series: [
|
|
{
|
|
data: data,
|
|
type: 'bar',
|
|
barMaxWidth: 'auto',
|
|
barWidth: 15,
|
|
// backgroundStyle: {
|
|
// showBackground: true,
|
|
// borderColor: '#B03A5B',
|
|
// shadowColor: 'rgba(42, 18, 255,0.5)',
|
|
// shadowBlur: 15
|
|
// },
|
|
itemStyle: {
|
|
normal: {
|
|
color: function () {
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
|
|
{ offset: 0, color: "#00B4FF" },
|
|
{ offset: 1, color: "#2F00FF" }
|
|
], false)
|
|
},
|
|
label: {
|
|
show: false,//柱状上的数据
|
|
}
|
|
},
|
|
|
|
// color: {
|
|
// x: 0,
|
|
// y: 0,
|
|
// x2: 0,
|
|
// y2: 1,
|
|
// type: 'linear',
|
|
// global: false,
|
|
// colorStops: [
|
|
// {
|
|
// offset: 0,
|
|
// color: '#0b9eff',
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: '#63caff',
|
|
// },
|
|
// ],
|
|
// },
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
distance: 15,
|
|
color: '#fff',
|
|
},
|
|
},
|
|
{
|
|
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
type: 'bar',
|
|
barMaxWidth: '15',
|
|
symbol: 'circle',
|
|
symbolOffset: [0, '50%'],
|
|
symbolSize: [10, 5],
|
|
color: '#fff',
|
|
},
|
|
{
|
|
data: data,
|
|
type: 'pictorialBar',
|
|
barMaxWidth: '15',
|
|
symbolPosition: 'end',
|
|
symbol: 'circle',
|
|
symbolOffset: [0, '-50%'],
|
|
symbolSize: [15, 7],
|
|
zlevel: 2,
|
|
},
|
|
{
|
|
data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
|
|
type: 'bar',
|
|
barMaxWidth: 'auto',
|
|
barWidth: 15,
|
|
barGap: '-100%',
|
|
// barGap: '40%',
|
|
zlevel: -1,
|
|
|
|
// backgroundStyle: {
|
|
// showBackground: true,
|
|
// borderColor: '#B03A5B',
|
|
// shadowColor: 'rgba(42, 18, 255,0.5)',
|
|
// shadowBlur: 15
|
|
// },
|
|
itemStyle: {
|
|
normal: {
|
|
// color: function () {
|
|
// return new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
|
|
// { offset: 0, color: "#00B4FF" },
|
|
// { offset: 1, color: "#2F00FF" }
|
|
// ], false)
|
|
// },
|
|
|
|
// color:'rgba(8, 15, 56,1)'
|
|
},
|
|
}
|
|
},
|
|
{
|
|
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
type: 'pictorialBar',
|
|
barMaxWidth: '15',
|
|
symbol: 'circle',
|
|
symbolOffset: [0, '50%'],
|
|
symbolSize: [15, 7],
|
|
zlevel: -2,
|
|
},
|
|
{
|
|
data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
|
|
type: 'pictorialBar',
|
|
barMaxWidth: '15',
|
|
symbolPosition: 'end',
|
|
symbol: 'circle',
|
|
symbolOffset: [0, '-50%'],
|
|
symbolSize: [15, 7],
|
|
zlevel: -1,
|
|
itemStyle: {
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
shadowBlur: 15
|
|
}
|
|
},
|
|
],
|
|
tooltip: {
|
|
show: "true",
|
|
trigger: 'item',
|
|
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
|
|
padding: [8, 10], //内边距
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
|
|
formatter: function (params) {
|
|
if (params.seriesName != "") {
|
|
return params.name + ' ： 有 ' + params.value + ' 人';
|
|
}
|
|
},
|
|
},
|
|
};
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
|
|
// 大面积折线图
|
|
// line_zone() {
|
|
// var chartDom = document.getElementById("kl-line");
|
|
// var myChart = echarts.init(chartDom);
|
|
// var option;
|
|
|
|
// let base = +new Date(2022, 9, 3);
|
|
// let oneDay = 24 * 3600 * 1000;
|
|
// let date = [];
|
|
// let data = [Math.random() * 300];
|
|
// for (let i = 1; i < 20000; i++) {
|
|
// var now = new Date((base += oneDay));
|
|
// date.push(
|
|
// [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
|
|
// );
|
|
// data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
|
|
// }
|
|
// option = {
|
|
// xAxis: {
|
|
// type: "category",
|
|
// boundaryGap: false,
|
|
// data: date,
|
|
// },
|
|
// yAxis: {
|
|
// type: "value",
|
|
// boundaryGap: [0, "100%"],
|
|
// //网格线
|
|
// splitLine: {
|
|
// lineStyle: {
|
|
// type: "soild",
|
|
// color: "#2F00FF",
|
|
// },
|
|
// },
|
|
// },
|
|
|
|
// series: [
|
|
// {
|
|
// name: "Fake Data",
|
|
// type: "line",
|
|
// symbol: "none",
|
|
// sampling: "lttb",
|
|
// itemStyle: {
|
|
// color: "rgb(255, 170, 131)",
|
|
// },
|
|
// areaStyle: {
|
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
// {
|
|
// offset: 0,
|
|
// color: "rgba(255, 158, 68,0.6)",
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: "rgb(255, 70, 131,0.6)",
|
|
// },
|
|
// ]),
|
|
// },
|
|
// data: data,
|
|
// },
|
|
// ],
|
|
// };
|
|
|
|
// option && myChart.setOption(option);
|
|
// },
|
|
|
|
line_zone() {
|
|
var chartDom = document.getElementById("kl-line");
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '20:00', '21:00'];
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
|
|
var name = []
|
|
var data = [
|
|
[137, 34, 135, 161, 74, 152, 110, 100, 150, 137, 34, 135, 161],
|
|
[174, 137, 135, 34, 152, 135, 140, 160, 100, 174, 137, 135, 34],
|
|
[134, 74, 137, 135, 161, 137, 300, 220, 250, 134, 74, 137, 135],
|
|
[147, 134, 155, 131, 174, 122, 140, 160, 150, 127, 134, 175, 161],
|
|
[124, 147, 175, 134, 122, 175, 180, 110, 130, 154, 187, 125, 134],
|
|
[154, 174, 157, 175, 121, 157, 200, 250, 280, 134, 174, 157, 175],
|
|
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
|
|
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
|
|
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
|
|
]
|
|
|
|
var series = [];
|
|
for (var i = 0; i < 6; i++) {
|
|
series.push({
|
|
name: name[i],
|
|
type: "line",
|
|
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
|
|
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
|
smooth: true, //是否平滑曲线显示
|
|
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: color[i]
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(255,255,255,0)'
|
|
}], false),
|
|
// shadowColor: 'rgba(255,255,255, 0.1)',
|
|
shadowBlur: 10,
|
|
opacity: 0.3,
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: color[i],
|
|
lineStyle: {
|
|
width: 1,
|
|
type: 'solid' //'dotted'虚线 'solid'实线
|
|
},
|
|
borderColor: color[i], //图形的描边颜色。支持的格式同 color
|
|
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ]
|
|
barBorderRadius: 0,
|
|
label: {
|
|
show: false,
|
|
},
|
|
opacity: 0.5,
|
|
}
|
|
},
|
|
data: data[i],
|
|
|
|
})
|
|
}
|
|
option = {
|
|
// backgroundColor: "#141f56",
|
|
legend: {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
itemGap: 15,
|
|
itemWidth: 15,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '14'
|
|
},
|
|
data: name
|
|
},
|
|
title: {
|
|
// text: "负面言论分领域趋势",
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '22',
|
|
fontWeight: 'normal',
|
|
},
|
|
subtextStyle: {
|
|
color: '#90979c',
|
|
fontSize: '16',
|
|
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
|
|
lineStyle: {
|
|
color: '#57617B'
|
|
}
|
|
},
|
|
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
|
|
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
|
|
padding: [8, 10], //内边距
|
|
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: 160,
|
|
bottom: 160,
|
|
right: 15,
|
|
left: 50,
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
xAxis: [{
|
|
type: "category",
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#0B0765',
|
|
}
|
|
},
|
|
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
inside: false,
|
|
textStyle: {
|
|
color: '#FFFFFF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
},
|
|
data: xData,
|
|
}],
|
|
yAxis: {
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#0B0765 ',
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#0B0765 ',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#0095FF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
formatter: '{value}',
|
|
},
|
|
},
|
|
series: series,
|
|
}
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
|
|
addNumber(start, end, id) {
|
|
var o = document.getElementById(id);
|
|
var i = start;
|
|
var Interval;
|
|
if (i < end) {
|
|
Interval = setInterval(function () {
|
|
i += 4000; // 设置每次增加的动态数字，可调整
|
|
if (i > end) {
|
|
clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
|
|
o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
|
|
i = 0;
|
|
} else {
|
|
o.innerHTML = i.toLocaleString();
|
|
}
|
|
}, 10); // 数据跳转的速度控制
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
#index {
|
|
width: 100%;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
|
|
.leftbox {
|
|
width: 30%;
|
|
float: left;
|
|
/* height: 100%; */
|
|
}
|
|
|
|
.leftbox .keliu {
|
|
background-image: url("../assets/index/left_t1_bg.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
height: 7vh;
|
|
color: #b5b7c5;
|
|
}
|
|
|
|
/* 客流趋势 */
|
|
.leftbox .keliu .kliu_title {
|
|
line-height: 0.88rem;
|
|
font-size: 20px;
|
|
padding-left: 2rem;
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
.leftbox .keliu .kliu_st {
|
|
float: right;
|
|
line-height: 0.88rem;
|
|
font-size: 0.26rem;
|
|
padding-top: 0.18rem;
|
|
}
|
|
|
|
.leftbox .keliu .kliu_st span {
|
|
display: block;
|
|
background: url("../assets/index/sel_zone_bg.png") no-repeat 0 0;
|
|
background-position: 0 0;
|
|
background-size: 100%;
|
|
text-align: center;
|
|
width: 0.48rem;
|
|
height: 0.48rem;
|
|
line-height: 0.48rem;
|
|
float: left;
|
|
margin-left: 0.08rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.leftbox .keliu .kliu_st .spactive {
|
|
background-image: url("../assets/index/sel_zone_active_bg.png");
|
|
}
|
|
|
|
/* 统计图 */
|
|
.leftbox .keliu .tongjitu {
|
|
padding-top: 0.56rem;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 场馆流量预警 */
|
|
.leftbox .cgflow {
|
|
margin-top: 0.2rem;
|
|
background-image: url("../assets/index/left_t3_bg.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 center;
|
|
height: 30vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* 场馆左侧 */
|
|
.leftbox .cgflow_leftbox {
|
|
/* padding:66px 0 0 6%;
|
|
float: left; */
|
|
/* width: 30%; */
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.leftbox .cgflow_rightbox {
|
|
/* width: 30%; */
|
|
text-align: right;
|
|
}
|
|
|
|
.leftbox .cgflow .cgfitem {
|
|
width: 100%;
|
|
height: 0.46rem;
|
|
}
|
|
|
|
.leftbox .cgflow .cgfitem span {
|
|
/* display: block;
|
|
margin-left: 12px;
|
|
float: left;
|
|
display: block; */
|
|
margin-right: 14px;
|
|
/* display: block; */
|
|
|
|
}
|
|
|
|
.leftbox .cgflow .cgfitem .cgtitle {
|
|
color: #0096ff;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.leftbox .cgflow .cgfitem .cgval {
|
|
color: white;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.leftbox .cgflow .cgfitem .cgimg img {
|
|
width: 26px;
|
|
height: 26px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
/* 场馆左侧 */
|
|
.leftbox .cgflow .leftbox .cgflow_rightbox {
|
|
padding: 66px 0 0 12%;
|
|
float: right;
|
|
width: 30%;
|
|
margin-left: 4%;
|
|
}
|
|
|
|
/* 各场馆人流趋势 */
|
|
.leftbox .gcgqs {
|
|
float: left;
|
|
width: 100%;
|
|
height: 30vh;
|
|
}
|
|
|
|
.leftbox .gcgqs .gcg_title {
|
|
background-image: url('../assets/index/left_t2_bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 0.88rem;
|
|
font-size: 20px;
|
|
line-height: 0.88rem;
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
/* 中间的数据 */
|
|
.centerbox {
|
|
background-image: url('../assets/index/mid_bg.png');
|
|
background-position: 0 0;
|
|
background-size: 100% 100%;
|
|
width: 30%;
|
|
float: left;
|
|
margin-left: 3%;
|
|
padding: 2%;
|
|
margin-top: 5%;
|
|
position: relative;
|
|
}
|
|
|
|
.centerbox .jgrs {
|
|
width: 33.33%;
|
|
float: left;
|
|
height: 120px;
|
|
position: relative;
|
|
}
|
|
|
|
.centerbox .jgval {
|
|
display: block;
|
|
color: white;
|
|
font-size: 26px;
|
|
position: absolute;
|
|
bottom: 54px;
|
|
left: 48px;
|
|
}
|
|
|
|
.centerbox .jgdesc {
|
|
display: block;
|
|
color: gray;
|
|
font-size: 16px;
|
|
position: absolute;
|
|
bottom: 14px;
|
|
left: 50px;
|
|
}
|
|
|
|
.centerbox .jgval1 {
|
|
bottom: 54px;
|
|
left: 70px;
|
|
}
|
|
|
|
.centerbox .jgdesc1 {
|
|
bottom: 16px;
|
|
left: 70px;
|
|
}
|
|
|
|
.centerbox .jgval3 {
|
|
bottom: 54px;
|
|
left: 25px;
|
|
}
|
|
|
|
.centerbox .jgdesc3 {
|
|
bottom: 14px;
|
|
left: 26px;
|
|
}
|
|
|
|
.centerbox .tygpic {
|
|
clear: both;
|
|
width: 100%;
|
|
}
|
|
|
|
.centerbox .tygpic img {
|
|
height: 360px;
|
|
margin: 12% auto;
|
|
}
|
|
|
|
.ndjgrs {
|
|
color: white;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 8%;
|
|
left: 41%;
|
|
}
|
|
|
|
.ndjgrs .nddesc {
|
|
font-size: 18px;
|
|
display: block;
|
|
margin-bottom: 19px;
|
|
}
|
|
|
|
.ndjgrs .ndval {
|
|
display: block;
|
|
font-size: 24px;
|
|
}
|
|
|
|
/* 右边 */
|
|
.rbox {
|
|
width: 30%;
|
|
float: left;
|
|
margin-left: 3%;
|
|
color: #fff;
|
|
}
|
|
|
|
.rbox .rbox_title {
|
|
background-image: url('../assets/index/right_t1_bg.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
height: 0.86rem;
|
|
line-height: 0.86rem;
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
text-align: right;
|
|
padding-right: 2.1rem;
|
|
color: #b5b7c5;
|
|
}
|
|
|
|
.rbox .rbox_con {
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.rbox .rbox_con .rbitem {
|
|
background-image: url('../assets/index/rb_data_bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 2.4rem;
|
|
width: 46%;
|
|
margin-left: 0.28rem;
|
|
float: left;
|
|
margin-top: 0.46rem;
|
|
padding-top: 0.2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.rbox .rbox_con .rbitem span {
|
|
display: block;
|
|
}
|
|
|
|
.rbox .rbox_con .rbitem .rbcgname {
|
|
margin-top: 0.28rem;
|
|
color: #0096ff;
|
|
text-align: right;
|
|
padding-right: 0.28rem;
|
|
|
|
}
|
|
|
|
.rbox .rbox_con .rbitem .rbtitle {
|
|
text-align: left;
|
|
padding-left: 0.66rem;
|
|
padding-top: 0.1rem;
|
|
}
|
|
|
|
.rbox .rbox_con .rbitem .rbval {
|
|
font-size: 25px;
|
|
font-weight: 600;
|
|
width: 60%;
|
|
height: 118px;
|
|
text-align: center;
|
|
/* line-height: 118px; */
|
|
line-height: 160px;
|
|
}
|
|
|
|
.rbox .rbox_con .rbitem .rbrate {
|
|
width: 30%;
|
|
/* float: left; */
|
|
height: 118px;
|
|
text-align: center;
|
|
line-height: 118px;
|
|
position: absolute;
|
|
bottom: -12px;
|
|
right: 16px;
|
|
color: #00D8FF;
|
|
|
|
}
|
|
|
|
/* 页面背景 */
|
|
/* .page_bg {
|
|
clear: both;
|
|
background-image: url("../assets/index/bg.jpg") !important;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('../assets/index/bg.jpg') !important;
|
|
background-size: 100% 100%;
|
|
background-position: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
} */
|
|
.btgym {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('../assets/index/bg.jpg') !important;
|
|
background-size: 100% 100%;
|
|
background-position: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.screen-box {
|
|
background: none !important;
|
|
}
|
|
</style>
|