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

      option = {
        polar: {
          radius: [30, '80%']
        },
        radiusAxis: {
          max: 1200,
          /*改变x轴颜色*/
          axisLine: false
        },
        angleAxis: {
          type: 'category',
          data: ['在建项目', '已竣工项目'],
          startAngle: 75,
          /*改变x轴颜色*/
          axisLine: {
            lineStyle: {
              color: '#2aaaef',
              width: 1 //这里是为了突出显示加上的
            }
          }
        },
        radiusAxis: {
          show: false
        },
        // grid: {
        //   top: '30%',
        //   bottom: '30%'
        // },
        // legend: {
        //   top: 'bottom',
        //   padding: 30
        // },
        // color: [
        //   '#bd88f5',
        //   '#5690dd',
        //   '#9489fa',
        //   '#f06464',
        //   '#f7af59',
        //   '#f0da49',
        //   '#71c16f',
        //   '#2aaaef',

        //   '#009db2',
        //   '#024b51',
        //   '#0780cf',
        //   '#765005'
        // ],
        tooltip: {
          //此处配置鼠标移动对应区域时的黑色弹框
          trigger: 'item',
          formatter: '{b}: {c} (个)'
        },
        series: [
          {
            type: 'bar',
            data: [1048, 735],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            coordinateSystem: 'polar',
            label: {
              show: true,
              position: 'middle',
              textStyle: {
                color: '#765005'
              }
              // formatter: '{b}: {c}'
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 1, color: '#bd88f5'},
                  {offset: 0.5, color: '#5690dd'},
                  {offset: 0, color: '#9489fa'}
                ])
              }
            }
          }
        ]
      }

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