<template>
  <div class="property-analysis" v-if="showChart">
    <m-chart style="z-index:99;" :config="config" :data="data" :options="{legend: {height: '75%', top: '10%'}}"/>
    <div class="border" />
  </div>
</template>

<script>
export default {
  name: 'PropertyAnalysis',
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#9779fe', '#51f2ea', '#05bcfe', '#7efe95', '#fef170', '#feaf62', '#f6633b', '#fc3239', '#fb74fb', '#a936f2'],
        legend: {
          align: 'right',
          orient: 'vertical',
        },
        shape: [
          {type: 'pie', radius: [35 * Number((screen.height / 800).toFixed(1)), 45 * Number((screen.height / 800).toFixed(1))], center: ['20%', '50%']}
        ]
      },
      data: [
        {name: '合资', value: 30},
        {name: '外资', value: 20},
        {name: '私营', value: 15},
        {name: '自营', value: 5},
        {name: '国有控股', value: 5},
        {name: '大专院校', value: 5},
        {name: '社会团体', value: 5},
        {name: '党政机关', value: 5},
        {name: '事业单位', value: 30},
        {name: '科研院所', value: 5},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 0)
  },
}
</script>

<style lang="stylus" scoped>
.property-analysis
  width 100%
  height 100%
  overflow hidden
  .border
    width 9rem
    height @width
    border 0.2rem solid #00f2ff
    position absolute
    top 60%
    left 22.5%
    transform translate(-50%, -50%)
    border-radius 50%
    box-shadow 0 0 1rem 0.2rem rgba(255,255,255,0.3), inset 0 0 1rem 0.2rem rgba(255,255,255,0.3)
    opacity .9
</style>
