<template>
  <div
    id="mainCloumPie"
    style="width:100%;height:100%"
  ></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      var chartDom = document.getElementById('mainCloumPie')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        angleAxis: {},
        radiusAxis: {
          type: 'category',
          // data: ['市政设施', '楼宇厂房', '道路建设', '征地拆迁', '生态环保', '公共服务配套', '政权建设'],
          z: 10
        },
        polar: {},
        series: [
          {
            type: 'bar',
            data: [1, 2, 3, 4, 5, 6, 7],
            coordinateSystem: 'polar',
            name: '市政设施',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            data: [5, 2, 3, 3, 5, 6, 7],
            coordinateSystem: 'polar',
            name: '楼宇厂房',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            data: [1, 2, 7, 4, 5, 6, 2],
            coordinateSystem: 'polar',
            name: '道路建设',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
           {
            type: 'bar',
            data: [1, 2, 7, 4, 5, 6, 2],
            coordinateSystem: 'polar',
            name: '征地拆迁',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
           {
            type: 'bar',
            data: [1, 2, 7, 4, 5, 6, 2],
            coordinateSystem: 'polar',
            name: '生态环保',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
           {
            type: 'bar',
            data: [1, 2, 7, 4, 5, 6, 2],
            coordinateSystem: 'polar',
            name: '公共服务配套',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
           {
            type: 'bar',
            data: [1, 2, 7, 4, 5, 6, 2],
            coordinateSystem: 'polar',
            name: '政权建设',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          }
        ],
        legend: {
          show: true,
          data: ['市政设施', '楼宇厂房', '道路建设', '征地拆迁', '生态环保', '公共服务配套', '政权建设'],
          top: 'bottom',
          padding: 0
        }
      }

      option && myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>