-
BINsrc/assets/images/line.png
-
BINsrc/assets/images/map-bg.png
-
BINsrc/assets/images/map-bg2.png
-
BINsrc/assets/images/map-hx-big.png
-
BINsrc/assets/images/map-hx-big2.png
-
BINsrc/assets/images/map-hx-dot.png
-
BINsrc/assets/images/map-hx-small.png
-
BINsrc/assets/images/map-hx-small2.png
-
0src/assets/images/map-hx01.png
-
0src/assets/images/map-hx02.png
-
BINsrc/assets/images/map_30.png
-
BINsrc/assets/images/title-middle.png
-
625src/assets/styles/index.scss
-
263src/components/echart/barEcharts.vue
-
65src/components/echart/lineChartService.vue
-
8src/views/index.vue
-
337src/views/map/index.vue
-
68src/views/pageThree/index.vue
|
After Width: 12 | Height: 145 | Size: 2.0 KiB |
|
After Width: 554 | Height: 760 | Size: 443 KiB |
|
After Width: 149 | Height: 291 | Size: 93 KiB |
|
After Width: 905 | Height: 723 | Size: 86 KiB |
|
After Width: 905 | Height: 905 | Size: 56 KiB |
|
After Width: 1306 | Height: 1037 | Size: 38 KiB |
|
After Width: 905 | Height: 723 | Size: 49 KiB |
|
After Width: 905 | Height: 905 | Size: 46 KiB |
|
Before Width: 905 | Height: 723 | Size: 97 KiB After Width: 905 | Height: 723 | Size: 97 KiB |
|
Before Width: 1306 | Height: 1037 | Size: 133 KiB After Width: 1306 | Height: 1037 | Size: 133 KiB |
|
Before Width: 62 | Height: 40 | Size: 3.3 KiB After Width: 62 | Height: 42 | Size: 3.1 KiB |
|
After Width: 475 | Height: 27 | Size: 13 KiB |
@ -0,0 +1,263 @@ |
|||||
|
<template> |
||||
|
<!-- 近七日借阅统计 --> |
||||
|
<div id="main1" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import echarts from 'echarts' |
||||
|
import resize from '@/utils/resizeMixins.js' |
||||
|
|
||||
|
export default { |
||||
|
name: 'BarEcharts', |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
storageData: { |
||||
|
type: Object, |
||||
|
require: true, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
'storageData': { |
||||
|
handler(val) { |
||||
|
setTimeout(() => { |
||||
|
this.drawChart() |
||||
|
}, 100) |
||||
|
}, |
||||
|
immediate: true, |
||||
|
deep: true |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.drawChart() |
||||
|
}, |
||||
|
methods: { |
||||
|
drawChart() { |
||||
|
const app = {} |
||||
|
const chartDom = document.getElementById('main1') |
||||
|
this.chart = echarts.init(chartDom) |
||||
|
|
||||
|
let option = null |
||||
|
const posList = [ |
||||
|
'left', |
||||
|
'right', |
||||
|
'top', |
||||
|
'bottom', |
||||
|
'inside', |
||||
|
'insideTop', |
||||
|
'insideLeft', |
||||
|
'insideRight', |
||||
|
'insideBottom', |
||||
|
'insideTopLeft', |
||||
|
'insideTopRight', |
||||
|
'insideBottomLeft', |
||||
|
'insideBottomRight' |
||||
|
] |
||||
|
app.configParameters = { |
||||
|
rotate: { |
||||
|
min: -90, |
||||
|
max: 90 |
||||
|
}, |
||||
|
align: { |
||||
|
options: { |
||||
|
left: 'left', |
||||
|
center: 'center', |
||||
|
right: 'right' |
||||
|
} |
||||
|
}, |
||||
|
verticalAlign: { |
||||
|
options: { |
||||
|
top: 'top', |
||||
|
middle: 'middle', |
||||
|
bottom: 'bottom' |
||||
|
} |
||||
|
}, |
||||
|
position: { |
||||
|
options: posList.reduce(function(map, pos) { |
||||
|
map[pos] = pos |
||||
|
return map |
||||
|
}, {}) |
||||
|
}, |
||||
|
distance: { |
||||
|
min: 0, |
||||
|
max: 100 |
||||
|
} |
||||
|
} |
||||
|
app.config = { |
||||
|
rotate: 90, |
||||
|
align: 'left', |
||||
|
verticalAlign: 'middle', |
||||
|
position: 'insideBottom', |
||||
|
distance: 15, |
||||
|
onChange: function() { |
||||
|
const labelOption = { |
||||
|
rotate: app.config.rotate, |
||||
|
align: app.config.align, |
||||
|
verticalAlign: app.config.verticalAlign, |
||||
|
position: app.config.position, |
||||
|
distance: app.config.distance |
||||
|
} |
||||
|
this.chart.setOption({ |
||||
|
series: [ |
||||
|
{ |
||||
|
label: labelOption |
||||
|
}, |
||||
|
{ |
||||
|
label: labelOption |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
const labelOption = { |
||||
|
show: false, |
||||
|
position: app.config.position, |
||||
|
distance: app.config.distance, |
||||
|
align: app.config.align, |
||||
|
verticalAlign: app.config.verticalAlign, |
||||
|
rotate: app.config.rotate, |
||||
|
formatter: '{c} {name|{a}}', |
||||
|
fontSize: 16, |
||||
|
rich: { |
||||
|
name: {} |
||||
|
} |
||||
|
} |
||||
|
option = { |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
legend: { // 图例 |
||||
|
right: 20, |
||||
|
top: 10, |
||||
|
icon: 'rect', |
||||
|
itemHeight: 6, |
||||
|
itemWidth: 11, |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
}, |
||||
|
data: [ |
||||
|
{ |
||||
|
name: '借出', |
||||
|
icon: 'rect', |
||||
|
textStyle: { |
||||
|
color: '#41A3FF' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
name: '归还', |
||||
|
icon: 'rect', |
||||
|
textStyle: { |
||||
|
color: '#FFD050' |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '3%', |
||||
|
bottom: '8%', |
||||
|
top: '17%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: [{ |
||||
|
type: 'category', |
||||
|
axisTick: { show: false }, |
||||
|
data: this.storageData.storageMonths, |
||||
|
axisLine: { // 轴线的颜色以及宽度 |
||||
|
lineStyle: { |
||||
|
color: '#113D72' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { // x轴文字的配置 |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
}, |
||||
|
formatter: this.storageData.storageMonths.map(function(item) { |
||||
|
return item |
||||
|
}) |
||||
|
}, |
||||
|
splitLine: { // 分割线配置 |
||||
|
lineStyle: { |
||||
|
color: '#113D72', |
||||
|
type: 'solid' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}], |
||||
|
yAxis: [{ |
||||
|
min: 0, |
||||
|
max: 100, |
||||
|
interval: 25, |
||||
|
type: 'value', |
||||
|
axisLine: { // 轴线的颜色以及宽度 |
||||
|
show: false |
||||
|
}, |
||||
|
axisLabel: { // 轴文字的配置 |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { // 刻度线隐藏 |
||||
|
show: false |
||||
|
}, |
||||
|
splitLine: { // 分割线配置 |
||||
|
lineStyle: { |
||||
|
color: 'rgba(66, 139, 221, 0.2)', |
||||
|
type: 'solid' |
||||
|
} |
||||
|
} |
||||
|
}], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '借出', |
||||
|
type: 'bar', |
||||
|
barWidth: 14, // 柱图宽度 |
||||
|
barGap: '30%', |
||||
|
label: labelOption, |
||||
|
emphasis: { |
||||
|
focus: 'series' |
||||
|
}, |
||||
|
data: this.storageData.outStorageData, |
||||
|
color: '#41A3FF' |
||||
|
}, |
||||
|
{ |
||||
|
name: '归还', |
||||
|
type: 'bar', |
||||
|
barWidth: 14, // 柱图宽度 |
||||
|
label: labelOption, |
||||
|
emphasis: { |
||||
|
focus: 'series' |
||||
|
}, |
||||
|
data: this.storageData.inStorageData, |
||||
|
color: '#F9BE1D' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
option && this.chart.setOption(option) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
</style> |
||||
@ -0,0 +1,68 @@ |
|||||
|
<template> |
||||
|
<div class="page-wrapper "> |
||||
|
<div class="page-three"> |
||||
|
<div class="three-item three01"> |
||||
|
<div class="database-title">本年累计借阅数量</div> |
||||
|
</div> |
||||
|
<div class="three-item three02"> |
||||
|
<div class="database-title">今日借阅数量</div> |
||||
|
</div> |
||||
|
<div class="three-item three03"> |
||||
|
<div class="database-title">今日借阅趋势</div> |
||||
|
<div class="chart-wrapper" style="height: calc(100%);"> |
||||
|
<LineChartService :chart-data="chartData" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="three-item three04"> |
||||
|
<div class="database-title">近7日借阅统计</div> |
||||
|
<div class="chart-wrapper" style="height: calc(100%);"> |
||||
|
<BarEcharts :storage-data="storageData" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import LineChartService from '@/components/echart/lineChartService' |
||||
|
import BarEcharts from '@/components/echart/barEcharts' |
||||
|
export default { |
||||
|
components: { |
||||
|
LineChartService, |
||||
|
BarEcharts |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chartData: { |
||||
|
returnData: [220, 132, 10, 134, 90, 230], |
||||
|
borrowedData: [20, 182, 191, 234, 290, 330] |
||||
|
}, |
||||
|
storageData: { |
||||
|
storageMonths: ['05-13', '05-14', '05-15', '05-16', '05-17', '05-18', '05-19'], |
||||
|
inStorageData: [220, 132, 10, 134, 90, 230, 80], |
||||
|
outStorageData: [20, 182, 191, 234, 290, 330, 30] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
clearTimeout(this.timer2) |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
@import "~@/assets/styles/font-some.css"; |
||||
|
|
||||
|
</style> |
||||