|
|
|
@ -30,12 +30,20 @@ |
|
|
|
</div> |
|
|
|
<!-- 进馆人数统计 --> |
|
|
|
<div class="gcins"> |
|
|
|
<div class="gcins_title">进馆人数统计</div> |
|
|
|
<div class="gcins_title">24小时进馆人数趋势</div> |
|
|
|
<div id="gcins_charts" style="height:16rem"></div> |
|
|
|
</div> |
|
|
|
<!-- 人数状态 --> |
|
|
|
<div class="incbox"></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> |
|
|
|
@ -75,6 +83,7 @@ |
|
|
|
font-size: 2.02rem; |
|
|
|
padding-top: 4.8rem; |
|
|
|
} |
|
|
|
|
|
|
|
.tyclogo .tydesc { |
|
|
|
height: 2rem; |
|
|
|
line-height: 2rem; |
|
|
|
@ -83,12 +92,14 @@ |
|
|
|
padding-right: 1.06rem; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
/* 总计进馆 */ |
|
|
|
.jgbox { |
|
|
|
margin-top: 1.02rem; |
|
|
|
width: 100%; |
|
|
|
height: 12rem; |
|
|
|
} |
|
|
|
|
|
|
|
.jgbox .jg_title { |
|
|
|
background-image: url('../assets/ty_jg_bg.png'); |
|
|
|
background-repeat: no-repeat; |
|
|
|
@ -98,35 +109,42 @@ |
|
|
|
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 { |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.jgbox .jgcon .jgitem span { |
|
|
|
display: block; |
|
|
|
text-align: center; |
|
|
|
height: 1.8rem; |
|
|
|
line-height: 1.8rem; |
|
|
|
} |
|
|
|
|
|
|
|
.jgbox .jgcon .jgitem .jgival { |
|
|
|
font-size: 1.06rem; |
|
|
|
} |
|
|
|
|
|
|
|
.jgbox .jgcon .jgitem .jgdesc { |
|
|
|
color: #666; |
|
|
|
font-size: 0.8rem; |
|
|
|
} |
|
|
|
/* 进馆人数统计 */ |
|
|
|
|
|
|
|
/* 24小时进馆人数趋势 */ |
|
|
|
.gcins { |
|
|
|
margin-top: 1.6rem; |
|
|
|
} |
|
|
|
@ -141,12 +159,46 @@ |
|
|
|
padding-left: 2.02rem; |
|
|
|
} |
|
|
|
|
|
|
|
/* 进馆人数 */ |
|
|
|
.incbox{ |
|
|
|
margin-top: 1.2rem; |
|
|
|
background: url("../assets/tyc_bhd.png") no-repeat 0 center; |
|
|
|
/* 各场馆人数趋势 */ |
|
|
|
.gcgrs { |
|
|
|
margin-top: 1.06rem; |
|
|
|
} |
|
|
|
|
|
|
|
.gcgrs .gcgrs_title { |
|
|
|
background-image: url("../assets/wh_tbg.png"); |
|
|
|
background-position: 0 0; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100%; |
|
|
|
height: 8rem; |
|
|
|
height: 1.8rem; |
|
|
|
line-height: 1.8rem; |
|
|
|
padding-left: 2.02rem; |
|
|
|
} |
|
|
|
|
|
|
|
.gcgrs .gcgrs_charts { |
|
|
|
margin-top: 2rem; |
|
|
|
width: 100%; |
|
|
|
height: 17rem; |
|
|
|
} |
|
|
|
|
|
|
|
/* 图书馆趋势 */ |
|
|
|
.tsgbox { |
|
|
|
margin-top: 3rem; |
|
|
|
} |
|
|
|
|
|
|
|
.tsgbox .tsg_title { |
|
|
|
background-image: url("../assets/wh_tsg_tbg.png"); |
|
|
|
background-position: 0 0; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100%; |
|
|
|
height: 2.2rem; |
|
|
|
line-height: 2.2rem; |
|
|
|
padding-left: 2.02rem; |
|
|
|
} |
|
|
|
|
|
|
|
.tsgbox .tsgc_charts { |
|
|
|
margin-top: 2rem; |
|
|
|
width: 100%; |
|
|
|
height: 16rem; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<script> |
|
|
|
@ -159,7 +211,12 @@ |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
// 24h ins k line |
|
|
|
this.cgsf_line() |
|
|
|
// |
|
|
|
this.gc_line() |
|
|
|
// |
|
|
|
this.tsg_line() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 山峰图 |
|
|
|
@ -292,6 +349,328 @@ |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
}, |
|
|
|
|
|
|
|
// |
|
|
|
gc_line() { |
|
|
|
var chartDom = document.getElementById("gc_charts"); |
|
|
|
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',]; |
|
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] |
|
|
|
var name = ['图书馆', '文化馆', '博物馆'] |
|
|
|
var data = [ |
|
|
|
[137, 34, 135, 161, 74, 152, 110, 100, 150], |
|
|
|
[174, 137, 135, 34, 152, 135, 140, 160, 100], |
|
|
|
[134, 74, 137, 135, 161, 137, 300, 220, 250], |
|
|
|
] |
|
|
|
|
|
|
|
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, |
|
|
|
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', |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
borderWidth: 0, |
|
|
|
top: 240, |
|
|
|
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, |
|
|
|
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); |
|
|
|
}, |
|
|
|
// 图书馆 |
|
|
|
tsg_line() { |
|
|
|
var chartDom = document.getElementById("tsgchart"); |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
var option; |
|
|
|
|
|
|
|
var data = [{ |
|
|
|
name: '今日办证人数', |
|
|
|
value: 323, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '今日还书册数', |
|
|
|
value: 209, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '今日借书册数', |
|
|
|
value: 323, |
|
|
|
}, |
|
|
|
]; |
|
|
|
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; |
|
|
|
} |
|
|
|
|
|
|
|
console.log(getSymbolData(data)); |
|
|
|
option = { |
|
|
|
grid: { |
|
|
|
top: '2%', |
|
|
|
bottom: -15, |
|
|
|
right: 30, |
|
|
|
left: 30, |
|
|
|
containLabel: true |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
yAxis: [{ |
|
|
|
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 + '}' |
|
|
|
}, |
|
|
|
rich: { |
|
|
|
title: { |
|
|
|
width: 165 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, { |
|
|
|
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: 30, |
|
|
|
fontSize: 16, |
|
|
|
formatter: function (value, index) { |
|
|
|
return data[index].value + ' 册 ' |
|
|
|
}, |
|
|
|
} |
|
|
|
}], |
|
|
|
series: [{ |
|
|
|
name: 'XXX', |
|
|
|
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' |
|
|
|
} |
|
|
|
}, |
|
|
|
data: getSymbolData(data) |
|
|
|
}, { |
|
|
|
name: '条', |
|
|
|
type: 'bar', |
|
|
|
showBackground: true, |
|
|
|
barBorderRadius: 30, |
|
|
|
yAxisIndex: 0, |
|
|
|
data: data, |
|
|
|
barWidth: 10, |
|
|
|
// align: left, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: new echarts.graphic.LinearGradient( |
|
|
|
0, |
|
|
|
0, |
|
|
|
1, |
|
|
|
0, |
|
|
|
[{ |
|
|
|
offset: 0, |
|
|
|
color: '#A71A2B' |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 0.7, |
|
|
|
color: '#A71A2B' |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: '#5EDEE5' |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
false |
|
|
|
), |
|
|
|
barBorderRadius: 10 |
|
|
|
}, |
|
|
|
// color: '#A71A2B', |
|
|
|
barBorderRadius: 4, |
|
|
|
}, |
|
|
|
label: { |
|
|
|
normal: { |
|
|
|
color: '#fff', |
|
|
|
show: true, |
|
|
|
position: [0, '-20px'], |
|
|
|
textStyle: { |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
formatter: function (a) { |
|
|
|
return a.name |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}] |
|
|
|
}; |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
453530270@qq.com
3 years ago
