<template>
  <div :id="id" style="width: 100%; height: 100%" />
</template>

<script>
import HighCharts from "highcharts";
import { guid } from "@/utils/util";
import { reactive, toRefs, onMounted, watch } from "vue";
export default {
  name: annularChart,
  props: {
    chartData: Array,
  },
  setup(props) {
    const state = reactive({
      id: guid(),
      chart: null,
    });
    const init=()=>{

    }
    onMounted(()=>{
        init()
    })
    return{
        ...toRefs(state),
        init,
    }
  },
  //   methods: {
  //     initChart() {
  //       let that = that;
  //       HighCharts.chart(this.$el, {
  //         chart: {
  //           type: "pie", //饼图
  //           backgroundColor: "transparent",
  //           options3d: {
  //             enabled: true, //使用3d功能
  //             alpha: 45, //延y轴向内的倾斜角度
  //           },
  //         },
  //         title: {
  //           style: {
  //             color: "transparent",
  //           },
  //         },
  //         credits: {
  //           enabled: false, // 禁用版权信息
  //         },
  //         tooltip: {
  //           formatter: function () {
  //             var s = "" + this.point.name + "</b>";
  //             s += "<br/>" + this.point.y;
  //             s += "<br/>" + this.percentage.toFixed(1) + "%";
  //             return s;
  //           },
  //           animation: true, // 是否启用动画效果
  //           style: {
  //             // 文字内容相关样式\
  //             fontSize: "24px",
  //             fontFamily: "Alibaba PuHuiTi",
  //           },
  //         },
  //         plotOptions: {
  //           pie: {
  //             innerSize: 150,
  //             allowPointSelect: true, //每个扇块能否选中
  //             cursor: "pointer", //鼠标指针
  //             depth: 100, //饼图的厚度
  //             dataLabels: {
  //               enabled: true, //是否显示饼图的线形tip
  //               style: {
  //                 color: "rgba(93, 245, 255, 1)",
  //                 fontSize: "20px",
  //                 fontWeight: "500",
  //               },
  //             },
  //             events: {
  //               click: function (e) {
  //                 switch (e.point.name) {
  //                   case "已办证":
  //                     this.pramas = {
  //                       isCertificate: 1,
  //                     };
  //                     break;
  //                   case "未办证":
  //                     this.pramas = {
  //                       isCertificate: 0,
  //                     };
  //                     break;
  //                   case "重点":
  //                     this.pramas = {
  //                       isKeyPoint: 1,
  //                     };
  //                     break;
  //                   case "非重点":
  //                     this.pramas = {
  //                       isKeyPoint: 0,
  //                     };
  //                     break;
  //                   default:
  //                     this.pramas = {
  //                       areaName: e.point.name,
  //                     };
  //                 }
  //                 testFun(this.pramas);
  //               },
  //             },
  //           },
  //         },
  //         series: [
  //           {
  //             type: "pie",
  //             // data: [
  //             //   ['测试1', 12], //模块名和所占比，也可以{name: '测试1',y: 12}
  //             //   ['测试2', 23],
  //             // ],
  //             data: this.chartData,
  //             dataLabels: {
  //               enabled: true,
  //               connectorColor: "rgba(93, 245, 255, 1)", // 连接线颜色，默认是扇区颜色
  //               distance: 40, // 数据标签与扇区距离
  //               formatter: function (val) {
  //                 //通过函数判断是否显示数据标签，为了防止数据标签过于密集
  //                 return (
  //                   this.point.name + "<br/> " + this.percentage.toFixed(1) + "%"
  //                 );
  //               },
  //             },
  //             colors: [
  //               "rgba(50, 206, 228, .8)",
  //               "rgba(207, 160, 36, .8)",
  //               "rgba(23, 213, 171, .8)",
  //               "rgba(243, 100, 100, .8)",
  //               "rgba(9, 145, 253, .8)",
  //             ],
  //           },
  //         ],
  //       });
  //     },
  //     // vue内部方法
  //     testFun(value) {
  //       this.$emit("pramas", value);
  //       this.$parent.clickTreatment();
  //     },
  //   },
};
</script>

<style>
</style>