<template>
  <new-hyaline-cake height="100%" :chart-data="state.data" :option="state.option" />
</template>

<script setup>
import { reactive, watch } from 'vue';
import { isEmpty } from '@/utils';

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

const state = reactive({
  option: {
    k: 0,
    opacity: 1,
    itemGap: 0.2,
    legendSuffix: '万亩',
    itemHeight: 200,
    grid3D: {
      show: false,
      boxHeight: 3,
      top: '0',
      left: '-20%',
      viewControl: {
        //3d效果可以放大、旋转等，请自己去查看官方配置
        alpha: 45, //角度(这个很重要 调节角度的)
        distance: 300, //调整视角到主体的距离，类似调整zoom(这是整体大小)
        rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
        zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
        panSensitivity: 10, //设置平移灵敏度，0无法平移
        autoRotate: false, //自动旋转
        autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
      },
    },
  },
  data: [],
});

watch(
  () => props.data,
  (val) => {
    if (!isEmpty(val)) {
      state.data = val;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
