453530270@qq.com
3 years ago
7 changed files with 1498 additions and 1321 deletions
@ -1,11 +1,8 @@ |
|||||
window.publicConfig = { |
window.publicConfig = { |
||||
// 请求地址
|
// 请求地址
|
||||
// BASE_API:'http://10.97.121.2/api',
|
BASE_API:'http://61.144.224.21:8443/api', |
||||
// BASE_API:'http://192.168.66.16/api',
|
|
||||
BASE_API:'http://61.144.224.21:8442/api', |
|
||||
// socket url
|
// socket url
|
||||
// WS_URL_TY: 'ws://10.97.121.2/ty',
|
WS_URL_TY: 'ws://61.144.224.21:8443/ty', |
||||
WS_URL_TY: 'ws://192.168.66.16/ty', |
WS_URL_WH: 'ws://61.144.224.21:8443/wh', |
||||
WS_URL_WH: 'ws://192.168.66.16/wh', |
WS_URL_ZL: 'ws://61.144.224.21:8443/zl' |
||||
WS_URL_ZL: 'ws://192.168.66.16/zl' |
|
||||
} |
} |
||||
@ -0,0 +1,67 @@ |
|||||
|
// 导入axios实例 |
||||
|
import request from '@/utils/request' |
||||
|
|
||||
|
// 定义接口的传参 |
||||
|
const api={ |
||||
|
// 日客流趋势 |
||||
|
daily_klqs:'/pass.passcc/allGroupTimeNum', |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// 获取群组 |
||||
|
export function allGroupTimeNum(param) { |
||||
|
return request({ |
||||
|
url: api.daily_klqs, |
||||
|
method: 'get', |
||||
|
params:param, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export function homeBarData(param) { |
||||
|
return request({ |
||||
|
url: '/pass.passcc/allGroupTimeNum&granularity=daily', |
||||
|
method: 'post', |
||||
|
param, |
||||
|
}) |
||||
|
} |
||||
|
// ge |
||||
|
export function allGroupNum(param) { |
||||
|
return request({ |
||||
|
url: '/pass.passcc/allGroupNum', |
||||
|
method: 'post', |
||||
|
param, |
||||
|
}) |
||||
|
} |
||||
|
// 实时进馆人数 |
||||
|
export function allInfoDatas(param) { |
||||
|
return request({ |
||||
|
url: '/pass.passcc/realTimeData', |
||||
|
method: 'post', |
||||
|
param, |
||||
|
}) |
||||
|
} |
||||
|
// 今日各场馆的趋势 |
||||
|
export function tdGroupRealTimeEnter(param) { |
||||
|
return request({ |
||||
|
url: '/pass.passcc/toDayGroupsEnterNum', |
||||
|
method: 'get', |
||||
|
param, |
||||
|
}) |
||||
|
} |
||||
|
// 图书馆人流趋势 |
||||
|
export function tsgTrends(param) { |
||||
|
return request({ |
||||
|
url: '/library.pass/allFlowTrends', |
||||
|
method: 'get', |
||||
|
param, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 借书信息 |
||||
|
export function tsgbr(param){ |
||||
|
return request({ |
||||
|
url: '/library.pass/allFlowTrends', |
||||
|
method: 'post', |
||||
|
param, |
||||
|
}) |
||||
|
} |
||||
|
After Width: | Height: | Size: 32 KiB |
File diff suppressed because it is too large
@ -0,0 +1,984 @@ |
|||||
|
<template> |
||||
|
<div class="tyc"> |
||||
|
<div class="topnav">文化</div> |
||||
|
<!-- 图形 --> |
||||
|
<div class="tyclogo"> |
||||
|
<div class="tyname">文化</div> |
||||
|
<div class="tydesc">图书馆|文化馆|博物馆</div> |
||||
|
</div> |
||||
|
<!-- 总计进馆人数 --> |
||||
|
<div class="jgbox"> |
||||
|
<div class="jg_title">总计进馆人数</div> |
||||
|
<div class="jgcon"> |
||||
|
|
||||
|
<div class="jgitem"> |
||||
|
<div class="jgimg"><img src="../assets/img/icon01.png" /></div> |
||||
|
<span class="jgival" id="wtdjg">{{ tdjg }}</span> |
||||
|
<span class="jgdesc">今日进馆人数</span> |
||||
|
</div> |
||||
|
<div class="jgitem"> |
||||
|
<div class="jgimg"><img src="../assets/img/icon02.png" /></div> |
||||
|
<span class="jgival" id="wtmjg"> {{ tmjg }} </span> |
||||
|
<span class="jgdesc">本月进馆人数</span> |
||||
|
</div> |
||||
|
<div class="jgitem"> |
||||
|
<div class="jgimg"><img src="../assets/img/icon03.png" /></div> |
||||
|
<span class="jgival" id="wtyjg"> {{ tyjg }} </span> |
||||
|
<span class="jgdesc">本年进馆人数</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 24小时进馆人数 --> |
||||
|
<div class="dgins"> |
||||
|
<div class="dgins_title"><span>24小时进馆人数</span></div> |
||||
|
<div class="dgins_con"> |
||||
|
<div class="dgitem"> |
||||
|
<div class="dgimg"><img src="../assets/img/wh_icon_bwg.png" /></div> |
||||
|
<span class="dgival">{{ gkbwg }}</span> |
||||
|
<span class="dgdesc">博物馆</span> |
||||
|
</div> |
||||
|
<div class="dgitem"> |
||||
|
<div class="dgimg"><img src="../assets/img/wh_icon_tsg.png" /></div> |
||||
|
<span class="dgival">{{ gktsg }}</span> |
||||
|
<span class="dgdesc">图书馆</span> |
||||
|
</div> |
||||
|
<div class="dgitem"> |
||||
|
<div class="dgimg"><img src="../assets/img/wh_icon_whg.png" /></div> |
||||
|
<span class="dgival">{{ gkwhg }} </span> |
||||
|
<span class="dgdesc">文化馆</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<!-- 24小时总服务人次趋势 --> |
||||
|
<div class="gcins"> |
||||
|
<div class="gcins_title">24小时总服务人次趋势</div> |
||||
|
<div id="gcins_charts" style="height:16rem"></div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 各场馆服务人次趋势 --> |
||||
|
<div class="gcgrs"> |
||||
|
<div class="gcgrs_title">各场馆服务人次趋势</div> |
||||
|
<div id="gc_charts" class="gcgrs_charts"></div> |
||||
|
</div> |
||||
|
<!-- 各场馆人数趋势 --> |
||||
|
<div class="tsgbox"> |
||||
|
<div class="tsg_title">图书馆数据统计</div> |
||||
|
<div id="tsgchart" class="tsgc_charts"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style scoped> |
||||
|
.tyc { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.topnav { |
||||
|
height: 46px; |
||||
|
line-height: 46px; |
||||
|
text-align: center; |
||||
|
padding: 12rpx; |
||||
|
width: 100%; |
||||
|
position: fixed; |
||||
|
z-index: 90; |
||||
|
color: #fff; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
background-color: #080A25; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.tyclogo { |
||||
|
margin-top: 1.6rem; |
||||
|
background-image: url("../assets/img/wh_00.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
background-position: -1.8rem 0; |
||||
|
height: 14rem; |
||||
|
} |
||||
|
|
||||
|
.tyclogo .tyname { |
||||
|
height: 2.5rem; |
||||
|
line-height: 2.5rem; |
||||
|
text-align: right; |
||||
|
padding-right: 6.8rem; |
||||
|
font-size: 1.7rem; |
||||
|
padding-top: 7.8rem; |
||||
|
} |
||||
|
|
||||
|
.tyclogo .tydesc { |
||||
|
height: 2rem; |
||||
|
line-height: 2rem; |
||||
|
font-size: 1.03rem; |
||||
|
text-align: right; |
||||
|
padding-right: 0.3rem; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
/* 总计进馆 */ |
||||
|
.jgbox { |
||||
|
margin-top: 1.02rem; |
||||
|
width: 100%; |
||||
|
height: 12rem; |
||||
|
} |
||||
|
|
||||
|
.jgbox .jg_title { |
||||
|
background-image: url('../assets/img/ty_jg_bg.png'); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
background-position: 0 0; |
||||
|
padding-left: 4.6rem; |
||||
|
height: 2.06rem; |
||||
|
line-height: 2.06rem; |
||||
|
} |
||||
|
|
||||
|
.jgbox .jgcon { |
||||
|
width: 100%; |
||||
|
height: 7rem; |
||||
|
padding-top: 2rem; |
||||
|
} |
||||
|
|
||||
|
.jgbox .jgcon .jgitem { |
||||
|
width: 30%; |
||||
|
margin-left: 3%; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.jgbox .jgcon .jgitem .jgimg { |
||||
|
height: 5rem; |
||||
|
text-align: center; |
||||
|
float: left; |
||||
|
overflow: hidden; |
||||
|
/* 动画效果 */ |
||||
|
-webkit-animation: ani_sc 8s infinite forwards; |
||||
|
animation: ani_sc 8s infinite forwards; |
||||
|
} |
||||
|
|
||||
|
.jgbox .jgcon .jgitem .jgimg img{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
/** 呼吸效果 */ |
||||
|
@keyframes ani_sc { |
||||
|
0%{ |
||||
|
transform: scale(0.8); |
||||
|
transition: all; |
||||
|
} |
||||
|
50%{ |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
100%{ |
||||
|
transform: scale(0.8); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.jgbox .jgcon .jgitem span { |
||||
|
display: block; |
||||
|
text-align: center; |
||||
|
height: 1.6rem; |
||||
|
line-height: 1.6rem; |
||||
|
} |
||||
|
|
||||
|
.jgbox .jgcon .jgitem .jgival { |
||||
|
font-size: 1.06rem; |
||||
|
font-weight: bold; |
||||
|
/* 动画效果 */ |
||||
|
-webkit-animation: ani_sc 6s infinite; |
||||
|
animation: ani_sc 6s infinite; |
||||
|
} |
||||
|
.jgbox .jgcon .jgitem .jgival::after{ |
||||
|
content: ""; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.jgbox .jgcon .jgitem .jgdesc { |
||||
|
margin-top: 75%; |
||||
|
color: #666; |
||||
|
font-size: 0.8rem; |
||||
|
} |
||||
|
|
||||
|
/* 24小时进馆人数 */ |
||||
|
.dgins { |
||||
|
margin-top: 1.2rem; |
||||
|
} |
||||
|
|
||||
|
.dgins .dgins_title { |
||||
|
background-image: url("../assets/img/wh_24ins_bg.png"); |
||||
|
background-position: 0 0; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
height: 3rem; |
||||
|
} |
||||
|
|
||||
|
.dgins .dgins_title span { |
||||
|
display: block; |
||||
|
line-height: 2rem; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
font-size: 0.9rem; |
||||
|
} |
||||
|
|
||||
|
.dgins .dgins_con { |
||||
|
height: 6rem; |
||||
|
padding-top: 1rem; |
||||
|
} |
||||
|
|
||||
|
.dgins .dgins_con .dgitem { |
||||
|
width: 30%; |
||||
|
margin-left: 3%; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.dgins .dgins_con .dgitem .dgimg { |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
text-align: center; |
||||
|
/* 动画效果 */ |
||||
|
-webkit-animation: ani_sc 5s infinite forwards; |
||||
|
animation: ani_sc 5s infinite forwards; |
||||
|
} |
||||
|
|
||||
|
.dgins .dgins_con .dgitem span { |
||||
|
display: block; |
||||
|
text-align: center; |
||||
|
height: 1.8rem; |
||||
|
line-height: 1.8rem; |
||||
|
} |
||||
|
|
||||
|
.dgins .dgins_con .dgitem .dgival { |
||||
|
font-size: 1.06rem; |
||||
|
/* 动画效果 */ |
||||
|
-webkit-animation: ani_sc 5s infinite forwards; |
||||
|
animation: ani_sc 5s infinite forwards; |
||||
|
} |
||||
|
|
||||
|
.dgins .dgins_con .dgitem .dgdesc { |
||||
|
font-size: 0.6rem; |
||||
|
background-image: url('../assets/img/wh_icon_bg.png'); |
||||
|
background-position: center center; |
||||
|
background-repeat: no-repeat; |
||||
|
} |
||||
|
|
||||
|
/* 24小时总进馆人数趋势 */ |
||||
|
.gcins { |
||||
|
margin-top: 2.6rem; |
||||
|
} |
||||
|
|
||||
|
.gcins .gcins_title { |
||||
|
background-image: url("../assets/img/tyc_tbg.png"); |
||||
|
background-position: 0 0; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
height: 2.2rem; |
||||
|
line-height: 2.2rem; |
||||
|
padding-left: 2.02rem; |
||||
|
} |
||||
|
|
||||
|
/* 各场馆人数趋势 */ |
||||
|
.gcgrs { |
||||
|
margin-top: 2.6rem; |
||||
|
} |
||||
|
|
||||
|
.gcgrs .gcgrs_title { |
||||
|
background-image: url("../assets/img/wh_tbg.png"); |
||||
|
background-position: 0 0; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100%; |
||||
|
height: 2.4rem; |
||||
|
line-height: 2.4rem; |
||||
|
padding-left: 2.42rem; |
||||
|
} |
||||
|
|
||||
|
.gcgrs .gcgrs_charts { |
||||
|
margin-top: 1rem; |
||||
|
width: 100%; |
||||
|
height: 18rem; |
||||
|
} |
||||
|
|
||||
|
/* 图书馆趋势 */ |
||||
|
.tsgbox { |
||||
|
margin-top: 1.2rem; |
||||
|
} |
||||
|
|
||||
|
.tsgbox .tsg_title { |
||||
|
background-image: url("../assets/img/wh_tsg_tbg.png"); |
||||
|
background-position: 0 0; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100%; |
||||
|
height: 2.4rem; |
||||
|
line-height: 2.4rem; |
||||
|
padding-left: 2.42rem; |
||||
|
} |
||||
|
|
||||
|
.tsgbox .tsgc_charts { |
||||
|
/* margin-top: 2rem; */ |
||||
|
width: 100%; |
||||
|
height: 10rem; |
||||
|
} |
||||
|
</style> |
||||
|
<script> |
||||
|
import * as echarts from 'echarts'; |
||||
|
|
||||
|
// 引入api |
||||
|
import * as homeApi from '@/api/home' |
||||
|
import { ecMaxVal,numGrow } from '@/utils/comm'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'TycView', |
||||
|
data() { |
||||
|
return { |
||||
|
//三馆人数概况 |
||||
|
tdjg:0, |
||||
|
tmjg:0, |
||||
|
tyjg:0, |
||||
|
// |
||||
|
gkbwg:0, |
||||
|
gktsg:0, |
||||
|
gkwhg:0, |
||||
|
// 24小时总服务人次趋势 |
||||
|
wh24xdata:[], |
||||
|
wh24ydata:[], |
||||
|
//折线区域的数据 |
||||
|
zxliddata:[], |
||||
|
// 折线名称 |
||||
|
zxlindata:[], |
||||
|
// 图书馆借阅 |
||||
|
libleaData:[], |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 三馆人数 |
||||
|
this.sgrsStat() |
||||
|
|
||||
|
// 24小时总服务人次趋势 |
||||
|
this.getWh24hdata() |
||||
|
// |
||||
|
this.whtdrs() |
||||
|
// this.gc_line() |
||||
|
// |
||||
|
this.libinfoData() |
||||
|
//this.tsg_line() |
||||
|
|
||||
|
this.getTsgInfoDatas() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 三馆人数概况 |
||||
|
sgrsStat(){ |
||||
|
homeApi.allGroupNum({type:2}).then(res=>{ |
||||
|
const tdata = res.data.returnData; |
||||
|
this.tdjg = tdata.day.noRepeatInNum |
||||
|
this.tmjg = tdata.month.noRepeatInNum |
||||
|
this.tyjg = tdata.year.noRepeatInNum |
||||
|
}); |
||||
|
homeApi.tsgTrends().then(res=>{ |
||||
|
const tdata = res.data.data; |
||||
|
|
||||
|
// //24小时的情况 |
||||
|
const sgdata = tdata.hour24 |
||||
|
this.gktsg = sgdata[0].incount |
||||
|
this.gkbwg = sgdata[1].incount |
||||
|
this.gkwhg = sgdata[2].incount |
||||
|
}); |
||||
|
}, |
||||
|
// 24 小时总服务人次趋势 |
||||
|
getWh24hdata(){ |
||||
|
homeApi.wh24ServiceTrends().then(res=>{ |
||||
|
const whtdata = res.data.data |
||||
|
this.wh24xdata=whtdata.dkeys |
||||
|
this.wh24ydata=whtdata.dvalue |
||||
|
// do line |
||||
|
this.cgsf_line() |
||||
|
}) |
||||
|
}, |
||||
|
// 山峰图---24小时总服务人次趋势 |
||||
|
cgsf_line() { |
||||
|
var chartDom = document.getElementById('gcins_charts'); |
||||
|
var myChart = echarts.init(chartDom); |
||||
|
var option; |
||||
|
|
||||
|
option = { |
||||
|
grid: { |
||||
|
left: '-8%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
top: '10%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: [{ |
||||
|
data:this.wh24xdata, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: '#0095FF', |
||||
|
width: 1, |
||||
|
type: 'solid', |
||||
|
}, |
||||
|
show: true |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
} |
||||
|
}], |
||||
|
yAxis: [{ |
||||
|
type: 'value', |
||||
|
axisLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
// 使用深浅的间隔色 |
||||
|
color: '#027eff' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#0095FF', |
||||
|
align: 'left', |
||||
|
margin: 40 |
||||
|
}, |
||||
|
}], |
||||
|
series: [{ |
||||
|
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: 1, |
||||
|
color: '#0286ff' |
||||
|
} |
||||
|
] |
||||
|
) |
||||
|
} |
||||
|
}, |
||||
|
data: this.wh24ydata, |
||||
|
zlevel: 11 |
||||
|
}, |
||||
|
// { |
||||
|
// type: 'scatter', |
||||
|
// stack: 1, |
||||
|
// xAxisIndex: 0, |
||||
|
// symbolOffset: [1, 1], //相对于原本位置的偏移量 |
||||
|
// // data: this.wh24ydata, |
||||
|
// data: [1, 1, 1, 1, 1, 1, 1, 1, 1,1,1,1], |
||||
|
// itemStyle: { |
||||
|
// normal: { |
||||
|
// color: '#f0f0f0' |
||||
|
// } |
||||
|
// }, |
||||
|
// symbolSize: 13, |
||||
|
// zlevel: 10, |
||||
|
// z: 2, |
||||
|
// }, |
||||
|
// 背景柱 |
||||
|
{ |
||||
|
type: 'bar', |
||||
|
barWidth: '10%', |
||||
|
barGap: '-100%', |
||||
|
data: ecMaxVal(this.wh24ydata), |
||||
|
// data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000], |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#004298', |
||||
|
barBorderRadius: 30, |
||||
|
} |
||||
|
}, |
||||
|
z: 1, |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
option && myChart.setOption(option); |
||||
|
}, |
||||
|
|
||||
|
// 今日人流 |
||||
|
whtdrs(){ |
||||
|
homeApi.whtdrs().then(res=>{ |
||||
|
console.log("whtd",res) |
||||
|
// const tmpdata = res.data.data |
||||
|
// this.xData.push(res.data.data[0].list.dkeys) |
||||
|
|
||||
|
// // X 轴的名称字段 |
||||
|
// const darr =new Array; |
||||
|
// tmpdata.forEach(function(item,idx){ |
||||
|
// // 读取list |
||||
|
// const list = item.list |
||||
|
// darr.push(list.dvalue) |
||||
|
// }) |
||||
|
// this.whfwdata = darr |
||||
|
|
||||
|
// get allTimeData |
||||
|
const tmpdata = res.data.data |
||||
|
// X 轴的名称字段 |
||||
|
const xarr =new Array |
||||
|
const darr =new Array; |
||||
|
tmpdata.forEach(function(item,idx){ |
||||
|
// 读取list |
||||
|
const list = item.list |
||||
|
xarr.push(list.dkeys) |
||||
|
darr.push(list.dvalue) |
||||
|
}) |
||||
|
|
||||
|
// console.log(darr) |
||||
|
|
||||
|
this.zxlindata = xarr |
||||
|
this.zxliddata = darr |
||||
|
|
||||
|
// |
||||
|
this.gc_line() |
||||
|
}); |
||||
|
}, |
||||
|
// 各场馆人数趋势 |
||||
|
gc_line() { |
||||
|
var chartDom = document.getElementById("gc_charts"); |
||||
|
var myChart = echarts.init(chartDom); |
||||
|
|
||||
|
var option |
||||
|
var xData = this.xData |
||||
|
//var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',]; |
||||
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] |
||||
|
var name = ['图书馆', '文化馆', '博物馆'] |
||||
|
var xData = this.zxlindata |
||||
|
var data = this.zxliddata |
||||
|
|
||||
|
|
||||
|
var series = []; |
||||
|
for (var i = 0; i < 3; 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: 10, |
||||
|
itemGap: 15, |
||||
|
itemWidth: 20, |
||||
|
itemHeight: 20, |
||||
|
// icon: ['image://img/tyc_icon.png', 'image://img/tyg_icon.png', 'image://img/tyc_icon.png'], |
||||
|
textStyle: { |
||||
|
color: '#fff', |
||||
|
fontSize: '14' |
||||
|
}, |
||||
|
data: [ |
||||
|
{ icon: 'image://img/tyc_icon.png', name: '图书馆' }, |
||||
|
{ icon: 'image://img/tyg_icon.png', name: '文化馆' }, |
||||
|
{ icon: 'image://img/yyg_icon.png', 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: 240, |
||||
|
left: 30, |
||||
|
right: 10, |
||||
|
bottom: 240, |
||||
|
textStyle: { |
||||
|
color: "#fff" |
||||
|
} |
||||
|
}, |
||||
|
xAxis: [{ |
||||
|
type: "category", |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样 |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
splitArea: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
inside: false, |
||||
|
interval: 0, |
||||
|
textStyle: { |
||||
|
color: '#FFFFFF', |
||||
|
fontWeight: 'normal', |
||||
|
fontSize: '12', |
||||
|
}, |
||||
|
}, |
||||
|
data: xData, |
||||
|
}], |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: '#32346c ', |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
textStyle: { |
||||
|
color: '#0095FF', |
||||
|
fontWeight: 'normal', |
||||
|
fontSize: '12', |
||||
|
}, |
||||
|
formatter: '{value}', |
||||
|
}, |
||||
|
}, |
||||
|
series: series, |
||||
|
} |
||||
|
|
||||
|
option && myChart.setOption(option); |
||||
|
}, |
||||
|
// 图书馆借阅查询 |
||||
|
libinfoData(){ |
||||
|
homeApi.libLeaseData().then(res=>{ |
||||
|
this.libleaData = res.data.data |
||||
|
// |
||||
|
this.tsg_line() |
||||
|
}); |
||||
|
}, |
||||
|
// 图书馆 |
||||
|
tsg_line() { |
||||
|
var chartDom = document.getElementById("tsgchart"); |
||||
|
var myChart = echarts.init(chartDom); |
||||
|
var option; |
||||
|
|
||||
|
var data = [{ |
||||
|
name: '今日办证人数', |
||||
|
value: this.libleaData.newreader, |
||||
|
}, |
||||
|
{ |
||||
|
name: '今日还书册数', |
||||
|
value: this.libleaData.returncount, |
||||
|
}, |
||||
|
{ |
||||
|
name: '今日借书册数', |
||||
|
value: this.libleaData.servcount, |
||||
|
}, |
||||
|
]; |
||||
|
// 值颜色 |
||||
|
let valueColor = [ |
||||
|
{ color1: '#15224C', color2: '#FF0042', unit: ' 人 '}, |
||||
|
{ color1: '#15224C', color2: '#FED700', unit: ' 册 '}, |
||||
|
{ color1: '#15224C', color2: '#00FEC5', unit: ' 册 '} |
||||
|
] |
||||
|
// 前缀图标 |
||||
|
var libraryIcons = { |
||||
|
'Lend': '/img/wh_right1.png', |
||||
|
'Still': '/img/wh_right2.png', |
||||
|
'Accreditation': '/img/wh_right3.png' |
||||
|
}; |
||||
|
var getArrByKey = (data, k) => { |
||||
|
let key = k || "value"; |
||||
|
let res = []; |
||||
|
if (data) { |
||||
|
data.forEach(function (t) { |
||||
|
res.push(t[key]); |
||||
|
}); |
||||
|
} |
||||
|
return res; |
||||
|
}; |
||||
|
var getSymbolData = (data) => { |
||||
|
let arr = []; |
||||
|
for (var i = 0; i < data.length; i++) { |
||||
|
arr.push({ |
||||
|
value: data[i].value, |
||||
|
symbolPosition: 'end' |
||||
|
}) |
||||
|
} |
||||
|
return arr; |
||||
|
} |
||||
|
|
||||
|
option = { |
||||
|
grid: { |
||||
|
show: false, |
||||
|
left: 35, |
||||
|
right: -45, |
||||
|
top: 25,//拉伸距离顶部高度 |
||||
|
bottom: -30,//拉伸距离底部高度 |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
show: false |
||||
|
}, |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
triggerEvent: true, |
||||
|
show: true, |
||||
|
data: [ |
||||
|
'Lend', 'Still', 'Accreditation' |
||||
|
], |
||||
|
// max:80, |
||||
|
axisLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
type: 'category', |
||||
|
inverse: true, //true正序false倒序 |
||||
|
|
||||
|
fontSize: 12, |
||||
|
verticalAlign: 'bottom', |
||||
|
formatter: function (value) { |
||||
|
return '{' + value + '|}'; //只显示图片icon |
||||
|
}, |
||||
|
|
||||
|
rich: { |
||||
|
value: { |
||||
|
lineHeight: 30, |
||||
|
align: 'center' |
||||
|
}, |
||||
|
Lend: { |
||||
|
height: 35, |
||||
|
align: 'center', |
||||
|
backgroundColor: { |
||||
|
image: libraryIcons.Accreditation |
||||
|
} |
||||
|
}, |
||||
|
Still: { |
||||
|
height: 35, |
||||
|
align: 'center', |
||||
|
backgroundColor: { |
||||
|
image: libraryIcons.Still |
||||
|
} |
||||
|
}, |
||||
|
Accreditation: { |
||||
|
height: 35, |
||||
|
align: 'center', |
||||
|
backgroundColor: { |
||||
|
image: libraryIcons.Lend |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
triggerEvent: true, |
||||
|
show: true, |
||||
|
// inverse: true, |
||||
|
data: getArrByKey(data, 'name'), |
||||
|
axisLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: false, |
||||
|
interval: 0, |
||||
|
color: '#fff', |
||||
|
align: 'left', |
||||
|
// margin: 80, |
||||
|
fontSize: 12, |
||||
|
formatter: function (value) { |
||||
|
return '{title|' + value + '}' |
||||
|
}, |
||||
|
}, |
||||
|
}, { |
||||
|
triggerEvent: true, |
||||
|
show: true, |
||||
|
// inverse: true, |
||||
|
data: getArrByKey(data, 'name'), |
||||
|
axisLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
interval: 0, |
||||
|
shadowOffsetX: '-20px', |
||||
|
color: '#fff', |
||||
|
align: 'right', |
||||
|
verticalAlign: 'bottom', |
||||
|
lineHeight: 42, |
||||
|
fontSize: 14, |
||||
|
formatter: function (value, index) { |
||||
|
return data[index].value + valueColor[index].unit |
||||
|
}, |
||||
|
} |
||||
|
}], |
||||
|
series: [ |
||||
|
// 光圈 |
||||
|
{ |
||||
|
type: 'pictorialBar', |
||||
|
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==', |
||||
|
symbolSize: [50, 50], |
||||
|
symbolOffset: [20, 0], |
||||
|
z: 12, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#14b1eb' |
||||
|
} |
||||
|
}, |
||||
|
animationDelay:function(idx){ |
||||
|
return idx*10 |
||||
|
}, |
||||
|
data: getSymbolData(data) |
||||
|
}, |
||||
|
{ |
||||
|
type: 'bar', |
||||
|
showBackground: true, |
||||
|
barBorderRadius: 30, |
||||
|
yAxisIndex: 0, |
||||
|
data: data, |
||||
|
barWidth: 10, |
||||
|
barGap:20, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: (params) => { |
||||
|
var index = params.dataIndex; |
||||
|
if (params.dataIndex >= valueColor.length) { |
||||
|
index = params.dataIndex - valueColor.length; |
||||
|
} |
||||
|
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ |
||||
|
offset: 0, |
||||
|
color: valueColor[index].color1 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.8, |
||||
|
color: valueColor[index].color2 |
||||
|
},{ |
||||
|
offset: 1, |
||||
|
color: valueColor[index].color2 |
||||
|
}]); |
||||
|
}, |
||||
|
barBorderRadius: 0 |
||||
|
}, |
||||
|
// color: '#A71A2B', |
||||
|
barBorderRadius: 4, |
||||
|
}, |
||||
|
// 标签 |
||||
|
label: { |
||||
|
normal: { |
||||
|
color: '#fff', |
||||
|
show: true, |
||||
|
position: [0, '-20px'], |
||||
|
textStyle: { |
||||
|
fontSize: 16 |
||||
|
}, |
||||
|
formatter: function (a) { |
||||
|
return a.name |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}], |
||||
|
animationEasing:'elasticOut', |
||||
|
animationDelayUpdate:function(idx){ |
||||
|
return idx*5 |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
option && myChart.setOption(option); |
||||
|
}, |
||||
|
|
||||
|
getTsgInfoDatas() { |
||||
|
let that = this |
||||
|
console.log(that); |
||||
|
homeApi.tsgTrends().then(res => { |
||||
|
// get allTimeData |
||||
|
const tmpdata = res.data |
||||
|
console.log(tmpdata) |
||||
|
|
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue