<template>
  <div class="property-analysis" v-if="showChart">
    <m-chart style="z-index:99;" :config="config" :data="data" />
    <div class="border" />
    <div class="legend">
      <p v-for="(item, i) in config.colors" :key="item">
        <span :style="`background:${item}`"/>
        {{data[i].name}}
      </p>
    </div>
  </div>
</template>

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

<style lang="stylus" scoped>
.property-analysis
  width 100%
  height 100%
  overflow hidden
  position relative
  .border
    width 9rem
    height @width
    border 0.2rem solid #00f2ff
    position absolute
    top 50%
    left 25%
    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
  .legend
    position absolute
    height 60%
    width 50%
    right 0
    top 0
    bottom 0
    margin auto 0
    display flex
    flex-direction column
    justify-content space-around
    flex-wrap wrap
    p
      height 18%
      width 50%
      span
        display inline-block
        width .8rem
        height @width
        border-radius 50%
</style>
