<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons'); // echarts theme
import resize from './mixins/resize';

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '320px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
 watch: {
     chartData: {
       deep: true,
       handler(val) {
         this.setOptions(val)
       }
     }
   },
   data() {
     return {
       chart: null
     }
   },
   mounted() {
     this.$nextTick(() => {
       this.initChart()
     })
   },
   beforeDestroy() {
     if (!this.chart) {
       return
     }
     this.chart.dispose()
     this.chart = null
   },
   methods: {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons');
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
	   // this.chartData
     },
	 // { y, x ,data } = {}
       setOptions({ One, Tow ,Thr,For,Fiv,Six,Sev,Eig }) {
         // console.log(y,x,data,56)
        this.chart.setOption({
                  tooltip: {
                         trigger: 'item',
                         formatter: "{a} <br/>{b}: {c} ({d}%)"
                     },
                     legend: {
						 orient: "vertical",
                            // bottom:0,
							// top:0,
							// right:0,
                            // left: 'center',
							x:'right',
							y:'60px',
							// padding:['0%','0%','0%','100%'],
							// width: '100%',
							 // formatter: [
							 //     '{a|{name}}'
							 //  ].join('\n'),
							 //  textStyle: {
							 //    rich: {
							 //      a: {
							 //        width:90, // 每个图例的宽度，具体根据字数调整
							 //        lineHeight: 12,
									
							 //      }
							 //    }
							 //  }
                         
                     },
                     // 设置环形中间的数据
                     graphic: [
                       {
                         type: 'text',
                         left: '41%',
                         top: '49%',
                         z: 10,
                         style: {
                           fill: '#333333',
                           text: '',
                           font: '12px Microsoft YaHei'
                         },
                         textStyle: {
                           color: '#333333',
                           fontSize: 12,
                           align: 'center'
                         }
                       }
                     ],
					 color: ['#5470C6', '#91CC75','#FAC858','#EE6666','#73C0DE','#3BA272'],
                     series: [
        
                          {
                               name: 'Access From',
                               type: 'pie',
                               radius: ['40%', '70%'],
							   center: ['33%', '50%'],
                               avoidLabelOverlap: false,
                               itemStyle: {
                                 borderRadius: 10,
                                 borderColor: '#fff',
                                 borderWidth: 2
                               },
                               label: {
                                 show: false,
                                 position: 'center'
                               },
                               emphasis: {
                                 label: {
                                   show: true,
                                   fontSize: 12,
                                   fontWeight: 'bold'
                                 }
                               },
                               labelLine: {
                                 show: false
                               },
                            data: [
                                    { value: One, name: '0 ~ 100   ' +  One + '人'},
                                    { value: Tow, name: '100 ~ 200  ' + Tow + '人' },
                                    { value: Thr, name: '200 ~ 300  ' + Thr + '人' },
                                    { value: For, name: '300 ~ 400  ' + For + '人' },
                                    { value: Fiv, name: '400 ~ 500  ' + Fiv + '人' },
									{ value: Six, name: '500 ~ 600  ' + Six + '人'},
									{ value: Sev, name: '600 ~ 700  ' + Sev + '人'},
									{ value: Eig, name: '700 ~ 800  ' + Eig + '人'},
                                  ]
                         }
                     ]
              });
       }
   }
};
</script>
