<template>
  <el-row style="display: inline-block;">
    <div
      id="parking"
      style="width:150px;height:150px;"
    ></div>
  </el-row>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: ["resData"],
  data() {
    return {
    };
  },
  watch: {
    resData() {
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let myChart = echarts.init(document.getElementById("parking"));
      let option = {
          title: {
          //text: data.attendeeIsSign,
          text: '79%',
          textStyle: {
            color: '#F8BE00',
            fontSize: 14
          },
          subtext: '车位总数',
          subtextStyle: {
            color: '#000',
            fontSize: 10
          },
          itemGap: 10, // 主副标题距离
          left: 'center',
          top: '38%'
        },
        series: [
            {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            
            
            labelLine: {
                show: true
            },
            data: [
                { value: 1048, name: '剩余车位' },
                { value: 735, name: '已停车位' },
            ]
            }
        ]
      }
    //   let data = this.resData;
	// 	var option = {
    //     title: {
    //       //text: data.attendeeIsSign,
    //       text: '75%',
    //       textStyle: {
    //         color: '#E6EFFF',
    //         fontSize: 30
    //       },
    //       subtext: '签到人数占比',
    //       subtextStyle: {
    //         color: '#E6EFFF',
    //       },
    //       itemGap: 20, // 主副标题距离
    //       left: 'center',
    //       top: '40%'
    //     },
    //     angleAxis: {
    //       //max: data.attendeeTotal, // 满分
    //       max: 100, // 满分
    //       clockwise: true, // 逆时针
    //         // 隐藏刻度线
    //       axisLine: {
    //         show: false
    //       },
    //       axisTick: {
    //         show: false
    //       },
    //       axisLabel: {
    //         show: false
    //       },
    //       splitLine: {
    //         show: false
    //       }
    //     },
    //     radiusAxis: {
    //       type: 'category',
    //         // 隐藏刻度线
    //       axisLine: {
    //         show: false
    //         },
    //         axisTick: {
    //         show: false
    //         },
    //         axisLabel: {
    //         show: false
    //         },
    //         splitLine: {
    //         show: false
    //         }
    //       },
    //     polar: {
    //       center: ['50%', '50%'],
    //       radius: '100%' //图形大小
    //     },
    //     series: [
    //       {
    //         type: 'bar',
    //         data: [{
    //             name: '',
    //             //value: data.attendeeIsSign,
    //             value: 75,
    //             itemStyle: {
    //               normal: {
    //                 color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
    //                   offset: 0,
    //                   color: '#E9CA7C'
    //                 }, {
    //                   offset: 1,
    //                   color: '#B99259'
    //                 }])
    //               }
    //             },
    //           },
    //         ],
    //         coordinateSystem: 'polar',
    //         roundCap: true,
    //         barWidth: 8,
    //         barGap: '-100%', // 两环重叠
    //         z: 2,
    //       },
    //       { // 灰色环
    //               type: 'bar',
    //               data: [{
    //               value: data.attendeeTotal,
    //               itemStyle: {
    //                 color: 'rgba(46,52,64,1)',
    //                 shadowColor: 'rgba(46,52,64,1)',
    //                 shadowBlur: 5,
    //                 shadowOffsetY: 2
    //               }
    //               }],
    //               coordinateSystem: 'polar',
    //               roundCap: true,
    //               barWidth: 8,
    //               barGap: '-100%', // 两环重叠
    //               z: 1
    //       },
    //       // 内边框的设置
    //       {
    //           radius: ['44%', '43%'],
    //           center: ['50%', '50%'],
    //           type: 'pie',
    //           label: {
    //               normal: {
    //                   show: false
    //               },
    //               emphasis: {
    //                   show: false
    //               }
    //           },
    //           labelLine: {
    //               normal: {
    //                   show: false
    //               },
    //               emphasis: {
    //                   show: false
    //               }
    //           },
    //           animation: false,
    //           tooltip: {
    //               show: false
    //           },
    //           data: [{
    //               value: 1,
    //               itemStyle: {
    //                   color: "rgba(46,52,64,1)",
    //               },
    //           }],
    //       }, {
    //           name: '外边框',
    //           type: 'pie',
    //           clockWise: false, //顺时加载
    //           hoverAnimation: false, //鼠标移入变大
    //           center: ['50%', '50%'],
    //           radius: ['56%', '56%'],
    //           label: {
    //               normal: {
    //                   show: false
    //               }
    //           },
    //           data: [{
    //               value: 9,
    //               name: '',
    //               itemStyle: {
    //                   normal: {
    //                       borderWidth: 2,
    //                       borderColor: 'rgba(46,52,64,1)'
    //                   }
    //               }
    //           }]
    //       },
    //     ]
    // };
        myChart.setOption(option);
      option && myChart.setOption(option);
      setTimeout(function () {
        window.onresize = function () {
          myChart.resize();
        };
      }, 200);
    },
  },
};
</script>

