109 lines
2.9 KiB
Vue
109 lines
2.9 KiB
Vue
<template>
|
||
<div class="inputs">
|
||
<h2 class="inputs-title">全县投入品数量：291.85万吨</h2>
|
||
<new-hyaline-cake :chart-data="state.data" :option="state.option" :width="'100%'" :height="'188px'" />
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { reactive, watch } from 'vue';
|
||
const state = reactive({
|
||
option: {
|
||
k: 0,
|
||
opacity: 0.8,
|
||
itemGap: 0.1,
|
||
// legendSuffix: '万吨',
|
||
itemHeight: 200,
|
||
startAngle: 60,
|
||
grid3D: {
|
||
show: false,
|
||
boxHeight: 2,
|
||
top: '-20',
|
||
bottom: '10',
|
||
// left: '-20%',
|
||
viewControl: {
|
||
//3d效果可以放大、旋转等，请自己去查看官方配置
|
||
alpha: 40, //角度(这个很重要 调节角度的)
|
||
beta: -40,
|
||
distance: 260, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
||
rotateSensitivity: 0, //设置旋转灵敏度，为0无法旋转
|
||
zoomSensitivity: 0, //设置缩放灵敏度，为0无法缩放
|
||
panSensitivity: 0, //设置平移灵敏度，0无法平移
|
||
autoRotate: false, //自动旋转
|
||
autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
|
||
},
|
||
},
|
||
legend: {
|
||
show: true,
|
||
top: 'bottom',
|
||
orient: 'horizontal',
|
||
itemWidth: 12, // 矩形宽度
|
||
itemHeight: 12, // 矩形高度
|
||
itemGap: 20,
|
||
icon: 'rect',
|
||
left: 'center',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 16,
|
||
},
|
||
formatter: (name) => name,
|
||
},
|
||
pie2dConfig: {
|
||
center: ['50%', '40%'],
|
||
label: {
|
||
show: true,
|
||
position: 'outside',
|
||
formatter: (params) => {
|
||
const total = 221.8 + 70.01; // 或动态计算
|
||
const percent = ((params.value / total) * 100).toFixed(0);
|
||
return `{name|${params.name}}\n{value|${params.value} 万吨\n（${percent}%）}`;
|
||
},
|
||
rich: {
|
||
name: {
|
||
fontSize: 16,
|
||
fontWeight: 'bold',
|
||
color: '#ffffff',
|
||
lineHeight: 20,
|
||
align: 'center',
|
||
},
|
||
value: {
|
||
fontSize: 16,
|
||
color: '#79F5AF',
|
||
lineHeight: 18,
|
||
align: 'center',
|
||
},
|
||
},
|
||
color: '#fff',
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
length: 40,
|
||
length2: 40,
|
||
lineStyle: { color: '#fff', width: 2 },
|
||
},
|
||
},
|
||
},
|
||
data: [
|
||
{ value: 221.8, name: '产业运营平台' },
|
||
{ value: 70.01, name: '其它', floatZ: 1 },
|
||
],
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.inputs {
|
||
&-title {
|
||
width: 270px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
margin: 24px auto 0;
|
||
background-image: url('@/assets/images/inputs/bg_title.png');
|
||
background-position: center bottom;
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
font-size: 20px;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|