104 lines
2.5 KiB
Vue
104 lines
2.5 KiB
Vue
<template>
|
||
<customEchartHyalineCake ref="chartRef" :chart-data="data" height="100%" :option="option" />
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { reactive, ref, onMounted } from 'vue';
|
||
const chartRef = ref(null);
|
||
|
||
/* --------------- data右上侧饼图 --------------- */
|
||
// #region
|
||
const data = ref([
|
||
{
|
||
name: '农企/合作社',
|
||
value: 10.8,
|
||
itemStyle: { color: '#5b7bc7', opacity: 0.8 },
|
||
},
|
||
// {
|
||
// name: ' 合作社',
|
||
// value: 18.4,
|
||
// itemStyle: { color: '#8ed0f3', opacity: 0.8 },
|
||
// },
|
||
// {
|
||
// name: ' 村集体',
|
||
// value: 14.3,
|
||
// itemStyle: { color: '#65be97', opacity: 0.8 },
|
||
// },
|
||
{
|
||
name: '农户',
|
||
value: 23.7,
|
||
itemStyle: { color: '#f0c94d', opacity: 0.8 },
|
||
},
|
||
]);
|
||
|
||
let itemGapWith = ref(0);
|
||
const getChartrefWith = () => {
|
||
let len = data.value.length * 2;
|
||
return chartRef.value.$refs.chartRef.offsetWidth / len + 8;
|
||
};
|
||
|
||
const option = reactive({
|
||
k: 0.2,
|
||
opacity: 0.4,
|
||
itemGap: 0,
|
||
autoItemHeight: 3,
|
||
legend: {
|
||
type: 'plain',
|
||
orient: 'horizontal',
|
||
width: '100%',
|
||
bottom: 10,
|
||
left: 'center',
|
||
itemWidth: 16,
|
||
itemHeight: 16,
|
||
itemGap: itemGapWith.value ? itemGapWith.value : 50,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '16px',
|
||
},
|
||
},
|
||
title: {
|
||
text: '23亿元',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '26px',
|
||
fontWeight: 'bold',
|
||
},
|
||
subtext: '22.2%',
|
||
subtextStyle: {
|
||
color: '#02FD94',
|
||
fontSize: '18px',
|
||
},
|
||
top: '26%',
|
||
left: 'center',
|
||
},
|
||
grid3D: {
|
||
show: false,
|
||
boxHeight: 3,
|
||
top: '-15%', //调整距离顶部距离，0是在中间
|
||
left: 'center',
|
||
viewControl: {
|
||
//3d效果可以放大、旋转等，请自己去查看官方配置
|
||
alpha: 36, //角度(这个很重要 调节角度的)
|
||
distance: 130, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
||
rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
|
||
zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
|
||
panSensitivity: 10, //设置平移灵敏度，0无法平移
|
||
autoRotate: true, //自动旋转
|
||
autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
|
||
},
|
||
},
|
||
});
|
||
// #endregion
|
||
|
||
/* --------------- methods --------------- */
|
||
// #region
|
||
|
||
// #endregion
|
||
onMounted(() => {
|
||
itemGapWith.value = getChartrefWith();
|
||
option.legend.itemGap = itemGapWith.value ? itemGapWith.value : 50;
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|