<template>
  <div id="echart"></div>
</template>


<!--PercentageCompleteEchart-->
<script>
import echarts from "echarts";
export default {
  name: "PercentageCompleteEchart",
  // components: {},
  props:['wanchengLv'],
  data(){
    return {
      percentageComplete:this.wanchengLv?this.wanchengLv:'0%',
    }
  },
  ready(){
    this.percentageCompleteEchart()

  },
  mounted(){
    this.percentageCompletel()
  },
  methods:{
    percentageCompletel(){
      this.percentageComplete=this.wanchengLv?this.wanchengLv:'0%'
    },
    percentageCompleteEchart(){
      let myChart = echarts.init(document.getElementById("echart"));
      let value = parseInt(this.percentageComplete.substring(0, this.percentageComplete.length - 1));
      console.log("value"+value)
      let option = {
// backgroundColor:"#061740",
        title: {
          text: `${value}%`,
          x: 'center',
          y: '38%',
          textStyle: {
            color: '#00F6FF',
            fontSize:36
          }
        },
        series: [  {
          type: 'pie',
          radius: ['58%', '45%'],
          silent: true,
          clockwise: false,
          startAngle: 90,
          z: 0,
          zlevel: 0,
          label: {
            normal: {
              position: "center",

            }
          },
          data: [{
            value: value,
            name: "",
            itemStyle: {
              normal: {
                color:"#00F6FF",
              }
            }
          },
            {
              value: 100-value,
              name: "",
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: "transparent"
                }
              }
            }
          ]
        },

          {
            name: "",
            type: "gauge",
            radius: "58%",
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 15,
            hoverAnimation: true,
            axisTick: {
              show: false
            },
            splitLine: {
              length: 17,
              lineStyle: {
                width: 5,
                color: "#061740"
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            detail: {
              show: false
            },
            data: [{
              value: 0,
              name: ""
            }]
          },

        ]
      };

      myChart.setOption(option);

    },

  },
  watch: {
    'wanchengLv'(val){
     this.percentageCompletel();
     this.percentageCompleteEchart();
    }
  }

}
</script>


<style scoped>
#echart{
  margin-left: 14.0625vw;
  margin-top: 12.963vh;
  width: 13.021vw;
  height: 23.148vh;
}
canvas{}
</style>
