-
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
-
623src/assets/styles/index.scss
-
263src/components/echart/barEcharts.vue
-
65src/components/echart/lineChartService.vue
-
8src/views/index.vue
-
311src/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> |
|||