<!-- 饼状图 -->
 <script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref, reactive, watch, computed } from 'vue'
const props = defineProps({
  PieData: Object
})
const pie_data = ref(props.PieData)
watch(
  () => props.PieData,
  (current) => {
    pie_data.value = current
    initOption.title.text = pie_title.value
    initOption.toolbox.feature.saveAsImage.name = downloadName.value
    initChart()
  },
  {
    deep: true
  }
)
const pie_ref = ref()

// legend
const Name = computed(() => {
  return pie_data.value?.ETDList.map((item: any) => {
    return item.name
  })
})
// title标题
const pie_title = computed(() => {
  return pie_data.value?.ETD_Title
})
// 圆弧大小
const pie_radius = computed(() => {
  return pie_data.value?.ETD_Radius
})
// 数据
const pie_series = computed(() => {
  return pie_data.value?.ETDList
})
const downloadName = computed(() => {
  return pie_data.value?.download_name
})

const initOption: any = reactive({
  //标题
  title: {
    text: pie_title.value || '', //主标题
    left: 19,
    top: 9.5,
    textStyle: {
      color: '#2B2F36',
      rich: {
        a: {
          fontWeight: '700',
          fontFamily: 'Lato-Light',
          fontSize: '14px'
        },
        b: {
          fontWeight: '400',
          fontFamily: 'Lato-Light',
          fontSize: '12px'
        }
      }
    }
  },
  // hover时的文字显示
  tooltip: {
    show: true,
    trigger: 'item', // 触发类型，轴触发，axis为鼠标移到坐标轴显示
    backgroundColor: '#2b2f36',
    borderColor: '#2b2f36',
    padding: 8,
    borderRadius: 12,
    formatter: function (params: any) {
      var str =
        '<div style="color:#FFF;font-weight:700;font-size:14px">' +
        params.name +
        '</div>' +
        '<div style="color:#FFF;font-weight:700;font-size:12px">' +
        params.marker +
        params.percent +
        '% (' +
        params.value +
        ')</div>'
      return str
    }
  },
  toolbox: {
    iconStyle: {
      borderColor: '#2B2F36'
    },
    emphasis: {
      iconStyle: {
        borderColor: '#ff7500'
      } // hover上去时的颜色
    },
    show: false, // 显示工具箱
    feature: {
      restore: { show: true },
      saveAsImage: { show: true, name: downloadName.value }
    },
    showTitle: false
  },
  series: {
    type: 'pie', // 饼状图
    data: pie_series,
    // radius: ['30%', '50%'],
    radius: pie_radius,
    minAngle: 20, // 设置每块扇形的最小占比
    avoidLabelOverlap: false,
    label: {
      show: true,
      // formatter: '{d}%({c})',
      formatter: '{name|{d}%}\n{time|({c})}',
      alignTo: 'labelLine',
      rich: {
        name: {
          fontFamily: 'Lato-Light'
        },
        time: {
          fontSize: '10px',
          fontFamily: 'Lato-Light',
          color: '#999'
        }
      },
      minMargin: 5,
      edgeDistance: 10,
      lineHeight: 15
    },
    labelLine: {
      show: true,
      smooth: 0, // 设置线不弯曲，避免重叠
      length: 15,
      length2: 0,
      maxSurfaceAngle: 80
    },
    labelLayout: function (params: any) {
      const pie_chart = echarts.init(pie_ref.value)
      const isLeft = params.labelRect.x < pie_chart.getWidth() / 2
      const points = params.labelLinePoints
      // Update the end point.
      points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
      return {
        labelLinePoints: points
      }
    }
  },
  legend: {
    data: Name,
    bottom: '1%',
    left: '8.5px',
    orient: 'vertival',
    itemHeight: 8, //修改icon图形大小
    icon: 'circle',
    textStyle: {
      fontSize: 10,
      color: '#646A73',
      fontFamily: 'Lato-Light'
    }
  }
})

onMounted(() => {
  initChart()
  clickParams()
})
const emits = defineEmits(['ClickParams'])
const paramsdata = ref()
const clickParams = () => {
  const pie_chart = echarts.init(pie_ref.value)
  // 监听点击事件
  pie_chart.on('click', function (params) {
    paramsdata.value = params.data
    emits('ClickParams')
  })
}
const initChart = () => {
  const pie_chart = echarts.init(pie_ref.value)
  pie_chart.setOption(initOption)
  //图表响应式
  window.addEventListener('resize', () => {
    pie_chart.resize()
  })
}
defineExpose({
  paramsdata
})
</script>

<template>
  <div class="com-container">
    <div ref="pie_ref" id="pie_chart"></div>
  </div>
</template>

<style lang="scss" scoped>
.com-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
#pie_chart {
  width: 100%;
  height: 300px;
}
</style>
