<template>
    <div id="pieChartId" style="width:100%;height:300px;margin: 0 auto"></div>
</template>
<script setup>
    import * as echarts from 'echarts';
import { defineProps, reactive, watch, nextTick, onUnmounted,onMounted } from 'vue';
import {pieData} from './data.js'

const state = reactive({
    exportLoading: false,
    echartInstance: undefined,
    hubData:[],
})

function renderEchartLine() {
    // 基于准备好的dom，初始化echarts实例
    const domInstance=document.getElementById('pieChartId')
    if(domInstance){
        domInstance.removeAttribute('_echarts_instance_')
    }
    else{
        return 
    }
    const myChart = echarts.init(domInstance);
    const seriesItem= {
      name: 'Access From',
      type: 'pie',
    //   radius: [20, 50],
      center: ['50%', '50%'],
    //   roseType: 'area',
    //   itemStyle: {
    //     borderRadius: 1
    //   },
      data:state.hubData,
      label:{
        color:'#ffffff'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
    const seriesData=[seriesItem]

    const option = {
        title: {
            text: '社区文章数量占比',
            textStyle:{
                color:'#ffffff'
            }
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {}
            }
        },
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            axisLabel:{
                color:'#ffffff'
            }
        },
        yAxis: {
            axisLabel:{
                color:'#ffffff'
            }
        },
        grid: {
            x: 60,
            x2: 100
        },
        series: seriesData
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option, true);
    // 监听
    state.echartInstance = myChart;
    window.onresize = myChart.resize;
}

onUnmounted(() => {
    window.onresize = null
})
const getHubConfig= ()=>{
     state.hubData=[...pieData]
    renderEchartLine()
}

onMounted(()=>{
    getHubConfig()
})
</script>