<template>
  <div class="community-type">
    <m-chart :config="config" :data="data"/>
  </div>
</template>

<script>
export default {
  name: 'CommunityType',
  data() {
    return {
      config: {
        colors: ['#0091ff', '#583eff', '#f7b500', '#6dd401'],
        legend: {
          align: 'right',
          orient: 'vertical',
        },
        shape: [
          {type: 'pie', startAngle: -30, radius: [0, 50 * Number((screen.height / 800).toFixed(1))], center: ['35%', '50%']}
        ],
      },
      data: [
        {name: '商品房', value: 7931},
        {name: '直管公房', value: 1793},
        {name: '混合', value: 962},
        {name: '其他', value: 2831},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
  .community-type
    width 100%
    height 100%
</style>
