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
-
75src/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