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

<script>
import { guid } from '@/utils/util';
import HighCharts from 'highcharts';
import { reactive, toRefs, onMounted, watch, nextTick } from 'vue';
export default {
  name: 'Pie7Chart',
  setup(props) {
    const state = reactive({
      id: guid(),
      chart: null,
      chartData: [
        // ['香蕉', 8],
        // ['猕猴桃', 3],
      ],
    });
    const resizeTheChart = () => {
      if (state.chart) {
        state.chart.zoom();
      }
    };
    const initData = () => {
      // 图表配置
      let options = {
        chart: {
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0,
          },
          backgroundColor: 'transparent',
        },
        title: {
          style: {
            color: 'transparent',
          },
        },
        credits: {
          //关闭版权信息的标签
          enabled: false,
        },
        tooltip: {
          backgroundColor: '#F5F8FA',
          borderColor: 'transparent',
          formatter: function () {
            var s = this.point.options.name + ':' + this.point.options.y;
            return s;
          },
          animation: true, // 是否启用动画效果
          style: {
            // 文字内容相关样式\
            fontSize: '14px',
            fontFamily: 'Alibaba PuHuiTi',
            color: '#666666',
          },
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 55,
            showInLegend: true,

            dataLabels: {
              enabled: true,
              style: {
                color: 'rgba(93, 245, 255, 1)',
                fontSize: '12px',
                fontWeight: '500',
              },
            },
            center: ['50%', '10%'],
          },
        },
        legend: {
          align: 'left',
          layout: 'vertical',
          verticalAlign: 'top', //垂直标的目标地位
          x: 20,
          width: 160,
          symbolHeight: 10,
          symbolPadding: 10,
          symbolRadius: 0,
          symbolWidth: 10,
          itemStyle: {
            color: 'rgba(166, 201, 203, 1)',
            fontSize: '12px',
            fontWeight: 500,
          },
          itemMarginBottom: 3,
          navigation: {
            enabled: false,
          },
          itemHoverStyle: {
            color: '#fff',
          },
          labelFormatter: function () {
            let str = '';
            str += `<div style="display:flex; align-items:center;just-content:space-around;">
            <div>${this.options.name}</div> <div>${this.options.y}%</div>
            </div>`;
            return str;
          },
        },
        series: [
          {
            type: 'pie',
            size: '120%',
            zIndex: 1,
            data: state.chartData,
            dataLabels: {
              //牵引线不显示
              enabled: false,
            },
            colors: [
              '#4ce6e4',
              '#f88300',
              '#67a4e1',
              '#a48fbd',
              '#e5ba52',
              '#fff529',
              '#f3a2bf',
              '#e4894c',
              '#58a3d7',
              '#48b3af',
              '#6ec859',
            ],
          },
        ],
      };
      // 图表初始化函数
      state.chart = HighCharts.chart('Pie7Chart', options);
      window.addEventListener('resize', resizeTheChart);
    };
    onMounted(() => {
      nextTick(() => {
        window.addEventListener('resize', resizeTheChart);
      });
    });
    return {
      ...toRefs(state),
      resizeTheChart,
      initData,
    };
  },
};
</script>

<style lang="less">
#Pie7Chart {
  position: relative;
  .highcharts-container {
    top: 40px;
    position: absolute;
  }
  .legend {
    position: absolute;
    top: -7px;
    ul {
      padding: 0 10px;
      li {
        // display: flex;
        // align-items: center;
        line-height: 30px;
        .color {
          margin-top: 10px;
          float: left;
          width: 10px;
          height: 10px;
          &.class0 {
            background: #4ce6e4;
          }
          &.class1 {
            background: #f88300;
          }
          &.class2 {
            background: #67a4e1;
          }
          &.class3 {
            background: #a48fbd;
          }
          &.class4 {
            background: #e5ba52;
          }
          &.class5 {
            background: #fff529;
          }
        }
        .name {
          margin: 0 20px;
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #d5fffe;
        }
        .value {
          font-size: 16px;
          font-family: DIN;
          font-weight: 500;
          color: #ffffff;
          float: right;
        }
      }
    }
  }
}
</style>