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

</template>

<script>
import echarts from "echarts";
export default {
  name: "RateTop",
  // components: {},
  // props:['row','dat1'],
  data(){
    return {
      netHallData:88,   //网厅预约占比
    }
  },
  ready(){
    // console.log(this.row)
    this.RateEchart1()
  },
  mounted(){
  },
  methods:{

    RateEchart1(){
      let myChart = echarts.init(document.getElementById("echart1"));
      let data = {
        value: this.netHallData,
        name: ''
      };
      let option = {
        // backgroundColor: '#0B2C6F',
        title: {
          text: '{num|' + data.value + '%}',
          subtext: '\n' + data.name,
          x: '49%',
          y: '40%',
          textAlign: 'center',
          textStyle: {
            rich: {
              num: {
                fontWeight: '500',
                color: '#fff',
                fontFamily: '微软雅黑',
                fontSize: 40,
              },
            }

          },
          subtextStyle: {
            lineHeight: 0,
            fontSize: 22,
            color: '#fff',

          }
        },
        data: [{
          name: data.name,
        }],
        series: [{ // 主圆环
          name: data.name,
          type: 'pie',
          radius: ['70%', '80%'],
          center:['50%','60%'],
          startAngle: 180,
          endAngle: 0,

          color: [{
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: 'rgba(255, 205, 0, 1)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(255, 205, 0, .1)' // 100% 处的颜色
            }]
          }, 'transparent'],
          hoverAnimation: true,
          legendHoverLink: false,
          z: 10,
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            value: 50 * data.value / 100
          }, {
            value: 100 - (50 * data.value / 100)
          }]
        }, { // 中间圈
          name: '',
          z: 5,
          type: 'pie',
          cursor: 'default',
          radius: ['95%', '95%'],
          center:['50%','60%'],
          startAngle: 180,
          hoverAnimation: false,
          legendHoverLink: false,
          labelLine: {
            normal: {
              show: false
            }
          },
          //上层虚线
          // data: [{
          //   value: 50,
          //   itemStyle: {
          //     // borderColor: '#2DF6F3',
          //     borderType: 'dashed',
          //     borderWidth: 2,
          //   }
          // }, {
          //   value: 50,
          //   itemStyle: {
          //     color: 'transparent'
          //   }
          // }]
        }]
      };
      myChart.setOption(option);

    },

  }

}
</script>

<style scoped>
#echart1{
  width: 10.417vw;
  height: 18.519vh;
  position: absolute;
  top: 20.556vh;
  right: 1.40625vw;
}

</style>
