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

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

/* --------------- data --------------- */
// #region
const data = ref([
  {
    name: '小麦',
    value: 60.8,
  },
  {
    name: '荞麦',
    value: 44.4,
  },
  {
    name: '贡菜',
    value: 24.3,
  },
  {
    name: '油菜',
    value: 32.7,
  },
  {
    name: '马铃薯',
    value: 32.9,
  },
  {
    name: '玉米',
    value: 32.1,
  },
]);
const option = reactive({
  opacity: 0.6,
  itemGap: 0.2,
  legendSuffix: '万亩',
  itemHeight: 120,
  grid3D: {
    show: false,
    boxHeight: 5,
    top: '0',
    left: '-20%',
    viewControl: {
      //3d效果可以放大、旋转等，请自己去查看官方配置
      alpha: 30, //角度(这个很重要 调节角度的)
      distance: 260, //调整视角到主体的距离，类似调整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>
