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

<script lang="ts" setup>
import { reactive, ref } from 'vue';

/* --------------- data --------------- */
// #region
const data = ref([
  {
    name: '企业',
    value: 10.8,
  },
  {
    name: '合作社',
    value: 8.4,
  },
  {
    name: '村集体',
    value: 4.3,
  },
  {
    name: '个体',
    value: 3.7,
  },
]);
const option = reactive({
  k: 0.2,
  opacity: 0.6,
  itemGap: 0,
  autoItemHeight: 3,
  legend: {
    orient: 'horizontal',
    bottom: 10,
    left: 'center',
  },
  title: {
    text: '23亿元',
    textStyle: {
      color: '#fff',
      fontSize: '26px',
      fontWeight: 'bold',
    },
    subtext: '22.2%',
    subtextStyle: {
      color: '#02FD94',
      fontSize: '18px',
    },
    top: 'center',
    left: 'center',
  },
  grid3D: {
    show: false,
    boxHeight: 5,
    top: 'center',
    left: 'center',
    viewControl: {
      //3d效果可以放大、旋转等，请自己去查看官方配置
      alpha: 30, //角度(这个很重要 调节角度的)
      distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
      rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
      zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
      panSensitivity: 10, //设置平移灵敏度，0无法平移
      autoRotate: true, //自动旋转
      autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
    },
  },
});
// #endregion

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

// #endregion
</script>

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