<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>
