政务云大屏修改

new-digital-agriculture-screen/src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue

@@ -9,16 +9,13 @@ import { useEcharts } from '@/hooks/useEcharts';
 
 defineOptions({ name: 'NewHyalineCake' });
 
-// 记录当前选中和高亮的系列索引
 let selectedIndex = null;
 let hoveredIndex = null;
 
-// 定义组件 props
 const props = defineProps({
   chartData: {
     type: Array,
     default: () => [
-      // 默认示例数据
       { name: '项目一', value: 60 },
       { name: '项目二', value: 44 },
       { name: '项目三', value: 32 },
@@ -27,8 +24,8 @@ const props = defineProps({
   option: {
     type: Object,
     default: () => ({
-      k: 1, // 控制内外径关系的系数，1 表示无内径（实心饼），值越小内径越大
+      k: 1, // 控制内外径关系的系数，1 表示无内径，值越小内径越大
-      itemGap: 0.1, // 扇形边缘向外偏移距离比例（用于选中效果）,扇形的间距，单位视图坐标，可调
+      itemGap: 0.1, // 扇形的间距
       itemHeight: 120, // 扇形高度（影响z轴拉伸程度）
       autoItemHeight: 0, // 自动计算扇形高度时使用的系数（>0时 itemHeight 失效，使用 autoItemHeight * value ）
       opacity: 0.6, // 透明度设置
@@ -46,15 +43,11 @@ const props = defineProps({
   },
 });
 
-// 声明组件触发的事件
 const emit = defineEmits(['click']);
 
-// 绑定到DOM的容器引用
 const chartRef = ref(null);
-// 使用 useEcharts 钩子初始化 ECharts 实例，并获取控制方法
 const { setOptions, getInstance } = useEcharts(chartRef);
 
-// 存储当前的 ECharts 配置项
 const chartOption = ref({});
 
 /**
@@ -69,8 +62,7 @@ const chartOption = ref({});
  * @return {Object} parametric 曲面方程
  */
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h, offsetZ = 0) {
-  console.log('getParametricEquation params :>> ', startRatio, endRatio, isSelected, isHovered, k, h, offsetZ);
+  // console.log('getParametricEquation params :>> ', startRatio, endRatio, isSelected, isHovered, k, h, offsetZ);
-  // 中心弧度用于计算偏移方向
   const midRatio = (startRatio + endRatio) / 2;
   const startRadian = startRatio * Math.PI * 2;
   const endRadian = endRatio * Math.PI * 2;
@@ -89,7 +81,6 @@ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h
   // 计算高亮时的放大比例（未高亮时为1）
   const hoverRate = isHovered ? 1.05 : 1;
 
-  // 返回 parametric 曲面方程
   return {
     u: {
       // u 参数控制饼的周向角度：从 -π 到 3π，可以完整绘制一圈
@@ -155,10 +146,6 @@ function getPie3D(pieData, internalDiameterRatio) {
 
   const k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
 
-  // 计算总值
-  // pieData.forEach((item) => {
-  //   sumValue += item.value;
-  // });
   // 构建每个扇形的 series 数据
   for (let i = 0; i < pieData.length; i += 1) {
     sumValue += pieData[i].value;
@@ -169,16 +156,19 @@ function getPie3D(pieData, internalDiameterRatio) {
       parametric: true,
       wireframe: { show: false },
       pieData: pieData[i],
-      // itemStyle: {
-      //   opacity: props.option.opacity,
-      //   borderRadius: 300,
-      //   borderColor: '#fff',
-      // }
       pieStatus: {
         selected: true,
         hovered: false,
         k,
       },
+      label: {
+        show: true,
+        formatter: () => `${pieData[i].value}`, // 直接显示 value
+        position: 'outside', // 标签位置
+        distance: 10, // 距扇形边缘的距离
+        color: '#fff', // 根据背景色调整
+        fontSize: 14,
+      },
     };
     if (typeof pieData[i].itemStyle !== 'undefined') {
       const { itemStyle } = pieData[i];
@@ -191,7 +181,7 @@ function getPie3D(pieData, internalDiameterRatio) {
   }
   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-  console.log(series);
+  // console.log(series);
   for (let i = 0; i < series.length; i += 1) {
     endValue = startValue + series[i].pieData.value;
 
@@ -301,7 +291,7 @@ function getPie3D(pieData, internalDiameterRatio) {
 
 // 监听 mouseover，近似实现高亮（放大）效果
 function handleMouseover(params) {
-  console.log('mouseover');
+  // console.log('mouseover');
   const idx = params.seriesIndex;
   const series = chartOption.value.series;
 
@@ -418,19 +408,10 @@ function handleClick(params) {
   series[idx].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h);
   series[idx].pieStatus.selected = isSelected;
 
-  // 更新记录选中的系列索引
   selectedIndex = isSelected ? idx : null;
-
-  // 更新图表配置
   setOptions(optionVal);
-  // 触发组件 click 事件供父组件使用
   emit('click', params);
 }
-// 在函数顶部声明（确保作用域覆盖所有需要的地方）
-window.debugZValues = {
-  current: null,
-  history: [],
-};
 
 // 组件挂载后绑定事件
 onMounted(() => {

new-digital-agriculture-screen/src/views/inputs/components/inputsOne.vue

@@ -42,16 +42,46 @@ const state = reactive({
       icon: 'rect',
       left: 'center',
       textStyle: {
-        color: '#fff', // 根据你的主题调整颜色
+        color: '#fff',
-        fontSize: 14,
+        fontSize: 16,
-      },
-      itemStyle: {
-        display: 'float',
-        top: '120px',
-        backgroundColor: 'rgba(255, 255, 255, 0.2)',
       },
       formatter: (name) => name,
     },
+    // series: [
+    //   {
+    //     type: 'pie3D',
+    //     center: ['50%', '50%'],
+    //     radius: ['40%', '60%'],
+    //     avoidLabelOverlap: false,
+    //     label: {
+    //       normal: {
+    //         formatter: (params) => {
+    //           return params.value + '%';
+    //         },
+    //         padding: [0, -100, 25, -100],
+    //         rich: {
+    //           icon: {
+    //             fontSize: 16,
+    //           },
+    //           name: {
+    //             fontSize: 14,
+    //             padding: [0, 10, 0, 4],
+    //             color: '#666666',
+    //           },
+    //           value: {
+    //             fontSize: 18,
+    //             fontWeight: 'bold',
+    //             color: '#333333',
+    //           },
+    //         },
+    //       },
+    //     },
+    //     labelLine: {
+    //       show: false,
+    //     },
+    //     data: [],
+    //   },
+    // ],
   },
   data: [
     { value: 76, name: '产业运营平台' },