Skip to content

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

feat(首页): 风险程度概览

parent 9f568a95
Hide whitespace changes
Inline Side-by-side
Showing with 112 additions and 62 deletions
src/views/echartHome/useCaseRisk.vue
View file @ 02d3180f
......@@ -56,6 +56,9 @@ export default {
this.chart = this.$echarts.init(this.$refs.chart)
// 3.配置数据
const option = {
tooltip: {
trigger: 'item'
},
title: {
text: '用例风险程度概览',
left: 'left',
......@@ -65,79 +68,126 @@ export default {
fontSize: 16
}
},
legend: {
top: 'bottom'
},
color: ['#E55868', '#F6B24B', '#1A6FD7'],
series: [
{
type: 'gauge',
anchor: {
show: true,
showAbove: true,
size: 18,
itemStyle: {
color: '#FAC858'
}
type: 'pie',
radius: ['40%', '60%'],
avoidLabelOverlap: false,
padAngle: 5,
itemStyle: {
borderColor: '#fff',
borderWidth: 10,
borderRadius: 10
},
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: 5,
length: '70%',
offsetCenter: [0, '8%']
label: {
show: false,
position: 'center'
},
progress: {
show: true,
overlap: true,
roundCap: true
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
axisLine: {
roundCap: true
labelLine: {
show: false
},
data: [
{
value: this.height,
name: '高危',
title: {
offsetCenter: ['-40%', '80%']
},
detail: {
offsetCenter: ['-40%', '95%']
}
},
{
value: this.medium,
name: '中危',
title: {
offsetCenter: ['0%', '80%']
},
detail: {
offsetCenter: ['0%', '95%']
}
},
{
value: this.low,
name: '低危',
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}%'
}
{ value: this.height, name: '高危' },
{ value: this.medium, name: '中危' },
{ value: this.low, name: '低危' }
]
}
]
}
// 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: 5,
// length: '70%',
// offsetCenter: [0, '8%']
// },
// progress: {
// show: true,
// overlap: true,
// roundCap: true
// },
// axisLine: {
// roundCap: true
// },
// data: [
// {
// value: this.height,
// name: '高危',
// title: {
// offsetCenter: ['-40%', '80%']
// },
// detail: {
// offsetCenter: ['-40%', '95%']
// }
// },
// {
// value: this.medium,
// name: '中危',
// title: {
// offsetCenter: ['0%', '80%']
// },
// detail: {
// offsetCenter: ['0%', '95%']
// }
// },
// {
// value: this.low,
// name: '低危',
// 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)
}
......
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