174 lines
3.5 KiB
Vue
174 lines
3.5 KiB
Vue
<template>
|
||
<div>
|
||
<div class="vulnerability">
|
||
<div :id="id" class="vulnerabilityEchart"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "vulnerabilityEcharts",
|
||
props: {
|
||
id: {
|
||
type: String,
|
||
required: true,
|
||
default: true
|
||
},
|
||
barData: {
|
||
type: Number,
|
||
required: true,
|
||
default: true
|
||
},
|
||
color: {
|
||
type: String,
|
||
required: true,
|
||
default: true
|
||
},
|
||
},
|
||
data(){
|
||
return{
|
||
|
||
};
|
||
},
|
||
watch:{
|
||
barData:{
|
||
handler:function(newV){
|
||
this.getLoadEcharts()
|
||
}
|
||
},
|
||
color:{
|
||
handler:function(newV){
|
||
this.getLoadEcharts()
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getLoadEcharts()
|
||
},
|
||
methods:{
|
||
getLoadEcharts(){
|
||
var myChart = this.$echarts.init(
|
||
document.getElementById(this.id)
|
||
);
|
||
//柱条的颜色
|
||
// var lineColor=["#33FF00"]
|
||
var lineColor=this.color
|
||
var option = {
|
||
tooltip: {//item和line搭配，将实现鼠标放置柱条上即可显示提示框，无阴影或者线条
|
||
trigger: 'item',
|
||
axisPointer: {
|
||
type: 'line'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '1px',
|
||
right: '5px',
|
||
// bottom: '1px',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'value',
|
||
splitLine:{//坐标轴在grid区域的分割线
|
||
show:false
|
||
},
|
||
axisLabel:{
|
||
show:false
|
||
},
|
||
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'category',
|
||
data: [],
|
||
inverse:true,//数组翻转显示
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
show:true
|
||
},
|
||
axisLine:{
|
||
show:false
|
||
}
|
||
},
|
||
{
|
||
type: 'category',
|
||
data: [100],
|
||
inverse:true,//数组翻转显示
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
show:true
|
||
},
|
||
axisLine:{
|
||
show:false//不显示y轴的线
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
textStyle:{
|
||
fontSize:10,
|
||
color:"#fff"
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'bar',
|
||
yAxisIndex:0,
|
||
data: [this.barData.toFixed(2)*100],
|
||
barWidth:'10%',//柱条的宽度
|
||
label:{
|
||
show:false,
|
||
formatter:function(params){//柱条上的文字
|
||
return params.data+"%";
|
||
}
|
||
},
|
||
itemStyle:{
|
||
barBorderRadius:150,//圆角
|
||
color:function(params){
|
||
// return lineColor[params.dataIndex]
|
||
return lineColor
|
||
}
|
||
},
|
||
},
|
||
{
|
||
name: '',
|
||
type: 'bar',
|
||
yAxisIndex:1,//使两个柱状图重合的效果
|
||
barWidth: '10%',
|
||
data: [this.barData.toFixed(2)*100,100],
|
||
label:{
|
||
show:false
|
||
},
|
||
itemStyle:{
|
||
color:"none",
|
||
borderColor:"#00c1de",
|
||
borderWidth:1,
|
||
barBorderRadius:150,//圆角
|
||
},
|
||
}
|
||
]
|
||
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.vulnerability{
|
||
width: 100%;
|
||
height: 15px;
|
||
|
||
}
|
||
.vulnerabilityEchart{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|