79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<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>
|