<template>
  <customEchartHyalineCake ref="chartRef" :chart-data="data" height="100%" :option="option" />
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
const chartRef = ref(null);

/* --------------- data右上侧饼图 --------------- */
// #region
const data = ref([
  {
    name: '农企/合作社',
    value: 10.8,
    itemStyle: { color: '#5b7bc7', opacity: 0.8 },
  },
  // {
  //   name: ' 合作社',
  //   value: 18.4,
  //   itemStyle: { color: '#8ed0f3', opacity: 0.8 },
  // },
  // {
  //   name: ' 村集体',
  //   value: 14.3,
  //   itemStyle: { color: '#65be97', opacity: 0.8 },
  // },
  {
    name: '农户',
    value: 23.7,
    itemStyle: { color: '#f0c94d', opacity: 0.8 },
  },
]);

let itemGapWith = ref(0);
const getChartrefWith = () => {
  let len = data.value.length * 2;
  return chartRef.value.$refs.chartRef.offsetWidth / len + 8;
};

const option = reactive({
  k: 0.2,
  opacity: 0.4,
  itemGap: 0,
  autoItemHeight: 3,
  legend: {
    type: 'plain',
    orient: 'horizontal',
    width: '100%',
    bottom: 10,
    left: 'center',
    itemWidth: 16,
    itemHeight: 16,
    itemGap: itemGapWith.value ? itemGapWith.value : 50,
    textStyle: {
      color: '#fff',
      fontSize: '16px',
    },
  },
  title: {
    text: '23亿元',
    textStyle: {
      color: '#fff',
      fontSize: '26px',
      fontWeight: 'bold',
    },
    subtext: '22.2%',
    subtextStyle: {
      color: '#02FD94',
      fontSize: '18px',
    },
    top: '26%',
    left: 'center',
  },
  grid3D: {
    show: false,
    boxHeight: 3,
    top: '-15%', //调整距离顶部距离，0是在中间
    left: 'center',
    viewControl: {
      //3d效果可以放大、旋转等，请自己去查看官方配置
      alpha: 36, //角度(这个很重要 调节角度的)
      distance: 130, //调整视角到主体的距离，类似调整zoom(这是整体大小)
      rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
      zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
      panSensitivity: 10, //设置平移灵敏度，0无法平移
      autoRotate: true, //自动旋转
      autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
    },
  },
});
// #endregion

/* --------------- methods --------------- */
// #region

// #endregion
onMounted(() => {
  itemGapWith.value = getChartrefWith();
  option.legend.itemGap = itemGapWith.value ? itemGapWith.value : 50;
});
</script>

<style lang="scss" scoped></style>
