<!--
 * @Company: 沈阳信诚科技
 * @Email: html_venustar@163.com
 * @Author: Liuqiming
 * @Description: 大屏用饼图组件
 * @LastEditors: Liuqiming
 * @LastEditTime: 2024-03-20 16:47:50
 * @Date: 2024-03-04 15:58:21
-->
<template>
  <div class="echarts-container">
    <div class="main" ref="main"></div>
  </div>
</template>

<script setup>
const props = defineProps({
  color: {
    type: Array,
    default: () => ['#18FEFE', '#008AFF','#07F6A1','#FDDC4D','#F01818',]
  }, 
  seriesData:{
    type: Array,
    default: () => [
      { value: 40, name: 'rose 1' },
      { value: 33, name: 'rose 2' },
      { value: 28, name: 'rose 3' },
      { value: 22, name: 'rose 4' },
      { value: 20, name: 'rose 5' },
    ]
  }
});
const { proxy } = getCurrentInstance();
const myChart = shallowRef(null)
watch(props, () => {
  initChart()
}, { deep: true })

const main = ref(null)
const initChart = () => {
  if (myChart.value != null && myChart.value != "" && myChart.value != undefined) {
    myChart.value.dispose();//销毁
  }
  myChart.value = proxy.echarts.init(main.value);
  const sum = props.seriesData.reduce((sum, obj) => (sum += obj.value), 0)
  let list = props.seriesData.map(item => {
    return {
      value: item.value,
      name: item.name + ' ' + ((item.value / sum) * 100).toFixed(0) + '%'
    }
  })
  let option = {
    color: props.color,
    tooltip:{
      className:'echart-tooltip',
      // formatter: function (params) {
      //   let content = ''
      //   params.forEach(item => {
      //     content += `
      //       <div style="height:20px;line-height:20px;">
      //         <span style="display:inline-block;margin-right:4px;border-radius:50%;width:6px;height:6px;background-color:${item.color};"></span>
      //         <span style="color: #fff;font-size:12px;">${item.seriesName}：</span>
      //         <span style="color:${item.color};font-size:12px;">${item.value}</span>
      //       </div>
      //     `
      //   })
      //   const htmlContent = `
      //     <div style="">
      //       <div style="color: #fff;font-size:12px;">${params[0].name}</div>
      //       ${content}
      //     </div>
      //   `
      //   return htmlContent
      // }
    },
    legend: {
      orient: 'vertical',
      right:'10%',
      top:'10%',
      itemWidth: 8,
      itemHeight: 5,
      textStyle: {
        color: 'rgba(255,255,255,0.6)'
      },
      formatter: '{name}'
    },
    series: [
      {
        name: '成本费用',
        type: 'pie',
        radius: ["0%", '90%'],
        center:['30%','50%'],
        roseType: 'radius',
        label: {
          show: false,
          position: 'inner',
          fontSize: 14
        },
        labelLine: {
          show: false
        },
        emphasis: {
          label: {
            show: false
          }
        },
        data: list
      }
    ]
  }
  myChart.value.setOption(option);
}

nextTick(()=>{
  initChart()
  window.addEventListener('resize',() => {
    myChart.value.resize()
  })
});
</script>

<style lang="scss" scoped>
.echarts-container{
  width: 100%;
  height: 100%;
  position: relative;
  .main{
    width: 100%;
    height: 100%;
    :deep(.echart-tooltip){
      border-color: #008AFF !important;
      box-shadow: inset 0 0 8px 0 rgba(0, 138, 255, 0.4) !important;
      background: rgba(2, 19, 28, 0.95) !important;
      div{
        color: #fff !important;
        font-size:12px !important;
        span{
          color: #fff !important;
          font-size:12px !important;
        }
      }
    }
  }
  .percent-text{
    width: 100%;
    position: absolute;
    top: 36%;
    text-align: center;
    >p{
      margin: 0;
      font-size: w(12);
    }
    >span{
      font-size: w(16);
      line-height: h(24);
      font-family: pmzd;
      color: #fff;
    }
  }
}
</style>