From 2b1875c2da2bd54593e6ea62da78bc21f9ef6f4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=AD=E6=B0=B8=E8=B6=85?= <2090205686@qq.com>
Date: Wed, 23 Jul 2025 17:19:33 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A5=BC=E5=9B=BE=E7=BB=84=E4=BB=B6=EF=BC=883D?=
=?UTF-8?q?=EF=BC=89=E4=BC=98=E5=8C=96=E6=8A=98=E7=BA=BF=E5=B1=95=E7=A4=BA?=
=?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../custom-echart-hyaline-cake/index.vue | 112 ++++++++++++++++++
.../inputs/components/inputsOne copy.vue | 108 +++++++++++++++++
.../src/views/inputs/components/inputsOne.vue | 66 +++--------
sub-operation-service/components.d.ts | 1 -
4 files changed, 239 insertions(+), 48 deletions(-)
create mode 100644 new-digital-agriculture-screen/src/views/inputs/components/inputsOne copy.vue
diff --git a/new-digital-agriculture-screen/src/components/custom-echart-hyaline-cake/index.vue b/new-digital-agriculture-screen/src/components/custom-echart-hyaline-cake/index.vue
index 0a25acf..89b5450 100644
--- a/new-digital-agriculture-screen/src/components/custom-echart-hyaline-cake/index.vue
+++ b/new-digital-agriculture-screen/src/components/custom-echart-hyaline-cake/index.vue
@@ -52,6 +52,11 @@ export default {
type: Boolean,
default: false,
},
+ // 是否展示折线（按需调整grid3D.viewControl.beta可以调整折线显示效果）
+ isShowLine: {
+ type: Boolean,
+ default: false,
+ },
},
emits: ['click'],
setup(props, { emit }) {
@@ -180,6 +185,19 @@ export default {
startValue = endValue;
legendData.push(series[i].name);
}
+
+ // 添加折线显示lable
+ if (props.isShowLine) {
+ series.forEach((item, index) => {
+ let {
+ itemStyle: { color },
+ pieData: { startRatio, endRatio, value },
+ } = item;
+
+ addLabelLine(series, startRatio, endRatio, value, k, index, color);
+ });
+ }
+
const option = Object.assign(
{
tooltip: {
@@ -289,6 +307,100 @@ export default {
function onClick(params) {
emit('click', params);
}
+
+ //添加label指示线
+ /**
+ * @param {*} series 配置
+ * @param {*} startRatio 扇形起始位置比例
+ * @param {*} endRatio 扇形结束位置比例
+ * @param {*} value 数值
+ * @param {*} k 辅助参数，饼图半径相关
+ * @param {*} i 在series中索引
+ * @param {*} color 指示线颜色
+ */
+ function addLabelLine(series, startRatio, endRatio, value, k, i, color = '#fff') {
+ // 计算扇形中心弧度
+ const midRadian = (startRatio + endRatio) * Math.PI;
+ const radius = 1 + k; // 外径
+
+ // 1. 计算起点位置（扇形边缘）
+ const startPos = [Math.cos(midRadian) * radius, Math.sin(midRadian) * radius, 0.1 * value];
+
+ // 2. 智能方向判断（通用逻辑）
+ const isRightHalf = Math.cos(midRadian) > 0;
+ const isTopHalf = Math.sin(midRadian) > 0;
+
+ // 3. 动态计算折线长度（根据数据条数自适应）
+ const baseLength = 0.5 + 0.05 * (1 - series.length / 10); // 动态基准长度
+ const lineSegment1 = baseLength * 0.8; // 第一段长度（径向）
+ const lineSegment2 = baseLength * 1.2; // 第二段长度（水平）
+
+ // 4. 两段式折线计算
+ // 第一段：径向延伸
+ const turningPos = [startPos[0] + Math.cos(midRadian) * lineSegment1, startPos[1] + Math.sin(midRadian) * lineSegment1, startPos[2]];
+
+ // 第二段：水平延伸（带防重叠偏移）
+ const endPos = [
+ turningPos[0] + (isRightHalf ? lineSegment2 : -lineSegment2),
+ turningPos[1] + (isTopHalf ? -0.1 : 0.1) * (1 + i * 0.03), // 动态垂直偏移
+ turningPos[2],
+ ];
+
+ // 5. 文字位置二次偏移（确保在饼图两侧）
+ const textPos = [
+ endPos[0] * (isRightHalf ? 1.1 : 0.9), // 左右强化偏移
+ endPos[1] + (isTopHalf ? -0.05 : 0.05),
+ endPos[2],
+ ];
+
+ // 添加到series（白色折线+透明文字）
+ series.push(
+ {
+ type: 'line3D',
+ lineStyle: {
+ color: '#ffffff', // 强制白色折线
+ width: 1.8,
+ opacity: 0.8,
+ },
+ data: [startPos, turningPos],
+ zlevel: 10,
+ },
+ {
+ type: 'line3D',
+ lineStyle: {
+ color: '#ffffff', // 白色折线
+ width: 1.8,
+ opacity: 0.6,
+ },
+ data: [turningPos, endPos],
+ zlevel: 10,
+ },
+ {
+ type: 'scatter3D',
+ label: {
+ show: true,
+ position: isRightHalf ? 'right' : 'left',
+ distance: 5,
+ textStyle: {
+ color: color, // 文字颜色保持与扇区一致
+ fontSize: 14,
+ // fontWeight: 'bold',
+ backgroundColor: 'transparent', // 完全透明
+ },
+ formatter: `{b}\n${value} ${props.option.legendSuffix ?? ''}`, // 通用数据展示
+ },
+ symbolSize: 0,
+ data: [
+ {
+ name: series[i].name,
+ value: textPos, // 使用计算后的文字位置
+ },
+ ],
+ zlevel: 11,
+ }
+ );
+ }
+
return { chartRef };
},
};
diff --git a/new-digital-agriculture-screen/src/views/inputs/components/inputsOne copy.vue b/new-digital-agriculture-screen/src/views/inputs/components/inputsOne copy.vue
new file mode 100644
index 0000000..13fbb4a
--- /dev/null
+++ b/new-digital-agriculture-screen/src/views/inputs/components/inputsOne copy.vue
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+
diff --git a/new-digital-agriculture-screen/src/views/inputs/components/inputsOne.vue b/new-digital-agriculture-screen/src/views/inputs/components/inputsOne.vue
index 13fbb4a..a69602c 100644
--- a/new-digital-agriculture-screen/src/views/inputs/components/inputsOne.vue
+++ b/new-digital-agriculture-screen/src/views/inputs/components/inputsOne.vue
@@ -1,30 +1,33 @@
-
-
+
+
+
@@ -94,7 +66,7 @@ const state = reactive({
width: 270px;
height: 40px;
line-height: 40px;
- margin: 24px auto 0;
+ margin: 10px auto 0;
background-image: url('@/assets/images/inputs/bg_title.png');
background-position: center bottom;
background-repeat: no-repeat;
diff --git a/sub-operation-service/components.d.ts b/sub-operation-service/components.d.ts
index 8dca9c7..1e52722 100644
--- a/sub-operation-service/components.d.ts
+++ b/sub-operation-service/components.d.ts
@@ -12,7 +12,6 @@ declare module 'vue' {
BreadComp: typeof import('./src/components/breadComp.vue')['default']
CenterMap: typeof import('./src/components/centerMap.vue')['default']
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
- copy: typeof import('./src/components/custom-scroll-title copy/index.vue')['default']
CostomImg: typeof import('./src/components/costomImg.vue')['default']
CustomBack: typeof import('./src/components/customBack.vue')['default']
CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']