<template>
  <div id="rose-chart">
    <div class="rose-chart-title">---{{chartData?chartData.title:''}}---</div> 
    <div :id="pieId" class="pie-chart-container"></div>
  </div>
</template>

<script>
 import * as echarts from 'echarts'; 
export default {
  name: 'RoseChart', 
  props:{
      pieId:{
        type: String,
      },
      chartData:{
        type:Object,
      }
    },
  data () {
    return {
      option: {}
    }
  },
  methods: {
    createData () {
 
      var myChart = echarts.init(document.getElementById(this.pieId));
        this.option = {
          
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'horizontal',
            left: this.$fontSize(0.2),
            top:this.$fontSize(0.1),
            itemWidth: this.$fontSize(0.25),
            itemHeight: this.$fontSize(0.14),
            // height: this.$fontSize(0.2),
            textStyle:{
              color:'fff',
              fontSize:this.$fontSize(0.12)
            },
            
          },
          series: [
            {
              name: '数据详情',
              type: 'pie',
              radius: '50%',
              data: this.chartData.data,
              emphasis: {
                textStyle: {
                 color: 'rgba(0,0,0,0)'
                }
              },
              label: {
                color: '#fff',
                fontSize:this.$fontSize(0.12),
                formatter: '{b}: {d}%'
                
              },
            }
          ]
        };
        myChart.setOption(this.option);
    } 
  },
  mounted () {
    console.log(this.pieId)
    const { createData } = this

    createData()
 
  }
}
</script>

<style lang="less">
#rose-chart {
  // width: 33.33%;
  // height: 55%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  box-sizing: border-box;

  .rose-chart-title {
    height: 0.5rem;
    font-weight: bold;
    text-indent: 0.2rem;
    font-size: 0.2rem;
    display: flex;
    align-items: center;
  }

  .pie-chart-container {
      height: calc(100% - 0.5rem);
    }
}
</style>
