Skip to content

W
web
Commit e097ba2a authored by 高滢's avatar 高滢
Browse files
Options

feat(首页): 柱状图 仪表盘

parent bbf1f10d
Hide whitespace changes
Inline Side-by-side
Showing with 351 additions and 8 deletions
src/views/echartHome/confidentialityTasks.vue 0 → 100644
View file @ e097ba2a
<template>
<div
ref="chart"
style="width: 100%; height: 300px; display: flex; justify-content: center"
></div>
</template>
<script>
export default {
name: 'ConfidentialityTasks',
data() {
return {
chart: null
}
},
mounted() {
this.init()
},
methods: {
init() {
// 2.初始化
this.chart = this.$echarts.init(this.$refs.chart)
// 3.配置数据
const option = {
title: {
text: '任务保密等级占比',
left: 'left',
textStyle: {
color: '#606266',
fontWeight: 700,
fontSize: 16
}
},
color: ['#8C79EA', '#12BEDF', '#F6B24B', '#1A6FD7'],
tooltip: {
trigger: 'item'
},
legend: {
top: 'bottom'
},
series: [
{
type: 'pie',
radius: ['40%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center',
formatter: `{b|{d}%}\n{d|{b}}`, // 自定义lable处展示那些数据及其格式
rich: {
b: {
fontSize: 16,
fonWweight: 700,
color: ' #303133'
},
d: {
fontSsize: 14,
fontWeight: 400,
color: ' #606266'
}
}
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'A' },
{ value: 735, name: 'B' },
{ value: 580, name: 'C' },
{ value: 484, name: 'D' }
]
}
]
}
// 4.传入数据
this.chart.setOption(option)
}
}
}
</script>
<style lang="scss" scoped></style>
src/views/echartHome/standardClassification.vue
View file @ e097ba2a
...@@ -23,8 +23,7 @@ export default { ...@@ -23,8 +23,7 @@ export default {
const option = { const option = {
title: { title: {
text: '标准分类占比', text: '标准分类占比',
left: 10, left: 'left',
top: 10,
textStyle: { textStyle: {
color: '#606266', color: '#606266',
fontWeight: 700, fontWeight: 700,
...@@ -40,6 +39,7 @@ export default { ...@@ -40,6 +39,7 @@ export default {
name: 'Nightingale Chart', name: 'Nightingale Chart',
type: 'pie', type: 'pie',
radius: ['30%', '40%'], radius: ['30%', '40%'],
center: ['50%', '40%'],
roseType: 'area', roseType: 'area',
itemStyle: { itemStyle: {
borderRadius: 10 borderRadius: 10
......
src/views/echartHome/useCaseRisk.vue 0 → 100644
View file @ e097ba2a
<template>
<div ref="chart" style="width: 50%; height: 500px"></div>
</template>
<script>
export default {
name: 'UseCaseRisk',
data() {
return {
chart: null
}
},
mounted() {
this.init()
},
methods: {
init() {
// 2.初始化
this.chart = this.$echarts.init(this.$refs.chart)
// 3.配置数据
const option = {
title: {
text: '任务保密等级占比',
left: 'left',
textStyle: {
color: '#606266',
fontWeight: 700,
fontSize: 16
}
},
color: ['#E55868', '#F6B24B', '#1A6FD7'],
series: [
{
type: 'gauge',
anchor: {
show: true,
showAbove: true,
size: 18,
itemStyle: {
color: '#FAC858'
}
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 8,
length: '80%',
offsetCenter: [0, '8%']
},
progress: {
show: true,
overlap: true,
roundCap: true
},
axisLine: {
roundCap: true
},
data: [
{
value: 20,
name: 'Good',
title: {
offsetCenter: ['-40%', '80%']
},
detail: {
offsetCenter: ['-40%', '95%']
}
},
{
value: 40,
name: 'Better',
title: {
offsetCenter: ['0%', '80%']
},
detail: {
offsetCenter: ['0%', '95%']
}
},
{
value: 60,
name: 'Perfect',
title: {
offsetCenter: ['40%', '80%']
},
detail: {
offsetCenter: ['40%', '95%']
}
}
],
title: {
fontSize: 14
},
detail: {
width: 40,
height: 14,
fontSize: 14,
color: '#fff',
backgroundColor: 'inherit',
borderRadius: 3,
formatter: '{value}%'
}
}
]
}
// 4.传入数据
this.chart.setOption(option)
}
}
}
</script>
<style lang="scss" scoped></style>
src/views/echartHome/useCaseTest.vue 0 → 100644
View file @ e097ba2a
<template>
<div ref="chart" style="width: 100%; height: 500px"></div>
</template>
<script>
export default {
name: 'UseCaseTest',
data() {
return {
chart: null
}
},
mounted() {
this.init()
},
methods: {
init() {
// 2.初始化
this.chart = this.$echarts.init(this.$refs.chart)
// 3.配置数据
const option = {
title: {
text: '用例测试类型概览',
left: 'left',
textStyle: {
color: '#606266',
fontWeight: 700,
fontSize: 16
}
},
tooltip: {
name: '用例测试类型概览',
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '1%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['自动', '半自动', '手工']
},
series: [
{
type: 'bar',
barWidth: '20',
data: [
{ itemStyle: { color: '#13BE24' }, value: 120 },
{ itemStyle: { color: '#7F69E8' }, value: 200 },
{ itemStyle: { color: '#1A6FD7' }, value: 150 }
]
}
]
}
// 4.传入数据
this.chart.setOption(option)
}
}
}
</script>
<style lang="scss" scoped></style>
src/views/index.vue
View file @ e097ba2a
...@@ -73,21 +73,68 @@ ...@@ -73,21 +73,68 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="6">
<div class="cardStyle"> <div class="cardStyle">
<StandardClassification></StandardClassification> <StandardClassification></StandardClassification>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="5">
<div>3</div> <div class="cardThree">
<div class="cardTitle">任务完成情况占比</div>
<div style="display: flex; justify-content: space-between">
<div class="cardChild" style="background: rgba(18, 190, 223, 0.08)">
<div
style="
width: 36px;
height: 36px;
background: #12bedf;
border-radius: 8px;
"
></div>
<span>已完成 ：43个</span>
<el-progress
:percentage="40"
color="#12BEDF"
:stroke-width="10"
:show-text="false"
></el-progress>
<span>40%</span>
</div>
<div class="cardChild" style="background: rgba(230, 88, 104, 0.08)">
<div
style="
width: 36px;
height: 36px;
background: #e55868;
border-radius: 8px;
"
></div>
<span>已完成 ：43个</span>
<el-progress
:percentage="40"
color="#E55868"
:stroke-width="10"
:show-text="false"
></el-progress>
<span>40%</span>
</div>
</div>
</div>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<div>4</div> <div class="cardStyle">
<ConfidentialityTasks></ConfidentialityTasks>
</div>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="14"> <el-col :span="14">
<div>5</div> <div>
<UseCaseRisk></UseCaseRisk>
</div>
<div>
<UseCaseTest></UseCaseTest>
</div>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<el-row> <el-row>
...@@ -106,10 +153,18 @@ ...@@ -106,10 +153,18 @@
</template> </template>
<script> <script>
import StandardClassification from './echartHome/standardClassification.vue' import StandardClassification from './echartHome/standardClassification.vue'
import ConfidentialityTasks from './echartHome/confidentialityTasks.vue'
import UseCaseRisk from './echartHome/useCaseRisk.vue'
import UseCaseTest from './echartHome/useCaseTest.vue'
export default { export default {
name: 'HomePage', name: 'HomePage',
components: { StandardClassification }, components: {
UseCaseTest,
UseCaseRisk,
ConfidentialityTasks,
StandardClassification
},
data() { data() {
return {} return {}
} }
...@@ -148,4 +203,21 @@ export default { ...@@ -148,4 +203,21 @@ export default {
justify-content: space-between; justify-content: space-between;
margin: 20px 0; margin: 20px 0;
} }
.cardThree {
border: 1px solid #dcdfe3;
border-radius: 4px;
padding: 20px 30px;
height: 300px;
.cardTitle {
font-size: 16px;
font-weight: 700;
color: #606266;
margin-bottom: 40px;
}
.cardChild {
width: 138px;
height: 174px;
border-radius: 8px;
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment