xioayue
/
btgym
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

总览页面和文化页面完善

lite
123456 2 years ago
parent
f1764f6807
commit
db306e9cfc
4 changed files with 4157 additions and 1052 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3902
      package-lock.json
  2. 2
      package.json
  3. 457
      src/views/cultrue/index.vue
  4. 848
      src/views/index.vue

3902
package-lock.json
View File

File diff suppressed because it is too large

2
package.json
View File

@ -8,6 +8,8 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@babel/core": "^7.22.5",
"@babel/preset-env": "^7.22.5",
"@jiaminghi/data-view": "^2.7.3",
"@types/echarts": "^4.4.3",
"axios": "^1.4.0",

457
src/views/cultrue/index.vue
View File

@ -4,26 +4,26 @@
<div class="leftbox">
<div class="lb_wht">
<span class="wh_big_tit">文化</span>
<span class="wh_small">图书馆|文化馆|博物馆</span>
<span class="wh_small">图书馆 &nbsp; | &nbsp; 文化馆 &nbsp; | &nbsp; 博物馆</span>
</div>
<!-- 总计进馆总人数 -->
<div class="inszone">
<span class="institle">总计进馆人数</span>
<!-- 今日进馆人数 -->
<div class="insval">
<img src="../../assets/wh/td_ins.png"/>
<img src="../../assets/wh/td_ins.png" />
<span class="insv">234,098</span>
<span class="inst">今日进馆人数</span>
</div>
<!-- 本月进馆人数 -->
<div class="insval">
<img src="../../assets/wh/tm_ins.png"/>
<img src="../../assets/wh/tm_ins.png" />
<span class="insv">234,098</span>
<span class="inst">本月进馆人数</span>
</div>
<!-- 本年进馆人数 -->
<div class="insval">
<img src="../../assets/wh/tyear_ins.png"/>
<img src="../../assets/wh/tyear_ins.png" />
<span class="insv">234,098</span>
<span class="inst">本年进馆人数</span>
</div>
@ -32,7 +32,7 @@
<div class="dinszone">
<span class="dins_title">24小时总进馆人流趋势</span>
<!-- 柱状统计图 -->
<div class="dins_chart" id="dinschart"></div>
<div class="dins_chart" id="dinschart" style="height: 200px; width: 100%"></div>
</div>
</div>
<!-- 中间 -->
@ -70,6 +70,8 @@
</div>
</template>
<script>
// 引入echarts
import * as echarts from "echarts";
export default {
data() {
return {};
@ -83,71 +85,392 @@ export default {
cc.classList.add("wh_bg");
}
console.log(cc.classList)
this.cultrue_bar1();
this.cultrue_bar3();
},
methods: {
cultrue_bar1() {
var chartDom = document.getElementById("dinschart");
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', '22:00'];
// var data = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000]
// var data = [Math.random() * 300]
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
return params[0].name + "</br>" + params[0].value
}
},
// legend: {
// data: ['厂用电量']
// },
grid: {
left: '3%',
right: '3%',
bottom: '3%',
top: '10%',
containLabel: true
},
xAxis: [{
data: [
'08:00','09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00',
],
axisLine: {
lineStyle: {
color: '#0095FF',
width: 1,
type: 'solid',
},
show: true
},
axisTick: {
show: false,
},
splitLine: {
show: false
},
axisLabel: {
// interval: 0,
// rotate: 0
show:true,
textStyle:{
color:'#fff'
}
}
}],
yAxis: [{
type: 'value',
// name: ' 今日发电量( KWh )',
axisLine: {
show: false
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
// 使用深浅的间隔色
color: '#027eff'
}
},
axisLabel: {
color: '#0095FF',
}
}],
series: [{
// name: '厂用电量',
type: 'bar',
barGap: '5%',
barWidth: '10%',
barCategoryGap: '60%',
stack: 1,
itemStyle: {
normal: {
barBorderRadius: [30, 30, 0, 0],
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#00feff'
},
// {
// offset: 0.5,
// color: '#00feff'
// },
{
offset: 1,
color: '#0286ff'
}
]
)
}
},
data: [
14000,
11000,
10000,
9000,
8000,
7000,
5000,
4000,
3000,
],
zlevel: 11
},
{
// name: '厂用电量',
type: 'scatter',
stack: 1,
xAxisIndex: 0,
symbolOffset: [0, 0], //相对于原本位置的偏移量
data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
itemStyle: {
normal: {
color: '#fff'
}
},
symbolSize: 13,
zlevel: 10,
z: 2,
},
{
name: '背景',
type: 'bar',
barWidth: '10%',
barGap: '-100%',
data: [15000,15000,15000,15000,15000,15000,15000,15000,15000],
itemStyle: {
normal: {
color: '#004298',
barBorderRadius: 30,
// backgroundColor:'#091C24'
// borderColor:'#00D1F0'
}
},
z: 1,
},
]
}
option && myChart.setOption(option);
},
cultrue_bar3() {
var chartDom = document.getElementById("tsgchart1");
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', '22:00'];
// var data = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000]
// var data = [Math.random() * 300]
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
return params[0].name + "</br>" + params[0].value
}
},
// legend: {
// data: ['厂用电量']
// },
grid: {
left: '3%',
right: '3%',
bottom: '3%',
top: '10%',
containLabel: true
},
xAxis: [{
data: [
'08:00','09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00',
],
axisLine: {
lineStyle: {
color: '#0095FF',
width: 1,
type: 'solid',
},
show: true
},
axisTick: {
show: false,
},
splitLine: {
show: false
},
axisLabel: {
// interval: 0,
// rotate: 0
show:true,
textStyle:{
color:'#fff'
}
}
}],
yAxis: [{
type: 'value',
// name: ' 今日发电量( KWh )',
axisLine: {
show: false
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
// 使用深浅的间隔色
color: '#027eff'
}
},
axisLabel: {
color: '#0095FF',
}
}],
series: [{
// name: '厂用电量',
type: 'bar',
barGap: '5%',
barWidth: '10%',
barCategoryGap: '60%',
stack: 1,
itemStyle: {
normal: {
barBorderRadius: [30, 30, 0, 0],
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#00feff'
},
// {
// offset: 0.5,
// color: '#00feff'
// },
{
offset: 1,
color: '#0286ff'
}
]
)
}
},
data: [
14000,
11000,
10000,
9000,
8000,
7000,
5000,
4000,
3000,
],
zlevel: 11
},
{
// name: '厂用电量',
type: 'scatter',
stack: 1,
xAxisIndex: 0,
symbolOffset: [0, 0], //相对于原本位置的偏移量
data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
itemStyle: {
normal: {
color: '#fff'
}
},
symbolSize: 13,
zlevel: 10,
z: 2,
},
{
name: '背景',
type: 'bar',
barWidth: '10%',
barGap: '-100%',
data: [15000,15000,15000,15000,15000,15000,15000,15000,15000],
itemStyle: {
normal: {
color: '#004298',
barBorderRadius: 30,
// backgroundColor:'#091C24'
// borderColor:'#00D1F0'
}
},
z: 1,
},
]
}
option && myChart.setOption(option);
},
},
methods: {},
};
</script>
<style>
#cultrue{
width: 100%;
#cultrue {
width: 96%;
height: 100%;
float: left;
/* float: left; */
margin: 0 auto;
}
/* 左边 */
.leftbox{
.leftbox {
width: 25%;
float: left;
color: #fff;
}
.leftbox .lb_wht{
.leftbox .lb_wht {
background-image: url("../../assets/wh/wht_bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 0 0;
height: 3.8rem;
}
.leftbox .lb_wht span{
.leftbox .lb_wht span {
display: block;
}
.leftbox .lb_wht .wh_big_tit{
.leftbox .lb_wht .wh_big_tit {
font-size: 0.68rem;
/* line-height: 4.2rem; */
text-align: right;
padding-top: 120px;
}
.leftbox .lb_wht .wh_small{
.leftbox .lb_wht .wh_small {
padding-top: 12px;
font-size: 12px;
text-align: right;
padding-right: 10px;
}
/* 总计进馆人数 */
.inszone{
.inszone {
width: 100%;
float: left;
height: 2.4rem;
background-image:url("../../assets/wh/ins_count.png");
background-image: url("../../assets/wh/ins_count.png");
background-repeat: no-repeat;
background-size: 100% 100%;
margin-top: 0.48rem;
}
.inszone .institle{
.inszone .institle {
color: #00c6ff;
padding-left: 0.4rem;
padding-left: 0.5rem;
line-height: 0.38rem;
height: 0.38rem;
display: block;
font-size: 16px;
}
.inszone .insval{
.inszone .insval {
width: 30%;
height: 1.68rem;
float: left;
margin-left: 0.16rem;
}
.inszone .insval:first{
.inszone .insval:first {
margin-left: 0;
}
.inszone .insval img{
.inszone .insval img {
padding-top: 0.268rem;
display: block;
text-align: center;
@ -155,30 +478,35 @@ export default {
margin-left: auto;
margin-right: auto;
}
.inszone .insval span{
.inszone .insval span {
display: block;
width: 100%;
text-align: center;
}
.inszone .insval .insv{
.inszone .insval .insv {
height: 0.48rem;
line-height: 0.48rem;
font-size: 22px;
}
.inszone .insval .inst{
color:#6a6c7c;
.inszone .insval .inst {
color: #6a6c7c;
font-size: 12px;
height: 0.12rem;
line-height: 0.12rem;
}
/* 24小时进馆总趋势 */
.dinszone{
.dinszone {
margin-top: 0.22rem;
width: 100%;
height: 0.48rem;
float: left;
}
.dinszone .dins_title{
.dinszone .dins_title {
display: block;
height: 0.38rem;
line-height: 0.28rem;
@ -188,10 +516,11 @@ export default {
background-size: 100% 100%;
background-position: 0 0;
background-repeat: no-repeat;
padding-left: 0.56rem;
padding-left: 0.66rem;
}
/* 中间部位 */
.center{
.center {
margin-top: 4vh;
width: 50%;
float: left;
@ -202,36 +531,42 @@ export default {
background-position: 0 0;
background-size: 100% 100%;
}
.center .ctop{
margin-top:1vh ;
.center .ctop {
margin-top: 0.5vh;
height: 4vh;
line-height: 4vh;
color: #fff;
font-size: 24px;
text-align: center;
}
/* 中间中部 */
.center .cmid{
.center .cmid {
padding-top: 32vh;
width: 100%;
height: 12vh;
}
.center .cmid .cmdiv{
.center .cmid .cmdiv {
width: 60%;
float: left;
padding-top: 3vh;
}
.center .cmid .cmdiv span{
.center .cmid .cmdiv span {
display: block;
width: 100%;
float: left;
}
.center .cmid .cmdiv .cmdval{
.center .cmid .cmdiv .cmdval {
color: #fff;
font-size: 18px;
font-size: 36px;
padding-left: 12%;
}
.center .cmid .cmdiv .cmdt{
.center .cmid .cmdiv .cmdt {
color: #00c6ff;
font-size: 14px;
width: 6vw;
@ -240,45 +575,52 @@ export default {
background: url('../../assets/wh/ct_bg.png') no-repeat;
background-size: 100% 100%;
background-position: center center;
margin-left: 10%;
margin-left: 15%;
}
.center .cmid .cmdiv:nth-child(2){
.center .cmid .cmdiv:nth-child(2) {
padding-right: 10%;
text-align: right;
width: 20%;
padding-left: 9.8%;
}
.center .cmid .cmdiv:nth-child(2) .cmdval{
.center .cmid .cmdiv:nth-child(2) .cmdval {
text-align: right;
padding-right: 30% !important;
margin-right: 16%;
}
.center .cmid .cmdiv:nth-child(2) .cmdt{
.center .cmid .cmdiv:nth-child(2) .cmdt {
/* padding-right:30% !important; */
margin-right: 25%;
margin-left: 40%;
}
/* 中间底部 */
.center .cbuttom{
.center .cbuttom {
margin-top: 12vh;
padding-top: 6vh;
height: 6vh;
line-height: 6vh;
text-align: center;
}
.center .cbuttom span{
.center .cbuttom span {
display: block;
float: left;
}
.center .cbuttom .cbval{
.center .cbuttom .cbval {
padding-top: 3vh;
font-size: 22px;
font-size: 36px;
color: #fff;
height: 2vh;
line-height: 2vh;
width: 100%;
}
.center .cbuttom .cbt{
.center .cbuttom .cbt {
color: #00c6ff;
height: 2vh;
line-height: 2vh;
@ -289,42 +631,47 @@ export default {
margin-left: 45%;
margin-top: 1vh;
}
/* 右边 */
.rightbox{
.rightbox {
width: 25%;
float: left;
}
.rightbox .pcgrliu{
.rightbox .pcgrliu {
margin-top: 10vh;
height: 26vh;
}
.rightbox .pcgrliu .pcg_title{
.rightbox .pcgrliu .pcg_title {
display: block;
height: 4vh;
line-height: 3vh;
background:url('../../assets/wh/pcg_t_bg.png') no-repeat;
background: url('../../assets/wh/pcg_t_bg.png') no-repeat;
background-size: 100% 100%;
background-position: 0 center;
padding-left: 0.68rem;
color: #fff;
}
.rightbox .tsgrliu{
.rightbox .tsgrliu {
margin: 4vh 0 0 0;
height: 26vh;
}
.rightbox .tsgrliu .tsg_title{
.rightbox .tsgrliu .tsg_title {
display: block;
height: 4vh;
line-height: 3vh;
background:url('../../assets/wh/tsg_t_bg.png') no-repeat;
background: url('../../assets/wh/tsg_t_bg.png') no-repeat;
background-size: 100% 100%;
background-position: 0 center;
padding-left: 0.68rem;
color: #fff;
}
/* 全局背景 */
.wh_bg {
clear: both;
background-image: url("../../assets/wh/whbg.jpg") !important;
}
</style>
}</style>

848
src/views/index.vue
View File

@ -6,9 +6,9 @@
<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>
<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: 200px; width: 100%">
@ -62,85 +62,85 @@
<!-- 今日各场馆人数趋势 -->
<div class="gcgqs">
<div class="gcg_title">今日各场馆人数趋势</div>
<div id="kl-line" style="width: 100%; height: 180px"></div>
<div class="gcg_title">今日各场馆人数趋势</div>
<div id="kl-line" style="width: 100%; height: 180px"></div>
</div>
</div>
</div>
<!-- 中间 -->
<div class="centerbox">
<!-- 今日进馆人数 -->
<div class="jgrs">
<span class="jgval">345,235</span>
<span class="jgdesc">今日进馆人数</span>
<!-- 今日进馆人数 -->
<div class="jgrs">
<span class="jgval jgval1">345,235</span>
<span class="jgdesc jgdesc1">今日进馆人数</span>
</div>
<!-- 本周进馆人数 -->
<div class="jgrs">
<span class="jgval">345,235</span>
<span class="jgdesc">本周进馆人数</span>
</div>
<!-- 本月进馆人数 -->
<div class="jgrs">
<span 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>
<!-- 本周进馆人数 -->
<div class="jgrs">
<span class="jgval">345,235</span>
<span class="jgdesc">本周进馆人数</span>
<!-- 各场馆实时人数 cg2 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">50%</span>
</div>
<!-- 本月进馆人数 -->
<div class="jgrs">
<span class="jgval">345,235</span>
<span class="jgdesc">本月进馆人数</span>
<!-- 各场馆实时人数 cg3 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">80%</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>
<!-- 各场馆实时人数 cg4 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">25%</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">40%</span>
</div>
<!-- 各场馆实时人数 cg3 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">40%</span>
</div>
<!-- 各场馆实时人数 cg4 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">40%</span>
</div>
<!-- 各场馆实时人数 cg5 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">40%</span>
</div>
<!-- 各场馆实时人数 cg6 -->
<div class="rbitem">
<span class="rbcgname">体育场</span>
<span class="rbtitle">当前人数</span>
<span class="rbval">4,738</span>
<span class="rbrate">40%</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>
@ -184,103 +184,334 @@ export default {
var option;
//
let that = this;
// 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: 20,
right: 20,
bottom: 10,
top: 40,
},
xAxis: {
type: "category",
data: that.bar_tdata,
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: {
type: "value",
//网格线
// show:false,
axisLabel: {
color: '#0095FF',
fontSize: 14,
},
axisTick: {
lineStyle: {
color: '#0095FF',
width: 1,
},
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "soild",
color: "#2F00FF",
color: '#0095FF',
type: 'solid',
},
},
axisLine: {
lineStyle: {
color: '#0095FF',
width: 1,
type: 'solid',
},
show: false,
},
name: '',
},
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
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: {
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
// 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);
},
@ -351,10 +582,11 @@ export default {
};
</script>
<style>
#index{
width: 100%;
float: left;
#index {
width: 100%;
float: left;
}
.leftbox {
width: 30%;
float: left;
@ -366,14 +598,15 @@ export default {
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 0 0;
height: 30vh;
height: 7vh;
color: #b5b7c5;
}
/* 客流趋势 */
.leftbox .keliu .kliu_title {
line-height: 0.88rem;
font-size: 22px;
padding-left: 2.4rem;
font-size: 20px;
padding-left: 2rem;
display: block;
float: left;
}
@ -398,14 +631,17 @@ export default {
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;
@ -414,151 +650,231 @@ export default {
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: 40%;
/* 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 {
width: 100%;
height: 0.46rem;
}
.leftbox .cgflow.cgfitem span{
display: block;
.leftbox .cgflow .cgfitem span {
/* display: block;
margin-left: 12px;
float: left;
display: block;
display: block; */
margin-right: 14px;
/* display: block; */
}
.leftbox .cgflow .cgfitem .cgtitle{
color: #0096ff;
font-size:14px;
.leftbox .cgflow .cgfitem .cgtitle {
color: #0096ff;
font-size: 16px;
}
.leftbox .cgflow.cgfitem .cgval{
font-weight: 600;
font-size: 18px;
.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;
.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%;
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: 22px;
line-height: 0.88rem;
padding-left: 2.2rem;
.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:29%;
float: left;
margin-left: 3%;
padding:1%;
margin-top:4%;
.centerbox {
background-image: url('../assets/index/mid_bg.png');
background-position: 0 0;
background-size: 100% 100%;
width: 29%;
float: left;
margin-left: 3%;
padding: 1%;
margin-top: 4%;
}
.centerbox .jgrs{
width: 33.33%;
float: left;
height: 120px;
.centerbox .jgrs {
width: 33.33%;
float: left;
height: 120px;
position: relative;
}
.centerbox .jgval {
display: block;
color: white;
font-size: 26px;
position: absolute;
bottom: 38px;
left: 44px;
}
.centerbox .jgdesc {
display: block;
color: gray;
font-size: 16px;
position: absolute;
bottom: 10px;
left: 44px;
}
.centerbox .jgval1 {
bottom: 38px;
left: 76px;
}
.centerbox .tygpic{
clear: both;
width: 100%;
.centerbox .jgdesc1 {
bottom: 10px;
left: 76px;
}
.centerbox .jgval3 {
bottom: 38px;
left: 14px;
}
.centerbox .jgdesc3 {
bottom: 10px;
left: 14px;
}
.centerbox .tygpic {
clear: both;
width: 100%;
}
.centerbox .tygpic img{
height: 360px;
margin:12% auto;
.centerbox .tygpic img {
height: 360px;
margin: 12% auto;
}
/* 右边 */
.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: 18px;
text-align: right;
padding-right: 2.6rem;
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.2rem;
width: 46%;
margin-left: 0.28rem;
float: left;
margin-top: 0.46rem;
padding-top: 0.2rem;
.rbox {
width: 30%;
float: left;
margin-left: 3%;
color: #fff;
}
.rbox .rbox_con .rbitem span{
display: block;
.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 .rbitem .rbcgname{
margin-top: 0.28rem;
color: #0096ff;
text-align: right;
padding-right: 0.28rem;
.rbox .rbox_con {
width: 100%;
margin-top: 12px;
}
.rbox .rbox_con .rbitem .rbtitle{
text-align: left;
padding-left: 0.66rem;
padding-top: 0.1rem;
.rbox .rbox_con .rbitem {
background-image: url('../assets/index/rb_data_bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 2.2rem;
width: 46%;
margin-left: 0.28rem;
float: left;
margin-top: 0.46rem;
padding-top: 0.2rem;
position: relative;
}
.rbox .rbox_con .rbitem .rbval{
font-size: 18px;
width: 60%;
height: 118px;
text-align: center;
line-height: 118px;
.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 .rbrate{
width: 30%;
float: left;
height: 118px;
text-align: center;
line-height: 118px;
.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;
}
.rbox .rbox_con .rbitem .rbrate {
width: 30%;
/* float: left; */
height: 118px;
text-align: center;
line-height: 118px;
position: absolute;
bottom: -14px;
right: 16px;
color: #00D8FF;
}
/* 页面背景 */
.page_bg {
clear: both;
background-image: url("../assets/index/bg.jpg") !important;
}
</style>
}</style>
Write Preview
Loading…
Cancel
Save