土地资源

components.d.ts

@@ -42,6 +42,9 @@ declare module 'vue' {
     CustomScrollTitle: typeof import('./src/components/custom-scroll-title/index.vue')['default']
     CustomTableOperate: typeof import('./src/components/custom-table-operate/index.vue')['default']
     CustomTableTree: typeof import('./src/components/custom-table-tree/index.vue')['default']
+    IndexCo: typeof import('./src/components/custom-echart-line/index-co.vue')['default']
+    IndexRe: typeof import('./src/components/new-hyaline-cake/index-re.vue')['default']
+    NewHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SubTop: typeof import('./src/components/subTop.vue')['default']

src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue

@@ -0,0 +1,463 @@
+<template>
+  <div ref="chartRef" :style="{ width: width, height: height }"></div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, nextTick } from 'vue';
+import { cloneDeep } from 'lodash';
+import { useEcharts } from '@/hooks/useEcharts';
+
+defineOptions({ name: 'NewHyalineCake' });
+
+// 定义组件 props
+const props = defineProps({
+  chartData: {
+    type: Array,
+    default: () => [
+      // 默认示例数据
+      { name: '项目一', value: 60 },
+      { name: '项目二', value: 44 },
+      { name: '项目三', value: 32 },
+    ],
+  },
+  option: {
+    type: Object,
+    default: () => ({
+      // 控制内外径关系的系数，1 表示无内径（实心饼），值越小内径越大
+      k: 1,
+      // 扇形边缘向外偏移距离比例（用于选中效果），单位视图坐标，可调
+      itemGap: 0.2,
+      // 扇形高度（影响z轴拉伸程度）
+      itemHeight: 120,
+      // 自动计算扇形高度时使用的系数（>0时 itemHeight 失效，使用 autoItemHeight * value ）
+      autoItemHeight: 0,
+      // 透明度设置
+      opacity: 0.6,
+      // 图例后缀
+      legendSuffix: '',
+    }),
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: '100%',
+  },
+});
+
+// 声明组件触发的事件
+const emit = defineEmits(['click']);
+
+// 绑定到DOM的容器引用
+const chartRef = ref(null);
+// 使用 useEcharts 钩子初始化 ECharts 实例，并获取控制方法
+const { setOptions, getInstance } = useEcharts(chartRef);
+
+// 存储当前的 ECharts 配置项
+const chartOption = ref({});
+
+// 参数方程函数：生成每个扇形曲面的参数方程，用于 series-surface.parametricEquation
+function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+  // 中心弧度用于计算偏移方向
+  const midRatio = (startRatio + endRatio) / 2;
+  const startRadian = startRatio * Math.PI * 2;
+  const endRadian = endRatio * Math.PI * 2;
+  const midRadian = midRatio * Math.PI * 2;
+
+  // 如果整个饼只剩一个扇形，则不实现选中效果
+  if (startRatio === 0 && endRatio === 1) {
+    isSelected = false;
+  }
+  // k 取默认值 1/3（环的厚度比例），如果传入 k 则使用传入值
+  k = typeof k !== 'undefined' ? k : 1 / 3;
+
+  // 计算选中效果的偏移量（基于扇形中心角度）
+  const offsetX = Math.cos(midRadian) * props.option.itemGap;
+  const offsetY = Math.sin(midRadian) * props.option.itemGap;
+  // 计算高亮时的放大比例（未高亮时为1）
+  const hoverRate = isHovered ? 1.08 : 1;
+
+  // 返回 parametric 曲面方程
+  return {
+    u: {
+      // u 参数控制饼的周向角度：从 -π 到 3π，可以完整绘制一圈
+      min: -Math.PI,
+      max: Math.PI * 3,
+      step: Math.PI / 32,
+    },
+    v: {
+      // v 参数控制扇形的径向方向（厚度方向）
+      min: 0,
+      max: Math.PI * 2,
+      step: Math.PI / 20,
+    },
+    x(u, v) {
+      // 如果在起始弧度之前，保持扇形起点的半径
+      if (u < startRadian) {
+        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      // 如果在结束弧度之后，保持扇形终点的半径
+      if (u > endRadian) {
+        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      // 扇形中间部分正常绘制
+      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+    y(u, v) {
+      if (u < startRadian) {
+        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      if (u > endRadian) {
+        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+    z(u, v) {
+      // 在 u < -π/2 时，防止出现不必要的翻转，直接使用基本正弦
+      if (u < -Math.PI * 0.5) {
+        return Math.sin(u);
+      }
+      // 在 u > 2.5π 时，处理扇形尾部厚度
+      if (u > Math.PI * 2.5) {
+        return Math.sin(u) * h * 0.1;
+      }
+      // 正常情况下，z 根据 v 参数控制上下表面的高度差
+      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    },
+  };
+}
+
+// 生成整个 3D 饼图的配置项
+function getPie3D(pieData) {
+  const series = [];
+  let sumValue = 0;
+  // 计算总值
+  pieData.forEach((item) => {
+    sumValue += item.value;
+  });
+
+  // k 为外径厚度系数
+  const k = props.option.k ?? 1;
+  // 构建每个扇形的 series 数据
+  pieData.forEach((dataItem, idx) => {
+    const seriesItem = {
+      name: dataItem.name ?? `series${idx}`,
+      type: 'surface',
+      parametric: true,
+      wireframe: { show: false },
+      pieData: dataItem,
+      itemStyle: {
+        opacity: props.option.opacity,
+        borderRadius: 300,
+        borderColor: '#fff',
+        borderWidth: 0,
+      },
+      pieStatus: {
+        selected: false,
+        hovered: false,
+        k,
+      },
+    };
+    // 合并自定义样式（如果有）
+    if (dataItem.itemStyle) {
+      const customStyle = {};
+      if (dataItem.itemStyle.color !== undefined) {
+        customStyle.color = dataItem.itemStyle.color;
+      }
+      if (dataItem.itemStyle.opacity !== undefined) {
+        customStyle.opacity = dataItem.itemStyle.opacity;
+      }
+      seriesItem.itemStyle = { ...seriesItem.itemStyle, ...customStyle };
+    }
+    series.push(seriesItem);
+  });
+
+  // 计算每个扇形的 startRatio/endRatio 和参数方程
+  let startValue = 0;
+  series.forEach((serie) => {
+    const endValue = startValue + serie.pieData.value;
+    const startRatio = startValue / sumValue;
+    const endRatio = endValue / sumValue;
+    serie.pieData.startRatio = startRatio;
+    serie.pieData.endRatio = endRatio;
+    // 初始均为未选中未高亮
+    serie.parametricEquation = getParametricEquation(
+      startRatio,
+      endRatio,
+      false,
+      true,
+      k,
+      // 扇形高度：根据配置自动计算或使用固定高度
+      props.option.autoItemHeight > 0 ? props.option.autoItemHeight * serie.pieData.value : props.option.itemHeight
+    );
+    startValue = endValue;
+  });
+
+  // 添加一个透明圆环，用于实现 hover 在扇形外面时取消高亮
+  series.push({
+    name: 'mouseoutSeries',
+    type: 'surface',
+    parametric: true,
+    wireframe: { show: false },
+    itemStyle: { opacity: 0 },
+    parametricEquation: {
+      u: { min: 0, max: Math.PI * 2, step: Math.PI / 20 },
+      v: { min: 0, max: Math.PI, step: Math.PI / 20 },
+      x(u, v) {
+        return Math.sin(v) * Math.sin(u) + Math.sin(u);
+      },
+      y(u, v) {
+        return Math.sin(v) * Math.cos(u) + Math.cos(u);
+      },
+      z(u, v) {
+        return Math.cos(v) > 0 ? 0.1 : -0.1;
+      },
+    },
+  });
+
+  // 基础配置：坐标轴、视角、图例、提示框等
+  const option = Object.assign(
+    {
+      tooltip: {
+        backgroundColor: 'rgba(18, 55, 85, 0.8)',
+        borderColor: '#35d0c0',
+        color: '#fff',
+        position: (point, params, dom, rect, size) => {
+          // 动态调整 tooltip 位置，避免溢出
+          let x = point[0],
+            y = point[1];
+          const [viewW, viewH] = size.viewSize;
+          const [boxW, boxH] = size.contentSize;
+          if (x + boxW > viewW) x -= boxW;
+          if (y + boxH > viewH) y -= boxH;
+          if (x < 0) x = 0;
+          if (y < 0) y = 0;
+          return [x, y];
+        },
+        formatter: (params) => {
+          // 只对非透明环（实际扇形）显示信息
+          if (params.seriesName !== 'mouseoutSeries') {
+            return `
+            <span style="color:#FFF">
+              ${params.seriesName}<br/>
+              <span style="
+                display:inline-block;
+                margin-right:5px;
+                border-radius:10px;
+                width:10px;
+                height:10px;
+                background-color:${params.color};"></span>
+              ${chartOption.value.series[params.seriesIndex].pieData.value}
+            </span>`;
+          }
+          return '';
+        },
+      },
+      xAxis3D: { min: -1, max: 1 },
+      yAxis3D: { min: -1, max: 1 },
+      zAxis3D: { min: -1, max: 1 },
+      grid3D: {
+        show: false,
+        boxHeight: 5,
+        top: '0',
+        left: '-20%',
+        viewControl: {
+          // 3D 视角设置
+          alpha: 60, // 俯仰角度
+          distance: 240, // 视角距离
+          rotateSensitivity: 10,
+          zoomSensitivity: 10,
+          panSensitivity: 10,
+          autoRotate: true,
+          autoRotateAfterStill: 2,
+        },
+      },
+      legend: {
+        show: true,
+        selectedMode: false,
+        right: '5%',
+        top: '25%',
+        orient: 'vertical',
+        icon: 'circle',
+        itemHeight: 12,
+        itemWidth: 12,
+        itemGap: 10,
+        textStyle: {
+          color: '#fff',
+          fontSize: 14,
+          fontWeight: '400',
+        },
+        // 图例标签显示名称和数值
+        formatter: (name) => {
+          const item = props.chartData.find((d) => d.name === name);
+          return item ? `  ${name}      ${item.value}${props.option.legendSuffix || ''}` : name;
+        },
+      },
+      series,
+    },
+    // 将外部配置项覆盖基础配置
+    props.option
+  );
+
+  return option;
+}
+
+// 初始化图表
+function initChart() {
+  // 生成基础的3D饼图配置
+  const baseOption = getPie3D(props.chartData);
+  // 合并用户配置，确保不修改原始对象
+  const finalOption = Object.assign({}, baseOption, cloneDeep(props.option || {}));
+  chartOption.value = finalOption;
+  // 设置图表配置
+  setOptions(chartOption.value);
+  // 等待 DOM + ECharts 初始化完成
+  nextTick(() => {
+    const chart = getInstance();
+    if (!chart) {
+      console.warn('ECharts 实例未初始化，事件绑定失败');
+      return;
+    }
+
+    // 避免重复绑定事件
+    chart.off('click');
+    chart.off('mouseover');
+    chart.off('globalout');
+
+    chart.on('click', handleClick);
+    chart.on('mouseover', handleMouseover);
+    chart.on('globalout', handleGlobalout);
+  });
+}
+function handleClick(params) {
+  // 如果点击的是透明辅助环，则忽略
+  if (params.seriesName === 'mouseoutSeries') return;
+
+  const optionVal = chartOption.value;
+  const series = optionVal.series;
+  const idx = params.seriesIndex;
+
+  // 新的选中状态（取反）
+  const isSelected = !series[idx].pieStatus.selected;
+  const isHovered = series[idx].pieStatus.hovered;
+  const k = series[idx].pieStatus.k;
+  const startRatio = series[idx].pieData.startRatio;
+  const endRatio = series[idx].pieData.endRatio;
+  const h = series[idx].pieData.value;
+
+  // 如果之前有其他扇形被选中，取消其选中状态
+  if (selectedIndex !== null && selectedIndex !== idx) {
+    const prev = series[selectedIndex];
+    prev.parametricEquation = getParametricEquation(
+      prev.pieData.startRatio,
+      prev.pieData.endRatio,
+      false,
+      false,
+      prev.pieStatus.k,
+      prev.pieData.value
+    );
+    prev.pieStatus.selected = false;
+    selectedIndex = null;
+  }
+
+  // 设置当前扇形的选中/取消选中状态
+  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);
+}
+function handleMouseover(params) {
+  const optionVal = chartOption.value;
+  const series = optionVal.series;
+  const idx = params.seriesIndex;
+
+  // 鼠标经过透明环时不做高亮处理
+  if (params.seriesName === 'mouseoutSeries') {
+    return;
+  }
+  // 如果此扇形已经高亮，无需重复操作
+  if (hoveredIndex === idx) {
+    return;
+  }
+  console.log('hoveredIndexOne :>> ', hoveredIndex);
+  console.log('idx= :>> ', idx);
+  // 取消之前高亮的扇形
+  if (hoveredIndex !== null) {
+    const prev = series[hoveredIndex];
+    const isSelected = prev.pieStatus.selected;
+    prev.parametricEquation = getParametricEquation(
+      prev.pieData.startRatio,
+      prev.pieData.endRatio,
+      isSelected,
+      false,
+      prev.pieStatus.k,
+      prev.pieData.value
+    );
+    prev.pieStatus.hovered = false;
+    hoveredIndex = null;
+  }
+
+  // 设置当前扇形的高亮状态
+  const isSelected = series[idx].pieStatus.selected;
+  const startRatio = series[idx].pieData.startRatio;
+  const endRatio = series[idx].pieData.endRatio;
+  const k = series[idx].pieStatus.k;
+  const h = series[idx].pieData.value;
+  series[idx].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, true, k, h);
+  series[idx].pieStatus.hovered = true;
+  hoveredIndex = idx;
+  console.log('hoveredIndexTwo :>> ', hoveredIndex);
+
+  setOptions(optionVal);
+}
+function handleGlobalout() {
+  if (hoveredIndex !== null) {
+    const optionVal = chartOption.value;
+    const series = optionVal.series;
+    const prev = series[hoveredIndex];
+    const isSelected = prev.pieStatus.selected;
+    prev.parametricEquation = getParametricEquation(
+      prev.pieData.startRatio,
+      prev.pieData.endRatio,
+      isSelected,
+      false,
+      prev.pieStatus.k,
+      prev.pieData.value
+    );
+    prev.pieStatus.hovered = false;
+    hoveredIndex = null;
+    setOptions(optionVal);
+  }
+}
+// 记录当前选中和高亮的系列索引
+let selectedIndex = null;
+let hoveredIndex = null;
+
+// 组件挂载后绑定事件
+onMounted(() => {
+  initChart();
+});
+
+// 监听数据或配置变更，重新初始化图表
+watch(
+  [() => props.chartData, () => props.option],
+  () => {
+    if (props.chartData && props.chartData.length) {
+      initChart();
+    }
+  },
+  { immediate: true, deep: true }
+);
+</script>
+
+<style scoped>
+/* 可根据需要自定义图表容器样式 */
+</style>

src/components/custom-rank-list/index.vue

@@ -204,6 +204,7 @@ onUnmounted(() => {
     display: flex;
     align-items: center;
     font-size: 13px;
+    flex: none;
     .rank {
       margin-right: 5px;
     }
@@ -212,7 +213,7 @@ onUnmounted(() => {
     }
   }
   .ranking-column {
-    width: 100%;
+    flex: 1;
     .inside-column {
       position: relative;
       overflow: hidden;

src/hooks/useEcharts.js

@@ -7,9 +7,9 @@ import echarts from '../utils/echarts';
 
 export const useEcharts = (elRef, theme = 'default') => {
   // 新增轮播相关状态
-  const autoPlayTimer = ref(null);
+  const autoPlayTimer = ref(null); // 定时器句柄
-  const currentIndex = ref(-1);
+  const currentIndex = ref(-1); // 当前高亮的数据索引
-  const dataLength = ref(0);
+  const dataLength = ref(0); // 当前系列的数据总长度
 
   let mapClickHandler = null;
 
@@ -18,29 +18,41 @@ export const useEcharts = (elRef, theme = 'default') => {
     const {
       interval = 2000, // 轮播间隔(ms)
       seriesIndex = 0, // 默认操作第一个系列
-      showTooltip = true, // 是否显示提示框
+      showTooltip = false, // 是否显示提示框，默认是false，外部配置了，无论是否true都会显示
+      showMarkPoint = true, // 是否显示默认的动态标记点
     } = options;
 
     stopAutoPlay(); // 先停止已有轮播
 
-    // 获取数据长度
+    // 获取当前系列的数据长度
     const seriesData = unref(getOptions).series?.[seriesIndex]?.data;
+    const xAxisData = unref(getOptions).xAxis?.data || [];
+    // 获取当前 option 中的 yAxis 类型来判断是否倒置
+    const axisType = unref(getOptions).yAxis?.type;
+    const isCategoryY = axisType === 'category';
+
     dataLength.value = seriesData?.length || 0;
     if (dataLength.value === 0) return;
 
     autoPlayTimer.value = setInterval(() => {
       currentIndex.value = (currentIndex.value + 1) % dataLength.value;
+      // 更新MarkPoint点信息
+      if (showMarkPoint) {
+        updateMarkPoint(currentIndex.value, xAxisData, seriesData, isCategoryY);
+      }
 
-      // 执行轮播动作
+      // 重置之前的高亮
       chartInstance?.dispatchAction({
         type: 'downplay',
         seriesIndex: seriesIndex,
       });
+      // 高亮当前项
       chartInstance?.dispatchAction({
         type: 'highlight',
         seriesIndex: seriesIndex,
         dataIndex: currentIndex.value,
       });
+      // 显示 tooltip（可选）
       if (showTooltip) {
         chartInstance?.dispatchAction({
           type: 'showTip',
@@ -51,6 +63,40 @@ export const useEcharts = (elRef, theme = 'default') => {
     }, interval);
   };
 
+  function updateMarkPoint(index, xAxis, seriesData, isCategoryY) {
+    const x = isCategoryY ? seriesData[index] : xAxis[index];
+    const y = isCategoryY ? xAxis[index] : seriesData[index];
+    const updatedSeries = chartInstance.getOption().series;
+
+    if (updatedSeries[0].markPoint && Array.isArray(updatedSeries[0].markPoint.data) && updatedSeries[0].markPoint.data.length > 1) {
+      // 已初始化：只改坐标
+      updatedSeries[0].markPoint.data.forEach((el) => {
+        el.coord = [x, y];
+      });
+    } else {
+      // 未初始化或数据不对：重建
+      updatedSeries[0].markPoint = {
+        symbol: 'circle',
+        symbolSize: 8,
+        itemStyle: {
+          color: '#ffffff',
+        },
+        label: {
+          show: false,
+        },
+        data: [
+          { coord: [x, y], symbolSize: 16, itemStyle: { color: '#ffffff' }, z: 12 },
+          { coord: [x, y], symbolSize: 24, itemStyle: { color: 'rgba(1, 238, 255, 0.5)' }, z: 11 },
+          { coord: [x, y], symbolSize: 40, itemStyle: { color: 'rgba(1, 238, 255, 0.3)' }, z: 10 },
+        ],
+      };
+    }
+
+    chartInstance.setOption({
+      series: updatedSeries,
+    });
+  }
+
   // 新增方法 - 停止轮播
   const stopAutoPlay = () => {
     if (autoPlayTimer.value) {

src/utils/echarts.js

@@ -32,6 +32,9 @@ import {
   CalendarComponent,
   GraphicComponent,
   GeoComponent,
+  MarkPointComponent,
+  MarkLineComponent,
+  MarkAreaComponent,
 } from 'echarts/components';
 
 import { CanvasRenderer } from 'echarts/renderers';
@@ -64,6 +67,9 @@ echarts.use([
   ScatterChart,
   EffectScatterChart,
   GeoComponent,
+  MarkPointComponent,
+  MarkLineComponent,
+  MarkAreaComponent,
 ]);
 
 export default echarts;

src/views/land/components/landFive.vue

@@ -27,16 +27,17 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
-      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      backgroundColor: 'rgba(0,0,0,0.6);',
       borderColor: '#35d0c0',
       formatter: (data) => {
         const params = data[0];
         let str = `<div class="custom-echarts-tips" >
           <span>${params.name}</span><br/>
-     <span>${params.marker} ${params.data} 万元</span>
+          <span>${params.marker} ${params.data} 万亩</span>
         </div>`;
         return str;
       },
+      extraCssText: 'backdrop-filter: blur(8px);',
     },
     barStyle: {
       barWidth: 14,
@@ -46,13 +47,13 @@ const state = reactive({
       },
       color: {
         type: 'linear',
-        x: 0,
+        x: 1,
         y: 0,
         x2: 0,
-        y2: 1,
+        y2: 0,
         colorStops: [
           { offset: 0, color: '#35D0C0' },
-          { offset: 1, color: '#35D0C0' },
+          { offset: 1, color: 'rgba(53,208,192,0)' },
         ],
         global: false,
       },

src/views/land/components/landFour.vue

@@ -128,16 +128,15 @@ const _circleNum = computed(() => {
       cursor: pointer;
       user-select: none;
       &.active {
-        background-color: rgba($color: #4aeb82, $alpha: 0.4);
+        background: rgba(38, 122, 102, 0.3);
-        border: 1px solid rgba($color: #008f32, $alpha: 08);
+        border: 1px solid #35d0c0;
         border-radius: 4px;
         overflow: hidden;
         .spot {
           transform: scale(1.2);
         }
-        ._label,
+        ._label {
-        ._value {
+          font-size: 16px;
-          font-size: 18px;
         }
       }
       ._label {

src/views/land/components/landMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <centerMap :dialog-title="'土地类型'" @mapclick="doMapclick">
+  <centerMap class="land-map-body" :dialog-title="'土地类型'" @mapclick="doMapclick">
     <template #header>
       <div class="land-map-pop-header">
         <div class="title">土地类型</div>
@@ -49,6 +49,11 @@ const all = computed(() => {
 </script>
 
 <style lang="scss" scoped>
+.land-map-body {
+  :deep(.el-dialog__body) {
+    overflow: visible;
+  }
+}
 .land-map-pop-header {
   display: inline-flex;
   justify-content: space-between;

src/views/land/components/landOne.vue

@@ -26,7 +26,7 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
-      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      backgroundColor: 'rgba(0,0,0,0.6);',
       borderColor: '#35d0c0',
       formatter: (data) => {
         const params = data[0];
@@ -36,11 +36,12 @@ const state = reactive({
         </div>`;
         return str;
       },
+      extraCssText: 'backdrop-filter: blur(8px);',
     },
     barStyle: {
-      barWidth: 15,
+      barWidth: 16,
       itemStyle: {
-        borderRadius: [8, 8, 0, 0], // 设置柱子的圆角半径
+        borderRadius: 8, // 设置柱子的圆角半径
       },
       color: {
         type: 'linear',
@@ -49,23 +50,14 @@ const state = reactive({
         x2: 0,
         y2: 1,
         colorStops: [
-          { offset: 0, color: '#35D0C0' },
+          { offset: 0, color: '#35d0c0' },
-          { offset: 1, color: '#35D0C0' },
+          { offset: 1, color: 'rgba(53,208,192,0)' },
         ],
         global: false,
       },
     },
     xAxis: {
       type: 'category',
-      // name: '面积',
-      // splitLine: {
-      //   show: false,
-      //   lineStyle: {
-      //     type: 'dashed',
-      //     color: '',
-      //     width: 1,
-      //   },
-      // },
       axisTick: {
         show: false,
         alignWithLabel: false,
@@ -78,44 +70,11 @@ const state = reactive({
           color: 'rgba(28, 158, 222, 1)',
         },
       },
-      // axisLine: {
-      //   show: true,
-      //   lineStyle: {
-      //     type: 'solid',
-      //     width: 1,
-      //     // color: '#000',
-      //   },
-      // },
-      // axisLabel: {
-      //   margin: 8,
-      //   interval: 'auto',
-      //   rotate: 0,
-      //   fontSize: 10,
-      //   color: '#fff',
-      // },
     },
     yAxis: {
       type: 'value',
       // name: '面积(万亩)',
     },
-    // label: {
-    //   show: true,
-    //   position: 'insideTop',
-    //   distance: -10,
-    //   formatter: () => {
-    //     return `{z|}{a|}`;
-    //   },
-    //   rich: {
-    //     a: {
-    //       widht: 18,
-    //       height: 18,
-    //       backgroundColor: {
-    //         image:
-    //           'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKUSURBVHgBpVPPaxNBFH4zszubTTY2sSRSrFCC1dIepChoD9JgKwiem6s3vYl4lyb/QS/+wJPnBPQ/0LQ91KsHe5BaWo3Yupqk6WZ3Z3Z2xt2tKUUNHnww8OB775tv3nwP4D8DDQOqqoqh9iuPjlpeVkkxQurvBAoiREGlUcHbpUWcHaWkoGUivAWOPyUt5iiYgbABS/IkCTp5YxMAF1rTui36Rt70acipFmOEcqE8n+vaWZbf74jnl++KAQlOLlcKNZuA6X7JcPw9K2uSPOd68bY1NXtJL0zGeWiO5h3fsbxxk5abNRIrPlawVK8TmGtRx89ZJIVy93NzC9et0sMU6JMxzkF+XXc/1Fbab1+bmuq2RNcZ39jg9UojTBTkSx3spIu6oaHMLevC9E3r4tNBcxwU8NhCeurZg9y1GwRYJucX9e2lRYwi5TiW8nmEYe6FusIsfWfkyjIMiauZ0j2PozRJ92lxi2E1mAGcB8jwjoakQS1EZ4cRxBg1McUMkzNaFqEBgbeTTWYhlZChUs4wghCUw5gh43xnIv75mACBKkxkpKFbARiYtUNnbRhBW7hrUvicUCoK73flsQK7uSlZCgXI892X7uZjEU3992auwr1Xh++eEKr3fY8E9sx8YiiSyHlRhrFvPQT0NOyGP3puwDfO0XwuYseRf9mnoFtfOVx9tM6/fGShOPRhxy/ndsWbWvPI3rGRKtDAkWspQM8MkUpHtk6L0NIlOkAIpRhnro8Mo38Kep493guaUA3j5ydPiCpUAyrS3toMbEFcQke6ppWxteDAlszYV9L7zk9Bh4mWmzTXqlLB0Tr8uY3RTpQjWxcK09gx9hLcYm1l2/OyXF6VVVSViY0RKPhHHJGrpHTo2v8EGgI2uB3r9kQAAAAASUVORK5CYII=',
-    //       },
-    //     },
-    //   },
-    // },
   },
   data: [],
 });

src/views/land/components/landSix.vue

@@ -1,5 +1,5 @@
 <template>
-  <custom-echart-hyaline-cake height="100%" :chart-data="state.data" :option="state.option" />
+  <new-hyaline-cake height="100%" :chart-data="state.data" :option="state.option" />
 </template>
 
 <script setup>
@@ -15,19 +15,19 @@ const props = defineProps({
 
 const state = reactive({
   option: {
-    opacity: 0.6,
+    opacity: 1,
-    itemGap: 0.2,
+    itemGap: 0.1,
     legendSuffix: '万亩',
-    itemHeight: 120,
+    itemHeight: 500,
     grid3D: {
       show: false,
-      boxHeight: 5,
+      boxHeight: 1,
       top: '0',
       left: '-20%',
       viewControl: {
         //3d效果可以放大、旋转等，请自己去查看官方配置
-        alpha: 30, //角度(这个很重要 调节角度的)
+        alpha: 45, //角度(这个很重要 调节角度的)
-        distance: 260, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+        distance: 300, //调整视角到主体的距离，类似调整zoom(这是整体大小)
         rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
         zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
         panSensitivity: 10, //设置平移灵敏度，0无法平移

src/views/land/components/landThere.vue

@@ -31,7 +31,7 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
-      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      backgroundColor: 'rgba(0,0,0,0.6);',
       borderColor: '#35d0c0',
       formatter: (data) => {
         const params = data[0];
@@ -41,6 +41,7 @@ const state = reactive({
         </div>`;
         return str;
       },
+      extraCssText: 'backdrop-filter: blur(8px);',
     },
     xAxis: {
       type: 'category',
@@ -60,7 +61,6 @@ const state = reactive({
     },
     yAxis: {
       type: 'value',
-      // name: '',
     },
   },
   data: [],

src/views/land/components/landTwo.vue

@@ -20,10 +20,10 @@ const state = reactive({
   option: {
     // 数据
     dataset: [],
-    type: 'column',
+    type: 'row',
     rowNum: 6,
     isAnimation: true,
-    waitTime: 5,
+    waitTime: 2,
     unit: '万元',
     sort: true,
     height: 12,
@@ -32,9 +32,9 @@ const state = reactive({
     borderRadius: '12px',
     carousel: 'single',
     indexPrefix: 'TOP',
-    indexFontSize: 12,
+    indexFontSize: 20,
-    leftFontSize: 14,
+    leftFontSize: 16,
-    rightFontSize: 14,
+    rightFontSize: 16,
     valueFormatter: (item) => {
       return item.value;
     },
@@ -61,8 +61,11 @@ watch(
   &:deep(.row-item) {
     .ranking-info {
       color: #35d0c0 !important;
-      font-family: 'DingTalk JinBuTi, DingTalk JinBuTi-Regular';
+      font-weight: 400;
-      font-weight: 700;
+      font-style: italic;
+    }
+    .ranking-value {
+      font-style: italic;
     }
 
     .inside-column {

src/views/land/index.vue

@@ -9,7 +9,7 @@
         </customBack>
       </div>
       <div class="left-charts-item">
-        <customBack top-title="农村土地资源项目效益" :top-postion="'left'">
+        <customBack top-title="农村土地资源" :top-postion="'left'">
           <template #back>
             <landTwo :data="state.data.two" />
           </template>
@@ -55,14 +55,31 @@
         </customBack>
       </div>
       <div class="right-charts-item">
-        <customBack top-title="年度农用地规划面积" :top-postion="'right'">
+        <customBack
+          top-title="管理需求分类"
+          :down-title="'永久基本农田'"
+          :top-postion="'right'"
+          :down-width="'140px'"
+          :options="[
+            { label: '永久基本农田', value: '530926' },
+            { label: '耿马镇', value: '42611' },
+            { label: '勐撒镇', value: '9259' },
+            { label: '勐永镇', value: '17787' },
+            { label: '孟定镇', value: '42610' },
+            { label: '勐简乡', value: '17788' },
+            { label: '贺派乡', value: '40161' },
+            { label: '四排山乡', value: '40163' },
+            { label: '大兴乡', value: '40159' },
+          ]"
+          :is-down="true"
+        >
           <template #back>
             <landFive :data="state.data.five" />
           </template>
         </customBack>
       </div>
       <div class="right-charts-item">
-        <customBack top-title="各地农用地利用面积" :top-postion="'right'">
+        <customBack top-title="全县作物情况" :top-postion="'right'">
           <template #back>
             <landSix :data="state.data.six" />
           </template>
@@ -198,9 +215,22 @@ const handleCommand = (data) => {
 };
 </script>
 <style lang="scss" scoped>
+::v-deep(.custom-back-content) {
+  padding: 8px !important; /* 强制覆盖 padding */
+}
+
 .data-home-index {
   width: 100%;
   height: 100%;
+  font-family: 'DingTalk JinBuTi, DingTalk JinBuTi-Regular';
+  font-weight: 400;
+  :deep(*) {
+    font-family: inherit;
+    font-weight: inherit;
+  }
+  :deep(.title-top-content) {
+    font-size: 24px;
+  }
   .left-charts {
     display: flex;
     justify-content: space-around;