453530270@qq.com
3 years ago
7 changed files with 1498 additions and 1321 deletions
@ -1,11 +1,8 @@ |
|||
window.publicConfig = { |
|||
// 请求地址
|
|||
// BASE_API:'http://10.97.121.2/api',
|
|||
// BASE_API:'http://192.168.66.16/api',
|
|||
BASE_API:'http://61.144.224.21:8442/api', |
|||
BASE_API:'http://61.144.224.21:8443/api', |
|||
// socket url
|
|||
// WS_URL_TY: 'ws://10.97.121.2/ty',
|
|||
WS_URL_TY: 'ws://192.168.66.16/ty', |
|||
WS_URL_WH: 'ws://192.168.66.16/wh', |
|||
WS_URL_ZL: 'ws://192.168.66.16/zl' |
|||
WS_URL_TY: 'ws://61.144.224.21:8443/ty', |
|||
WS_URL_WH: 'ws://61.144.224.21:8443/wh', |
|||
WS_URL_ZL: 'ws://61.144.224.21:8443/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