56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<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.5,
|
||
opacity: 1,
|
||
itemGap: 0.1,
|
||
legendSuffix: '万亩',
|
||
itemHeight: 200,
|
||
grid3D: {
|
||
show: false,
|
||
boxHeight: 1,
|
||
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>
|