<template>
    <div :id="idName" style="width:100%;height:95%"></div>
</template>

<script>
export default {
name: "echart1",
props: {
  perCent: {
      type: Number,
      required: true,
      default: true
    },
  idName:{
      type: String,
      required: true,
    }
  },
  data(){
  return{

  };
  },
  watch:{
    perCent:{
      handler:function(newV){
         this.getLoadEcharts()
      }
    }
  },
  mounted() {
  this.getLoadEcharts()
  },
  methods:{
  getLoadEcharts(){
    var myChart = this.$echarts.init(
      document.getElementById(this.idName)
    );
      let color = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{//color为渐变色
        offset: 0,
        color: 'rgb(9,13,255)',
      },
      {
        offset: 1,
        color: 'rgb(24,200,252)',
      },
      ])
      var option = {
        title: [{
          text: (this.perCent*100).toFixed(0)+'%',
          left: 'center',
          top: 'center',
          textStyle: {
            fontSize: 24,
            color: 'rgb(24,200,252)',
            foontWeight: '600',
            background: 'rgba(9,119,150,0.3)',
          },

        }
        ],
        tooltip: {
          show:false,
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        color: ['rgba(24,55,123,0.7)', 'rgb(24,55,123,0.7)', 'rgb(24,55,123,0.7)', 'rgb(24,55,123,0.7)', 'rgb(24,55,123,0.7)', 'rgb(24,55,123,0.7)'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            hoverAnimation: false,
            radius: ['70%', '80%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            // showBackground: true,
            // backgroundStyle: {
            //   color: 'rgb(24,55,123,0.7)',
            // },
            itemStyle: {
              
              borderRadius: 10,
              borderColor: 'rgb(2,20,42,1)',
              borderWidth: 1,
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 580 },
              { value: 580 },
              { value: 580 },
              { value: 580 },
              { value: 580 }
            ],

          },
           {
            name: '',
            type: 'pie',
            legendHoverLink: false,
            hoverAnimation: false,
            radius: ['70%', '80%'],
            center: ['50%', '50%'],
            labelLine:{  //删除指示线
              show:false
            },
            animation: false,
            itemStyle: {
              color: 'red',
            },
            data:[
              { value: 580*5-580*5*this.perCent,
                itemStyle: {
                  normal:{
                     color: "rgba(255,255,255,0)"
                  }
                },
              },
              { value: 580*5*this.perCent, 
               itemStyle: {
                  normal:{
                     color: color
                  }
                }
              },
            ],
          },
          {
            name: '',
            type: 'pie',
            hoverAnimation: false,
            startAngle: 80,
            radius: ['60%'],
            hoverAnimation: false,
            animation: false,
            center: ['50%', '50%'],
            itemStyle: {
              color: 'rgba(9,119,150,0.3)',
            },
            data: [100],
          },
          {
            name: '',
            type: 'pie',
            startAngle: 80,
            hoverAnimation: false,
            radius: ['10%'],
            hoverAnimation: false,
            animation: false,
            center: ['50%', '16%'],
            itemStyle: {
              color: 'rgb(21,165,252)',
            },
            data: [100],
          },
        ]
      };
    myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.container1{
width: 118px;
  height: 128px;
   overflow: hidden;
}
#echart1{
  width: 118px;
  height: 128px;
    /* position: relative;
      top: -100%;
      left: 84%; */
       overflow: hidden;
}
</style>
