67 lines
1.4 KiB
Vue
67 lines
1.4 KiB
Vue
<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>
|