7 changed files with 631 additions and 42 deletions
-
92src/views/components/echarts/catePie.vue
-
133src/views/components/echarts/lendAcross.vue
-
98src/views/components/echarts/typePie.vue
-
79src/views/system/archiveStatistics/index.vue
-
104src/views/system/archiveStatistics/module/acrossBar.vue
-
43src/views/system/archiveStatistics/module/barEcharts.vue
-
124src/views/system/archiveStatistics/module/lineEchart.vue
@ -0,0 +1,92 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!-- 档案类别 --> |
||||
|
<div id="maincate" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import echarts from 'echarts' |
||||
|
|
||||
|
export default { |
||||
|
name: 'CatePie', |
||||
|
props: { |
||||
|
cateData: { |
||||
|
type: Array, |
||||
|
require: true, |
||||
|
default: function() { |
||||
|
return [] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.drawChart() |
||||
|
}, |
||||
|
methods: { |
||||
|
drawChart() { |
||||
|
const chartDom = document.getElementById('maincate') |
||||
|
const myChart = echarts.init(chartDom) |
||||
|
let option = null |
||||
|
option = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
|
||||
|
legend: { |
||||
|
bottom: 20, |
||||
|
left: 'center', |
||||
|
icon: 'rect', |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '档案类别', |
||||
|
type: 'pie', |
||||
|
radius: ['30%', '60%'], |
||||
|
center: ['50%', '40%'], // 饼图位置 |
||||
|
avoidLabelOverlap: false, // 不重叠 |
||||
|
labelLine: { |
||||
|
normal: { |
||||
|
length: 15, // 第一段表示线 |
||||
|
length2: 60 // 第二段标示线 |
||||
|
} |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
formatter: '{c}' // 指示线显示百分比 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// label: { |
||||
|
// show: false, |
||||
|
// position: 'center' |
||||
|
// }, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
data: [ |
||||
|
{ value: this.cateData[0], name: '案卷', itemStyle: { color: '#1CADAB' }}, |
||||
|
{ value: this.cateData[1], name: '文件', itemStyle: { color: '#339CFF' }} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
option && myChart.setOption(option) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
#maincate { |
||||
|
width: 520px; |
||||
|
height:257px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,133 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!-- 档案借阅 --> |
||||
|
<div id="mainlend" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import echarts from 'echarts' |
||||
|
|
||||
|
export default { |
||||
|
name: 'AcrossEcharts', |
||||
|
props: { |
||||
|
lendData: { |
||||
|
type: Array, |
||||
|
require: true, |
||||
|
default: function() { |
||||
|
return [] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.drawChart() |
||||
|
}, |
||||
|
methods: { |
||||
|
drawChart() { |
||||
|
const chartDom = document.getElementById('mainlend') |
||||
|
const myChart = echarts.init(chartDom) |
||||
|
let option = null |
||||
|
option = { |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
// legend: {}, //图例 |
||||
|
grid: { // 边距 |
||||
|
left: '10%', |
||||
|
right: '16%', |
||||
|
bottom: '15%', |
||||
|
top: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'value', |
||||
|
boundaryGap: [0, 0.01], |
||||
|
show: false |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'category', |
||||
|
offset: 20, |
||||
|
axisLabel: {// 轴文字的配置 |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#fff', |
||||
|
fontSize: '14' |
||||
|
} |
||||
|
}, |
||||
|
axisLine: {// 轴线的颜色以及宽度 |
||||
|
show: false |
||||
|
}, |
||||
|
data: ['在库档案', '已借档案', '待借档案', '逾期档案'] |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '数量', |
||||
|
type: 'bar', |
||||
|
barWidth: 15, // 柱图宽度 |
||||
|
barGap: 25, |
||||
|
showBackground: true, |
||||
|
backgroundStyle: { |
||||
|
color: '#02255F' |
||||
|
// borderRadius: [0, 10, 10, 0] // 背景圆角 |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
label: { |
||||
|
show: true, // 开启显示 |
||||
|
distance: 20, // 条柱之间的距离 |
||||
|
position: 'right', // 在上方top在右侧right显示 |
||||
|
textStyle: { // 数值样式 |
||||
|
color: '#fff', |
||||
|
fontSize: 14 |
||||
|
} |
||||
|
}, |
||||
|
// 设置柱子圆角 |
||||
|
barBorderRadius: [0, 10, 10, 0], |
||||
|
// 这里设置每个柱子颜色不一样 |
||||
|
// color: function(params) { |
||||
|
// const colorList = ['#0FBED9', '#F65163', '#FF8447', '#76AF50', '#8378E8'] |
||||
|
// return colorList[params.dataIndex] |
||||
|
// } |
||||
|
color: function(params) { |
||||
|
console.log(params) |
||||
|
var colorList = [ |
||||
|
['#5FA2E2', '#1C54EE'], |
||||
|
['#84DFC0', '#0D9D81'], |
||||
|
['#FBCE9B', '#FF801E'], |
||||
|
['#FF7A7D', '#FF3438'] |
||||
|
] |
||||
|
|
||||
|
var colorItem = colorList[params.dataIndex] |
||||
|
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ |
||||
|
offset: 0, |
||||
|
color: colorItem[0] |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: colorItem[1] |
||||
|
} |
||||
|
], false) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
data: this.lendData // 从下到上的数据 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
option && myChart.setOption(option) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
#mainlend { |
||||
|
width: 520px; |
||||
|
height:257px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,98 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!-- 档案类别 --> |
||||
|
<div id="maintype" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import echarts from 'echarts' |
||||
|
|
||||
|
export default { |
||||
|
name: 'TypePie', |
||||
|
props: { |
||||
|
typeData: { |
||||
|
type: Array, |
||||
|
require: true, |
||||
|
default: function() { |
||||
|
return [] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.drawChart() |
||||
|
}, |
||||
|
methods: { |
||||
|
drawChart() { |
||||
|
const chartDom = document.getElementById('maintype') |
||||
|
const myChart = echarts.init(chartDom) |
||||
|
let option = null |
||||
|
option = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
// formatter: "{a} <br/>{b} : {c} ({d}%)" |
||||
|
}, |
||||
|
|
||||
|
legend: { |
||||
|
// orient: 'vertical', |
||||
|
bottom: 20, |
||||
|
left: 'center', |
||||
|
icon: 'rect', |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
// color: ['#1CADAB', '#339CF'], // 饼 颜色 |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '档案类别', |
||||
|
type: 'pie', |
||||
|
radius: ['30%', '60%'], |
||||
|
center: ['50%', '40%'], // 饼图位置 |
||||
|
avoidLabelOverlap: true, |
||||
|
labelLine: { |
||||
|
normal: { |
||||
|
length: 10, // 第一段表示线 |
||||
|
length2: 60 // 第二段标示线 |
||||
|
} |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
formatter: ' {d}%' // 指示线显示百分比 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// label: { |
||||
|
// show: false, |
||||
|
// position: 'center' |
||||
|
// }, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
data: [ |
||||
|
{ value: this.typeData[0], name: '文书档案', itemStyle: { color: '#0FBED9' }}, |
||||
|
{ value: this.typeData[1], name: '科技档案', itemStyle: { color: '#F65163' }}, |
||||
|
{ value: this.typeData[2], name: '会计档案', itemStyle: { color: '#FF8447' }}, |
||||
|
{ value: this.typeData[3], name: '实物档案', itemStyle: { color: '#76AF50' }}, |
||||
|
{ value: this.typeData[4], name: '基建档案', itemStyle: { color: '#8378E8' }} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
option && myChart.setOption(option) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
#maintype { |
||||
|
width: 520px; |
||||
|
height:257px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,104 @@ |
|||||
|
<template> |
||||
|
<div class="barEcharts"> |
||||
|
<!-- 档案检索排名 --> |
||||
|
<div id="main2" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import echarts from 'echarts' |
||||
|
|
||||
|
export default { |
||||
|
name: 'AcrossEcharts', |
||||
|
mounted() { |
||||
|
this.drawChart() |
||||
|
}, |
||||
|
methods: { |
||||
|
drawChart() { |
||||
|
const chartDom = document.getElementById('main2') |
||||
|
const myChart = echarts.init(chartDom) |
||||
|
let option = null |
||||
|
option = { |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
// legend: {}, //图例 |
||||
|
grid: { // 边距 |
||||
|
left: '6%', |
||||
|
right: '13%', |
||||
|
bottom: '3%', |
||||
|
top: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'value', |
||||
|
boundaryGap: [0, 0.01], |
||||
|
show: false |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'category', |
||||
|
offset: 20, |
||||
|
axisLabel: {// 轴文字的配置 |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#fff', |
||||
|
fontSize: '14' |
||||
|
} |
||||
|
}, |
||||
|
axisLine: {// 轴线的颜色以及宽度 |
||||
|
show: false |
||||
|
}, |
||||
|
data: ['文书档案', '科技档案', '会计档案', '实物档案', '基建档案'] |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '检索量', |
||||
|
type: 'bar', |
||||
|
barWidth: 15, // 柱图宽度 |
||||
|
showBackground: true, |
||||
|
backgroundStyle: { |
||||
|
color: '#02255F' |
||||
|
// borderRadius: [0, 10, 10, 0] // 背景圆角 |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
label: { |
||||
|
show: true, // 开启显示 |
||||
|
distance: 20, // 条柱之间的距离 |
||||
|
position: 'right', // 在上方top在右侧right显示 |
||||
|
textStyle: { // 数值样式 |
||||
|
color: '#fff', |
||||
|
fontSize: 14 |
||||
|
} |
||||
|
}, |
||||
|
// 设置柱子圆角 |
||||
|
barBorderRadius: [0, 10, 10, 0], |
||||
|
// 这里设置每个柱子颜色不一样 |
||||
|
color: function(params) { |
||||
|
// 定义一个颜色数组colorList |
||||
|
const colorList = ['#0FBED9', '#F65163', '#FF8447', '#76AF50', '#8378E8'] |
||||
|
return colorList[params.dataIndex] |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
data: [18203, 23489, 29034, 104970, 131711] // 从下到上的数据 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
option && myChart.setOption(option) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
#main2 { |
||||
|
width: 765px; |
||||
|
height:257px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,124 @@ |
|||||
|
<template> |
||||
|
<div class="barEcharts"> |
||||
|
<!-- 档案检索排名 --> |
||||
|
<div id="main3" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import echarts from 'echarts' |
||||
|
|
||||
|
export default { |
||||
|
name: 'AcrossEcharts', |
||||
|
mounted() { |
||||
|
this.drawChart() |
||||
|
}, |
||||
|
methods: { |
||||
|
drawChart() { |
||||
|
const chartDom = document.getElementById('main3') |
||||
|
const myChart = echarts.init(chartDom) |
||||
|
let option = null |
||||
|
option = { |
||||
|
grid: { // 边距 |
||||
|
left: '2%', |
||||
|
right: '2%', |
||||
|
bottom: '5%', |
||||
|
top: '8%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
axisLine: {// 轴线的颜色以及宽度 |
||||
|
lineStyle: { |
||||
|
color: '#113D72' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: {// x轴文字的配置 |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] |
||||
|
|
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
min: 0, |
||||
|
max: 900, |
||||
|
splitNumber: 3, |
||||
|
axisLine: {// 轴线的颜色以及宽度 |
||||
|
lineStyle: { |
||||
|
color: '#113D72' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: {// x轴文字的配置 |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
splitLine: {// 分割线配置 |
||||
|
lineStyle: { |
||||
|
color: '#113D72', |
||||
|
type: 'dashed' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
data: [450, 430, 524, 418, 735, 547, 660, 750, 630, 524, 618, 335], |
||||
|
type: 'line', |
||||
|
areaStyle: { |
||||
|
normal: { |
||||
|
color: { |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0.1, |
||||
|
color: 'rgba(51, 156, 255, 0.64)' // 0% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.5, |
||||
|
color: 'rgba(51, 156, 255, 0.3)' // 0% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.7, |
||||
|
color: 'rgba(51, 156, 255, 0.1)' // 0% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.9, |
||||
|
color: 'rgba(0,0,0, 0.1)' // 100% 处的颜色 |
||||
|
} |
||||
|
] |
||||
|
// globalCoord: false // 缺省为 false |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#339CFF', // 改变折线点的颜色 |
||||
|
lineStyle: { |
||||
|
color: '#339CFF' // 改变折线颜色 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
option && myChart.setOption(option) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
#main3 { |
||||
|
width: 100%; |
||||
|
height:257px; |
||||
|
color: rgb(51, 156, 255); |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue