diff --git a/src/components/mCountCard/index.vue b/src/components/mCountCard/index.vue
index 73f9a52..ff5e771 100644
--- a/src/components/mCountCard/index.vue
+++ b/src/components/mCountCard/index.vue
@@ -263,6 +263,131 @@ onBeforeUnmount(() => {
     &.icon-zongxiaoliang {
       background-image: url("~@/assets/images/icon2.png");
     }
+
+    &.icon-area,
+    &.icon-town,
+    &.icon-yield,
+    &.icon-rate,
+    &.icon-stack,
+    &.icon-leaf,
+    &.icon-risk {
+      border: 1px solid rgba(48, 220, 255, 0.26);
+      border-radius: 50%;
+      background:
+        radial-gradient(circle at 50% 50%, rgba(36, 246, 196, 0.2), rgba(48, 220, 255, 0.08) 54%, rgba(48, 220, 255, 0.02) 56%),
+        linear-gradient(135deg, rgba(48, 220, 255, 0.16), rgba(36, 246, 196, 0.08));
+      box-shadow:
+        inset 0 0 0 1px rgba(48, 220, 255, 0.08),
+        0 0 12px rgba(48, 220, 255, 0.24);
+
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        pointer-events: none;
+      }
+
+      &::before {
+        left: 11px;
+        top: 11px;
+        width: 20px;
+        height: 20px;
+        background: #30dcff;
+        box-shadow: 0 0 10px rgba(48, 220, 255, 0.42);
+      }
+
+      &::after {
+        left: 7px;
+        top: 7px;
+        width: 26px;
+        height: 26px;
+        border: 1px solid rgba(36, 246, 196, 0.28);
+        border-radius: 50%;
+      }
+    }
+
+    &.icon-area::before {
+      border: 2px solid #24f6c4;
+      border-radius: 4px;
+      background: transparent;
+      clip-path: polygon(0 16%, 100% 0, 84% 100%, 0 82%);
+    }
+
+    &.icon-town::before {
+      left: 10px;
+      top: 12px;
+      width: 22px;
+      height: 18px;
+      background: #24f6c4;
+      clip-path: polygon(0 100%, 0 45%, 22% 45%, 22% 22%, 48% 22%, 48% 0, 86% 0, 86% 100%);
+    }
+
+    &.icon-yield::before,
+    &.icon-leaf::before {
+      left: 13px;
+      top: 8px;
+      width: 17px;
+      height: 24px;
+      border-radius: 16px 2px 16px 2px;
+      background: #24f6c4;
+      transform: rotate(-28deg);
+    }
+
+    &.icon-yield::after,
+    &.icon-leaf::after {
+      left: 20px;
+      top: 19px;
+      width: 2px;
+      height: 13px;
+      border: 0;
+      border-radius: 0;
+      background: rgba(255, 224, 107, 0.88);
+      transform: rotate(20deg);
+    }
+
+    &.icon-rate::before {
+      left: 10px;
+      top: 20px;
+      width: 22px;
+      height: 12px;
+      background: transparent;
+      border-left: 3px solid #24f6c4;
+      border-bottom: 3px solid #24f6c4;
+      transform: skew(-18deg) rotate(-45deg);
+    }
+
+    &.icon-stack::before {
+      left: 11px;
+      top: 10px;
+      width: 20px;
+      height: 22px;
+      background:
+        linear-gradient(#24f6c4 0 0) 0 0 / 100% 4px no-repeat,
+        linear-gradient(#30dcff 0 0) 0 8px / 100% 4px no-repeat,
+        linear-gradient(#ffe06b 0 0) 0 16px / 100% 4px no-repeat;
+      box-shadow: none;
+    }
+
+    &.icon-risk::before {
+      left: 11px;
+      top: 9px;
+      width: 20px;
+      height: 22px;
+      background: #ffe06b;
+      clip-path: polygon(50% 0, 100% 88%, 0 88%);
+      box-shadow: 0 0 12px rgba(255, 224, 107, 0.38);
+    }
+
+    &.icon-risk::after {
+      left: 20px;
+      top: 17px;
+      width: 2px;
+      height: 8px;
+      border: 0;
+      border-radius: 0;
+      background: rgba(2, 16, 29, 0.88);
+      box-shadow: 0 10px 0 rgba(2, 16, 29, 0.88);
+    }
   }
   &-title {
     .title-zh {
diff --git a/src/views/chartStyleGuide/index.vue b/src/views/chartStyleGuide/index.vue
index 5d053c0..666ed95 100644
--- a/src/views/chartStyleGuide/index.vue
+++ b/src/views/chartStyleGuide/index.vue
@@ -29,8 +29,76 @@
           :title="`${formatChartNo(index)} ${card.title}`"
           :data-unit="card.unit"
         >
-          <div class="guide-card-content">
-            <v-chart class="guide-chart" :option="card.option" autoresize />
+          <div class="guide-card-content" :class="card.visual ? `is-${card.visual}` : ''">
+            <v-chart v-if="card.option" class="guide-chart" :option="card.option" autoresize />
+            <template v-if="card.visual === 'three-pie'">
+              <div class="guide-three-pie-visual">
+                <MPie
+                  :data="threePieRows"
+                  :colors="threePieColors"
+                  :delay="3000"
+                  :opacity="0.62"
+                  class="guide-three-pie"
+                >
+                  <template #default="{ data }">
+                    <div class="guide-three-pie-center">
+                      <strong>{{ getThreePiePercent(data) }}</strong>
+                      <span>{{ data?.name || "结构占比" }}</span>
+                    </div>
+                  </template>
+                </MPie>
+              </div>
+              <div class="guide-three-pie-legend">
+                <div v-for="(item, itemIndex) in threePieRows" :key="item.name">
+                  <i :style="{ borderColor: threePieColors[itemIndex] }"></i>
+                  <span>{{ item.name }}</span>
+                  <strong>{{ item.value }}<em>{{ item.unit }}</em></strong>
+                </div>
+              </div>
+            </template>
+            <template v-else-if="card.visual === 'structure-band'">
+              <div class="guide-band">
+                <i
+                  v-for="item in structureBandRows"
+                  :key="item.name"
+                  :style="{ width: `${item.percent}%`, background: item.color }"
+                ></i>
+              </div>
+              <div class="guide-band-list">
+                <div v-for="item in structureBandRows" :key="item.name">
+                  <span><i :style="{ background: item.color }"></i>{{ item.name }}</span>
+                  <strong>{{ item.percent }}%</strong>
+                </div>
+              </div>
+            </template>
+            <template v-else-if="card.visual === 'rank-list'">
+              <div v-for="(item, itemIndex) in rankListRows" :key="item.name" class="guide-rank-row">
+                <span>{{ itemIndex + 1 }}</span>
+                <em>{{ item.name }}</em>
+                <i><b :style="{ width: `${item.percent}%` }"></b></i>
+                <strong>{{ item.value }}</strong>
+              </div>
+            </template>
+            <template v-else-if="card.visual === 'warning-band'">
+              <div class="guide-warning-core">
+                <strong>{{ warningSummary.value }}</strong>
+                <span>{{ warningSummary.name }}</span>
+              </div>
+              <div class="guide-warning-list">
+                <div v-for="item in warningBandRows" :key="item.name">
+                  <span><i :style="{ background: item.color }"></i>{{ item.name }}</span>
+                  <em>{{ item.value }}</em>
+                  <b><i :style="{ width: `${item.percent}%`, background: item.color }"></i></b>
+                </div>
+              </div>
+            </template>
+            <template v-else-if="card.visual === 'target-stack'">
+              <div v-for="item in targetStackRows" :key="item.name" class="guide-target-row">
+                <span>{{ item.name }}</span>
+                <b><i :style="{ width: `${item.percent}%`, background: item.color }"></i></b>
+                <strong>{{ item.percent }}%</strong>
+              </div>
+            </template>
           </div>
         </m-card>
       </section>
@@ -41,6 +109,7 @@
 <script setup>
 import VChart from "vue-echarts"
 import mCard from "@/components/mCard/index.vue"
+import MPie from "@/components/mPie/index.vue"
 import {
   categoryAxis,
   chartGrid,
@@ -50,8 +119,6 @@ import {
   createSystemBarOption,
   createSystemGroupedBarOption,
   createSystemLineOption,
-  createSystemPieOption,
-  createSystemRadarOption,
   createSystemStackedBarOption,
   formatChartValue,
   valueAxis,
@@ -82,7 +149,6 @@ const months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"]
 const chartCards = [
   {
     key: "bar-vertical",
-    type: "柱状图",
     title: "林草湿资源面积",
     unit: "单位：万亩",
     option: createSystemBarOption({
@@ -97,25 +163,25 @@ const chartCards = [
       unit: "万亩",
       name: "资源面积",
       showLabel: false,
+      grid: { left: 40, right: 16, top: 18, bottom: 34 },
     }),
   },
   {
     key: "bar-horizontal",
-    type: "横向柱状图",
     title: "乡镇牦牛存栏排行",
     unit: "单位：头",
     option: createSystemBarOption({
-      categories: townCategories,
-      rows: yakRows,
+      categories: townCategories.slice(0, 5),
+      rows: yakRows.slice(0, 5),
       unit: "头",
       name: "牦牛存栏",
       orientation: "horizontal",
       colorIndex: 1,
+      grid: { left: 58, right: 54, top: 16, bottom: 18 },
     }),
   },
   {
     key: "grouped-bar",
-    type: "分组柱状图",
     title: "林草湿年度对比",
     unit: "单位：万亩",
     option: createSystemGroupedBarOption({
@@ -126,11 +192,11 @@ const chartCards = [
         { name: "湿地", values: [76, 79, 81, 82, 84] },
         { name: "林地", values: [119, 121, 124, 127, 130] },
       ],
+      grid: { left: 38, right: 14, top: 34, bottom: 32 },
     }),
   },
   {
     key: "stacked-bar",
-    type: "堆叠柱状图",
     title: "草地利用结构",
     unit: "单位：万亩",
     option: createSystemStackedBarOption({
@@ -141,11 +207,11 @@ const chartCards = [
         { name: "禁牧草地", values: [18, 21, 16, 13, 12] },
         { name: "退化治理", values: [9, 7, 8, 6, 5] },
       ],
+      grid: { left: 38, right: 14, top: 34, bottom: 32 },
     }),
   },
   {
     key: "line-trend",
-    type: "折线图",
     title: "牦牛存栏趋势",
     unit: "单位：万头",
     option: createSystemLineOption({
@@ -155,11 +221,11 @@ const chartCards = [
         { name: "2025年", values: [45.2, 45.8, 46.4, 47.1, 48.3, 49.1, 49.8, 50.2] },
         { name: "2024年", values: [42.9, 43.5, 44.2, 44.8, 45.9, 46.5, 47.1, 47.7] },
       ],
+      grid: { left: 38, right: 14, top: 34, bottom: 30 },
     }),
   },
   {
     key: "area-line",
-    type: "面积折线图",
     title: "草地产草量走势",
     unit: "单位：万吨",
     option: createSystemLineOption({
@@ -169,14 +235,20 @@ const chartCards = [
       series: [
         { name: "鲜草产量", values: [12.4, 14.1, 19.8, 28.6, 36.2, 43.5, 46.8, 41.2] },
       ],
+      grid: { left: 38, right: 14, top: 34, bottom: 30 },
     }),
   },
+  {
+    key: "three-pie",
+    title: "草牧资源结构",
+    unit: "3D饼图",
+    visual: "three-pie",
+  },
   {
     key: "donut",
-    type: "环图",
     title: "湿地类型结构",
     unit: "单位：%",
-    option: createSystemPieOption({
+    option: createCompactDonutOption({
       unit: "万亩",
       name: "湿地结构",
       rows: [
@@ -189,132 +261,90 @@ const chartCards = [
   },
   {
     key: "rose",
-    type: "玫瑰图",
     title: "林地类型占比",
-    unit: "单位：万亩",
-    option: createSystemPieOption({
-      unit: "万亩",
-      name: "林地结构",
-      rose: true,
-      donut: false,
-      rows: [
-        { name: "乔木林地", value: 42.6 },
-        { name: "灌木林地", value: 35.2 },
-        { name: "疏林地", value: 18.4 },
-        { name: "未成林地", value: 8.7 },
-      ],
-    }),
-  },
-  {
-    key: "radar",
-    type: "雷达图",
-    title: "生态资源综合评价",
-    unit: "单位：分",
-    size: "tall",
-    option: createSystemRadarOption({
-      indicators: [
-        { name: "覆盖度", max: 100 },
-        { name: "稳定性", max: 100 },
-        { name: "承载力", max: 100 },
-        { name: "保护等级", max: 100 },
-        { name: "治理成效", max: 100 },
-      ],
-      rows: [
-        { name: "当前值", values: [86, 78, 72, 91, 83] },
-        { name: "目标值", values: [92, 86, 84, 95, 90] },
-      ],
-    }),
+    unit: "单位：%",
+    option: createRoseOption(),
   },
   {
-    key: "dual-axis",
-    type: "柱线组合",
-    title: "草畜平衡压力趋势",
-    unit: "左：万头 / 右：%",
-    size: "tall",
-    option: createDualAxisOption(),
+    key: "pictorial-column",
+    title: "乡镇草地光柱",
+    unit: "单位：万亩",
+    option: createPictorialColumnOption(),
   },
   {
     key: "gauge",
-    type: "仪表盘",
-    title: "草畜平衡预警指数",
+    title: "草畜平衡预警",
     unit: "单位：分",
     option: createGaugeOption(),
   },
-  {
-    key: "scatter",
-    type: "散点气泡图",
-    title: "牧户规模与识别风险",
-    unit: "X：头 / Y：%",
-    option: createScatterOption(),
-  },
-  {
-    key: "heatmap",
-    type: "热力图",
-    title: "巡护事件时段热力",
-    unit: "单位：件",
-    option: createHeatmapOption(),
-  },
-  {
-    key: "funnel",
-    type: "漏斗图",
-    title: "生态问题处置转化",
-    unit: "单位：件",
-    option: createFunnelOption(),
-  },
   {
     key: "progress-ring",
-    type: "进度环",
     title: "治理任务完成率",
     unit: "单位：%",
     option: createProgressRingOption(),
   },
   {
-    key: "polar-bar",
-    type: "极坐标柱图",
-    title: "月度遥感识别强度",
-    unit: "单位：次",
-    option: createPolarBarOption(),
-  },
-  {
-    key: "pictorial",
-    type: "象形柱图",
-    title: "重点乡镇牦牛识别",
-    unit: "单位：千头",
-    option: createPictorialBarOption(),
-  },
-  {
-    key: "candlestick",
-    type: "K线图",
-    title: "牦牛交易价格波动",
-    unit: "单位：元/公斤",
-    size: "tall",
-    option: createCandlestickOption(),
+    key: "structure-band",
+    title: "资源结构占比",
+    unit: "单位：%",
+    visual: "structure-band",
   },
   {
-    key: "boxplot",
-    type: "箱线图",
-    title: "草地产草量区间",
-    unit: "单位：公斤/亩",
-    size: "tall",
-    option: createBoxplotOption(),
+    key: "rank-list",
+    title: "重点对象排行",
+    unit: "单位：项",
+    visual: "rank-list",
   },
   {
-    key: "waterfall",
-    type: "瀑布图",
-    title: "草地恢复面积贡献",
-    unit: "单位：万亩",
-    option: createWaterfallOption(),
+    key: "warning-band",
+    title: "风险状态分布",
+    unit: "单位：项",
+    visual: "warning-band",
   },
   {
-    key: "nested-pie",
-    type: "嵌套环图",
-    title: "林地保护类型结构",
-    unit: "单位：万亩",
-    size: "tall",
-    option: createNestedPieOption(),
+    key: "target-stack",
+    title: "年度目标达成",
+    unit: "单位：%",
+    visual: "target-stack",
   },
 ]
 
+const threePieColors = ["#17E6C3", "#40CFFF", "#1979FF", "#FFC472"]
+const threePieRows = [
+  { name: "草地", value: 486.2, unit: "万亩" },
+  { name: "湿地", value: 82.4, unit: "万亩" },
+  { name: "林地", value: 126.8, unit: "万亩" },
+  { name: "保护地", value: 214.5, unit: "万亩" },
+]
+
+const structureBandRows = [
+  { name: "草地", percent: 52, color: chartPalette[0] },
+  { name: "林地", percent: 24, color: chartPalette[1] },
+  { name: "湿地", percent: 14, color: chartPalette[2] },
+  { name: "保护地", percent: 10, color: chartPalette[3] },
+]
+
+const rankListRows = [
+  { name: "瓦切镇", value: "74,721", percent: 100 },
+  { name: "安曲镇", value: "65,780", percent: 88 },
+  { name: "邛溪镇", value: "63,466", percent: 85 },
+  { name: "龙日镇", value: "54,691", percent: 73 },
+]
+
+const warningSummary = { name: "中低风险占比", value: "86%" }
+const warningBandRows = [
+  { name: "正常", value: "128", percent: 100, color: chartPalette[0] },
+  { name: "关注", value: "36", percent: 45, color: chartPalette[2] },
+  { name: "预警", value: "12", percent: 18, color: chartPalette[4] },
+]
+
+const targetStackRows = [
+  { name: "草地修复", percent: 92, color: chartPalette[0] },
+  { name: "湿地巡护", percent: 86, color: chartPalette[1] },
+  { name: "林地管护", percent: 78, color: chartPalette[2] },
+  { name: "风险处置", percent: 94, color: chartPalette[3] },
+]
+
 function formatChartNo(index) {
   return `C${String(index + 1).padStart(2, "0")}`
 }
@@ -323,38 +353,166 @@ function getCardSize(card) {
   return cardSizes[card.size || "standard"] || cardSizes.standard
 }
 
-function createDualAxisOption() {
-  const categories = ["1月", "2月", "3月", "4月", "5月", "6月"]
+function getThreePiePercent(data = {}) {
+  const total = threePieRows.reduce((sum, item) => sum + (Number(item.value) || 0), 0) || 1
+  const percent = ((Number(data.value) || 0) / total) * 100
+  return `${percent.toFixed(1)}%`
+}
+
+function createCompactDonutOption({ rows = [], unit = "", name = "结构占比" } = {}) {
+  const total = rows.reduce((sum, row) => sum + (Number(row.value) || 0), 0) || 1
   return withChartDefaults({
     color: chartPalette,
-    grid: chartGrid({ left: 48, right: 48, top: 42, bottom: 38 }),
-    tooltip: chartTooltip((params) => axisRows(params), { trigger: "axis", axisPointer: { type: "shadow" } }),
-    legend: chartLegend({ top: 0, right: 4 }),
-    xAxis: categoryAxis(categories),
-    yAxis: [
-      valueAxis({ axisLabel: { formatter: "{value}" } }),
-      valueAxis({
-        axisLabel: { formatter: "{value}%" },
-        splitLine: { show: false },
-      }),
+    tooltip: chartTooltip((params) => `${params.marker}${params.name}：${formatChartValue(params.value)}${unit}<br/>占比：${formatChartValue(params.percent)}%`),
+    legend: chartLegend({
+      orient: "vertical",
+      right: 12,
+      top: "middle",
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 8,
+      formatter: (label) => {
+        const row = rows.find((item) => item.name === label)
+        const percent = row ? Math.round(((Number(row.value) || 0) / total) * 100) : 0
+        return `${label} ${percent}%`
+      },
+    }),
+    series: [
+      {
+        name,
+        type: "pie",
+        radius: ["48%", "68%"],
+        center: ["34%", "52%"],
+        avoidLabelOverlap: true,
+        label: { show: false },
+        labelLine: { show: false },
+        itemStyle: {
+          borderColor: "rgba(3, 18, 31, 0.94)",
+          borderWidth: 3,
+        },
+        data: rows.map((row, index) => ({
+          name: row.name,
+          value: Number(row.value) || 0,
+          itemStyle: { color: row.color || chartPalette[index % chartPalette.length] },
+        })),
+      },
     ],
+  })
+}
+
+function createRoseOption() {
+  const rows = [
+    { name: "乔木林地", value: 42.6 },
+    { name: "灌木林地", value: 35.2 },
+    { name: "疏林地", value: 18.4 },
+    { name: "未成林地", value: 8.7 },
+  ]
+  return withChartDefaults({
+    color: chartPalette,
+    tooltip: chartTooltip((params) => `${params.marker}${params.name}：${formatChartValue(params.value)}万亩<br/>占比：${formatChartValue(params.percent)}%`),
+    legend: chartLegend({
+      orient: "vertical",
+      right: 8,
+      top: "middle",
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 7,
+    }),
     series: [
       {
-        name: "理论载畜量",
+        name: "林地类型",
+        type: "pie",
+        roseType: "radius",
+        radius: [14, "64%"],
+        center: ["34%", "54%"],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderColor: "rgba(3, 18, 31, 0.94)",
+          borderWidth: 3,
+          shadowBlur: 10,
+          shadowColor: "rgba(0, 0, 0, 0.25)",
+        },
+        label: {
+          color: "#f7feff",
+          fontSize: 10,
+          formatter: ({ percent }) => (percent >= 8 ? `${Math.round(percent)}%` : ""),
+        },
+        labelLine: {
+          length: 7,
+          length2: 6,
+          lineStyle: { color: "rgba(223, 250, 255, 0.38)" },
+        },
+        data: rows,
+      },
+    ],
+  })
+}
+
+function createPictorialColumnOption() {
+  const categories = ["瓦切", "安曲", "邛溪", "龙日", "刷经寺"]
+  const values = [486, 372, 318, 246, 205]
+  const maxValue = 520
+  return withChartDefaults({
+    color: chartPalette,
+    grid: chartGrid({ left: 40, right: 18, top: 22, bottom: 34 }),
+    tooltip: chartTooltip((params) => `${params.name}：${formatChartValue(params.value)}万亩`, {
+      trigger: "axis",
+      axisPointer: { type: "shadow", shadowStyle: { color: "rgba(48, 220, 255, 0.08)" } },
+    }),
+    xAxis: categoryAxis(categories),
+    yAxis: valueAxis(),
+    series: [
+      {
+        name: "底柱",
+        type: "bar",
+        barWidth: 24,
+        barGap: "-100%",
+        data: values.map(() => maxValue),
+        tooltip: { show: false },
+        silent: true,
+        itemStyle: {
+          borderRadius: [8, 8, 0, 0],
+          borderColor: "rgba(48, 220, 255, 0.2)",
+          borderWidth: 1,
+          color: "rgba(48, 220, 255, 0.08)",
+        },
+      },
+      {
+        name: "草地面积",
         type: "bar",
-        barWidth: 18,
-        data: [42.5, 43.2, 45.8, 48.1, 49.6, 51.2],
-        itemStyle: { borderRadius: [7, 7, 0, 0], color: verticalGradient(chartPalette[0]) },
+        barWidth: 13,
+        barGap: "-76%",
+        z: 3,
+        data: values,
+        label: {
+          show: true,
+          position: "top",
+          color: "#ffffff",
+          fontSize: 10,
+          formatter: ({ value }) => formatChartValue(value),
+        },
+        itemStyle: {
+          borderRadius: [8, 8, 1, 1],
+          color: verticalGradient(chartPalette[0]),
+          shadowBlur: 10,
+          shadowColor: "rgba(36, 246, 196, 0.28)",
+        },
       },
       {
-        name: "压力指数",
-        type: "line",
-        yAxisIndex: 1,
-        smooth: true,
-        symbolSize: 7,
-        data: [72, 75, 79, 83, 86, 88],
-        lineStyle: { width: 3, color: chartPalette[2], shadowColor: "rgba(255, 224, 107, .45)", shadowBlur: 10 },
-        itemStyle: { color: "#041522", borderColor: chartPalette[2], borderWidth: 2 },
+        name: "顶部高光",
+        type: "pictorialBar",
+        symbol: "diamond",
+        symbolSize: [21, 6],
+        symbolOffset: [0, -4],
+        symbolPosition: "end",
+        z: 5,
+        tooltip: { show: false },
+        data: values,
+        itemStyle: {
+          color: "rgba(232, 255, 255, 0.9)",
+          shadowBlur: 9,
+          shadowColor: "rgba(48, 220, 255, 0.7)",
+        },
       },
     ],
   })
@@ -373,26 +531,35 @@ function createGaugeOption() {
         center: ["50%", "58%"],
         progress: {
           show: true,
-          width: 14,
+          width: 12,
           itemStyle: { color: chartPalette[2] },
         },
         axisLine: {
           lineStyle: {
-            width: 14,
-            color: [[1, "rgba(48, 220, 255, 0.14)"]],
+            width: 12,
+            color: [
+              [0.55, "rgba(36, 246, 196, 0.42)"],
+              [0.8, "rgba(255, 224, 107, 0.42)"],
+              [1, "rgba(255, 154, 98, 0.42)"],
+            ],
           },
         },
         axisTick: { show: false },
-        splitLine: { length: 8, lineStyle: { color: "rgba(225, 249, 255, 0.42)", width: 1 } },
-        axisLabel: { distance: 18, color: "rgba(225, 249, 255, 0.56)", fontSize: 10 },
-        pointer: { width: 4, length: "58%", itemStyle: { color: chartPalette[2] } },
-        anchor: { show: true, size: 7, itemStyle: { color: chartPalette[2] } },
-        title: { offsetCenter: [0, "52%"], color: "rgba(225, 249, 255, 0.68)", fontSize: 12 },
+        splitLine: { length: 7, lineStyle: { color: "rgba(225, 249, 255, 0.36)", width: 1 } },
+        axisLabel: { show: false },
+        pointer: {
+          icon: "path://M4 0 L-4 0 L0 -62 Z",
+          width: 8,
+          length: "56%",
+          itemStyle: { color: "#ffe06b", shadowBlur: 8, shadowColor: "rgba(255, 224, 107, 0.45)" },
+        },
+        anchor: { show: true, size: 7, itemStyle: { color: "#ffe06b" } },
+        title: { offsetCenter: [0, "52%"], color: "rgba(225, 249, 255, 0.7)", fontSize: 12 },
         detail: {
           valueAnimation: true,
-          offsetCenter: [0, "28%"],
+          offsetCenter: [0, "26%"],
           color: "#ffe06b",
-          fontSize: 28,
+          fontSize: 27,
           fontWeight: 700,
           formatter: "{value}",
         },
@@ -402,98 +569,6 @@ function createGaugeOption() {
   })
 }
 
-function createScatterOption() {
-  const rows = [
-    [280, 12, 18, "牧户A"],
-    [420, 18, 24, "牧户B"],
-    [510, 32, 42, "牧户C"],
-    [760, 26, 35, "牧户D"],
-    [980, 44, 58, "牧户E"],
-    [1210, 38, 52, "牧户F"],
-    [1460, 62, 75, "牧户G"],
-  ]
-  return withChartDefaults({
-    grid: chartGrid({ left: 48, right: 26, top: 28, bottom: 38 }),
-    tooltip: chartTooltip((params) => {
-      const [count, risk, times, name] = params.value
-      return `${params.marker}${name}<br/>存栏：${formatChartValue(count)}头<br/>风险：${risk}%<br/>识别：${times}次`
-    }),
-    xAxis: valueAxis({ name: "存栏", nameTextStyle: { color: "rgba(225, 249, 255, .56)" } }),
-    yAxis: valueAxis({ name: "风险", axisLabel: { formatter: "{value}%" }, nameTextStyle: { color: "rgba(225, 249, 255, .56)" } }),
-    series: [
-      {
-        name: "牧户",
-        type: "scatter",
-        symbolSize: (value) => Math.max(12, Math.min(42, value[2] / 2)),
-        data: rows,
-        itemStyle: {
-          color: "rgba(50, 220, 255, 0.72)",
-          borderColor: "#24f6c4",
-          borderWidth: 1,
-          shadowColor: "rgba(36, 246, 196, .35)",
-          shadowBlur: 12,
-        },
-      },
-    ],
-  })
-}
-
-function createHeatmapOption() {
-  const days = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
-  const periods = ["凌晨", "上午", "中午", "下午", "夜间"]
-  const data = periods.flatMap((period, y) => days.map((day, x) => [x, y, [4, 8, 11, 15, 20][y] + x * 2 + (x === 4 ? 8 : 0)]))
-  return withChartDefaults({
-    grid: chartGrid({ left: 50, right: 20, top: 34, bottom: 36 }),
-    tooltip: chartTooltip((params) => `${days[params.value[0]]} ${periods[params.value[1]]}<br/>事件：${params.value[2]}件`),
-    xAxis: categoryAxis(days),
-    yAxis: categoryAxis(periods),
-    visualMap: {
-      min: 0,
-      max: 40,
-      show: false,
-      inRange: { color: ["rgba(48, 220, 255, .12)", "rgba(36, 246, 196, .72)", "#ffe06b"] },
-    },
-    series: [
-      {
-        type: "heatmap",
-        data,
-        label: { show: true, color: "#e7fbff", fontSize: 10 },
-        itemStyle: { borderColor: "rgba(3, 18, 31, .86)", borderWidth: 2 },
-      },
-    ],
-  })
-}
-
-function createFunnelOption() {
-  return withChartDefaults({
-    color: chartPalette,
-    tooltip: chartTooltip((params) => `${params.marker}${params.name}：${formatChartValue(params.value)}件`),
-    series: [
-      {
-        type: "funnel",
-        left: "9%",
-        top: 18,
-        width: "82%",
-        height: "78%",
-        minSize: "32%",
-        maxSize: "100%",
-        sort: "descending",
-        gap: 4,
-        label: { color: "#e7fbff", fontSize: 11, formatter: "{b}  {c}" },
-        labelLine: { lineStyle: { color: "rgba(225, 249, 255, .34)" } },
-        itemStyle: { borderColor: "rgba(3, 18, 31, .9)", borderWidth: 2 },
-        data: [
-          { name: "问题发现", value: 168 },
-          { name: "派单核查", value: 142 },
-          { name: "处置整改", value: 118 },
-          { name: "复核通过", value: 96 },
-          { name: "闭环归档", value: 84 },
-        ],
-      },
-    ],
-  })
-}
-
 function createProgressRingOption() {
   return withChartDefaults({
     tooltip: chartTooltip((params) => `${params.marker}${params.name}：${params.value}%`),
@@ -527,189 +602,17 @@ function createProgressRingOption() {
     ],
   })
 }
-
-function createPolarBarOption() {
-  const monthsShort = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
-  return withChartDefaults({
-    angleAxis: {
-      type: "category",
-      data: monthsShort,
-      axisLabel: { color: "rgba(225, 249, 255, .62)", fontSize: 10 },
-      axisLine: { lineStyle: { color: "rgba(48, 220, 255, .22)" } },
-      axisTick: { show: false },
-    },
-    radiusAxis: {
-      axisLabel: { color: "rgba(225, 249, 255, .44)", fontSize: 10 },
-      splitLine: { lineStyle: { color: "rgba(48, 220, 255, .1)" } },
-      axisLine: { show: false },
-    },
-    polar: { radius: "68%", center: ["50%", "54%"] },
-    tooltip: chartTooltip((params) => `${params.name}月：${formatChartValue(params.value)}次`),
-    series: [
-      {
-        type: "bar",
-        coordinateSystem: "polar",
-        data: [18, 22, 26, 34, 46, 58, 64, 61, 45, 32, 24, 19],
-        itemStyle: { color: verticalGradient(chartPalette[1]) },
-      },
-    ],
-  })
-}
-
-function createPictorialBarOption() {
-  const categories = ["瓦切", "安曲", "邛溪", "刷经寺"]
-  const values = [76, 63, 58, 41]
-  return withChartDefaults({
-    grid: chartGrid({ left: 42, right: 22, top: 28, bottom: 38 }),
-    tooltip: chartTooltip((params) => `${params.name}：${params.value}千头`),
-    xAxis: categoryAxis(categories),
-    yAxis: valueAxis(),
-    series: [
-      {
-        type: "pictorialBar",
-        symbol: "roundRect",
-        symbolRepeat: true,
-        symbolSize: [18, 8],
-        symbolMargin: 3,
-        data: values,
-        itemStyle: { color: chartPalette[0] },
-      },
-    ],
-  })
-}
-
-function createCandlestickOption() {
-  const days = ["01", "02", "03", "04", "05", "06", "07", "08", "09"]
-  return withChartDefaults({
-    grid: chartGrid({ left: 48, right: 24, top: 28, bottom: 38 }),
-    tooltip: chartTooltip((params) => {
-      const [open, close, low, high] = params.value
-      return `${params.name}日<br/>开盘：${open}<br/>收盘：${close}<br/>最低：${low}<br/>最高：${high}`
-    }),
-    xAxis: categoryAxis(days),
-    yAxis: valueAxis({ scale: true }),
-    series: [
-      {
-        type: "candlestick",
-        data: [
-          [31.2, 32.4, 30.8, 33.1],
-          [32.4, 31.9, 31.2, 33.5],
-          [31.9, 33.2, 31.5, 34.1],
-          [33.2, 34.0, 32.7, 34.6],
-          [34.0, 33.5, 32.9, 34.2],
-          [33.5, 35.1, 33.1, 35.8],
-          [35.1, 34.6, 33.8, 35.4],
-          [34.6, 36.0, 34.1, 36.4],
-          [36.0, 35.7, 35.2, 36.8],
-        ],
-        itemStyle: {
-          color: chartPalette[0],
-          color0: chartPalette[4],
-          borderColor: chartPalette[0],
-          borderColor0: chartPalette[4],
-        },
-      },
-    ],
-  })
-}
-
-function createBoxplotOption() {
-  return withChartDefaults({
-    grid: chartGrid({ left: 48, right: 24, top: 28, bottom: 38 }),
-    tooltip: chartTooltip((params) => `${params.name}<br/>最小：${params.value[1]}<br/>Q1：${params.value[2]}<br/>中位：${params.value[3]}<br/>Q3：${params.value[4]}<br/>最大：${params.value[5]}`),
-    xAxis: categoryAxis(["瓦切", "安曲", "邛溪", "龙日"]),
-    yAxis: valueAxis(),
-    series: [
-      {
-        type: "boxplot",
-        data: [
-          [120, 148, 176, 205, 238],
-          [96, 126, 158, 184, 220],
-          [142, 168, 196, 224, 252],
-          [110, 132, 160, 188, 216],
-        ],
-        itemStyle: {
-          color: "rgba(36, 246, 196, .18)",
-          borderColor: chartPalette[0],
-          borderWidth: 2,
-        },
-      },
-    ],
-  })
-}
-
-function createWaterfallOption() {
-  const categories = ["期初", "补播", "围栏", "退化", "灾害", "期末"]
-  const assist = [0, 486, 518, 542, 529, 0]
-  const values = [486, 32, 24, -13, -8, 521]
-  return withChartDefaults({
-    grid: chartGrid({ left: 48, right: 22, top: 28, bottom: 38 }),
-    tooltip: chartTooltip((params) => `${params.name}：${formatChartValue(values[params.dataIndex])}万亩`),
-    xAxis: categoryAxis(categories),
-    yAxis: valueAxis(),
-    series: [
-      { type: "bar", stack: "total", data: assist, itemStyle: { color: "transparent" }, emphasis: { disabled: true } },
-      {
-        type: "bar",
-        stack: "total",
-        barWidth: 18,
-        data: values.map((value) => Math.abs(value)),
-        itemStyle: {
-          borderRadius: [6, 6, 0, 0],
-          color: (params) => (values[params.dataIndex] < 0 ? chartPalette[4] : verticalGradient(chartPalette[0])),
-        },
-      },
-    ],
-  })
-}
-
-function createNestedPieOption() {
-  return withChartDefaults({
-    color: chartPalette,
-    tooltip: chartTooltip((params) => `${params.marker}${params.name}：${formatChartValue(params.value)}万亩`),
-    series: [
-      {
-        type: "pie",
-        radius: [0, "34%"],
-        center: ["50%", "52%"],
-        label: { color: "#e7fbff", fontSize: 10, position: "inside" },
-        data: [
-          { name: "公益林", value: 68 },
-          { name: "商品林", value: 34 },
-        ],
-      },
-      {
-        type: "pie",
-        radius: ["46%", "70%"],
-        center: ["50%", "52%"],
-        label: { color: "#e7fbff", fontSize: 10, formatter: "{b}\n{d}%" },
-        labelLine: { length: 8, length2: 8, lineStyle: { color: "rgba(223, 250, 255, .38)" } },
-        data: [
-          { name: "天然林", value: 42 },
-          { name: "人工林", value: 26 },
-          { name: "用材林", value: 18 },
-          { name: "经济林", value: 16 },
-        ],
-      },
-    ],
-  })
-}
-
-function axisRows(params) {
-  const rows = Array.isArray(params) ? params : [params]
-  return rows
-    .map((item) => `${item.marker}${item.seriesName || item.name}：${formatChartValue(item.value)}${item.seriesType === "line" ? "%" : ""}`)
-    .join("<br/>")
-}
 </script>
 
 <style scoped lang="scss">
 .chart-guide-screen {
-  position: relative;
-  height: 100vh;
-  padding: 32px 36px 42px;
+  position: fixed;
+  inset: 0;
+  height: auto;
+  padding: 24px 24px 42px;
+  box-sizing: border-box;
   overflow-x: hidden;
-  overflow-y: auto;
+  overflow-y: scroll;
   overscroll-behavior: contain;
   color: #e7fbff;
   background:
@@ -793,10 +696,13 @@ function axisRows(params) {
 }
 
 .guide-chart-grid {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(4, 398px);
   align-items: flex-start;
+  justify-content: start;
   gap: 12px;
+  width: 1628px;
+  max-width: 100%;
 }
 
 .guide-chart-card {
@@ -867,6 +773,374 @@ function axisRows(params) {
   height: 100%;
 }
 
+.guide-card-content.is-three-pie {
+  display: grid;
+  grid-template-columns: 224px minmax(0, 1fr);
+  align-items: center;
+  gap: 2px;
+  padding: 0 12px 4px 4px;
+  box-sizing: border-box;
+}
+
+.guide-three-pie-visual {
+  position: relative;
+  width: 224px;
+  height: 132px;
+  pointer-events: auto;
+}
+
+.guide-three-pie {
+  width: 100%;
+  height: 100%;
+}
+
+.guide-three-pie-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  margin-top: -16px;
+  text-align: center;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.92);
+}
+
+.guide-three-pie-center strong {
+  color: #ffe06b;
+  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.guide-three-pie-center span {
+  max-width: 90px;
+  margin-top: 5px;
+  overflow: hidden;
+  color: rgba(245, 254, 255, 0.9);
+  font-size: 11px;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.guide-three-pie-legend {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.guide-three-pie-legend div {
+  display: grid;
+  grid-template-columns: 12px 42px minmax(0, 1fr);
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  color: rgba(225, 249, 255, 0.74);
+  font-size: 11px;
+}
+
+.guide-three-pie-legend i {
+  width: 9px;
+  height: 9px;
+  border: 2px solid #17e6c3;
+  border-radius: 50%;
+  box-sizing: border-box;
+  box-shadow: 0 0 10px currentColor;
+}
+
+.guide-three-pie-legend span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.guide-three-pie-legend strong {
+  color: #ffffff;
+  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
+  font-size: 13px;
+  line-height: 1;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.guide-three-pie-legend em {
+  margin-left: 2px;
+  color: rgba(225, 249, 255, 0.52);
+  font-size: 10px;
+  font-style: normal;
+}
+
+.guide-card-content.is-structure-band {
+  padding: 18px 18px 12px;
+  box-sizing: border-box;
+}
+
+.guide-band {
+  display: flex;
+  height: 16px;
+  margin: 18px 0 14px;
+  overflow: hidden;
+  border: 1px solid rgba(48, 220, 255, 0.2);
+  background: rgba(48, 220, 255, 0.08);
+}
+
+.guide-band i {
+  display: block;
+  height: 100%;
+  box-shadow: 0 0 16px currentColor;
+}
+
+.guide-band-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px 14px;
+}
+
+.guide-band-list div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  color: rgba(225, 249, 255, 0.68);
+  font-size: 11px;
+}
+
+.guide-band-list span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.guide-band-list span i {
+  width: 8px;
+  height: 8px;
+}
+
+.guide-band-list strong {
+  color: #ffe06b;
+  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
+}
+
+.guide-card-content.is-rank-list {
+  display: grid;
+  align-content: center;
+  gap: 9px;
+  padding: 4px 16px 9px;
+  box-sizing: border-box;
+}
+
+.guide-rank-row {
+  display: grid;
+  grid-template-columns: 22px 62px minmax(0, 1fr) 58px;
+  align-items: center;
+  gap: 8px;
+  color: rgba(225, 249, 255, 0.68);
+  font-size: 11px;
+}
+
+.guide-rank-row span {
+  color: #24f6c4;
+  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.guide-rank-row em {
+  overflow: hidden;
+  color: rgba(225, 249, 255, 0.86);
+  font-style: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.guide-rank-row i {
+  height: 7px;
+  overflow: hidden;
+  background: rgba(48, 220, 255, 0.1);
+}
+
+.guide-rank-row b {
+  display: block;
+  height: 100%;
+  background: linear-gradient(90deg, rgba(36, 246, 196, 0.18), #24f6c4);
+  box-shadow: 0 0 12px rgba(36, 246, 196, 0.25);
+}
+
+.guide-rank-row strong {
+  color: #ffe06b;
+  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
+  text-align: right;
+}
+
+.guide-card-content.is-warning-band {
+  display: grid;
+  grid-template-columns: 104px minmax(0, 1fr);
+  align-items: center;
+  gap: 16px;
+  padding: 14px 18px 14px;
+  box-sizing: border-box;
+}
+
+.guide-warning-core {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 92px;
+  height: 92px;
+  border: 1px solid rgba(36, 246, 196, 0.32);
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 50% 50%, rgba(36, 246, 196, 0.16), rgba(48, 220, 255, 0.08) 58%, rgba(3, 22, 35, 0.2) 60%),
+    conic-gradient(#24f6c4 0 86%, rgba(48, 220, 255, 0.12) 86% 100%);
+  box-shadow: 0 0 20px rgba(36, 246, 196, 0.16);
+}
+
+.guide-warning-core::after {
+  content: "";
+  position: absolute;
+  inset: 13px;
+  border-radius: 50%;
+  background: rgba(3, 18, 31, 0.94);
+}
+
+.guide-warning-core strong,
+.guide-warning-core span {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+}
+
+.guide-warning-core strong {
+  color: #ffe06b;
+  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
+  font-size: 25px;
+  line-height: 1;
+}
+
+.guide-warning-core span {
+  margin-top: -16px;
+  color: rgba(225, 249, 255, 0.64);
+  font-size: 10px;
+  line-height: 1;
+}
+
+.guide-warning-list {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+}
+
+.guide-warning-list div {
+  display: grid;
+  grid-template-columns: 56px 32px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: rgba(225, 249, 255, 0.72);
+  font-size: 11px;
+}
+
+.guide-warning-list span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.guide-warning-list span i {
+  width: 8px;
+  height: 8px;
+  box-shadow: 0 0 10px currentColor;
+}
+
+.guide-warning-list em {
+  color: #ffffff;
+  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
+  font-style: normal;
+  text-align: right;
+}
+
+.guide-warning-list b {
+  display: block;
+  height: 7px;
+  overflow: hidden;
+  background: rgba(48, 220, 255, 0.1);
+}
+
+.guide-warning-list b i {
+  display: block;
+  height: 100%;
+  box-shadow: 0 0 12px currentColor;
+}
+
+.guide-card-content.is-target-stack {
+  display: grid;
+  align-content: center;
+  gap: 12px;
+  padding: 5px 18px 10px;
+  box-sizing: border-box;
+}
+
+.guide-target-row {
+  display: grid;
+  grid-template-columns: 70px minmax(0, 1fr) 42px;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.guide-target-row span {
+  color: rgba(225, 249, 255, 0.72);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.guide-target-row b {
+  position: relative;
+  display: block;
+  height: 9px;
+  overflow: hidden;
+  background: rgba(48, 220, 255, 0.1);
+}
+
+.guide-target-row b::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
+}
+
+.guide-target-row b i {
+  position: relative;
+  display: block;
+  height: 100%;
+  box-shadow: 0 0 14px currentColor;
+}
+
+.guide-target-row strong {
+  color: #ffe06b;
+  font-family: D-DIN, AlibabaPuHuiTi, "Microsoft YaHei", Arial, sans-serif;
+  font-size: 15px;
+  line-height: 1;
+  text-align: right;
+}
+
+@media (max-width: 1700px) {
+  .guide-chart-grid {
+    grid-template-columns: repeat(3, 398px);
+    width: 1218px;
+  }
+}
+
+@media (max-width: 1300px) {
+  .guide-chart-grid {
+    grid-template-columns: repeat(2, 398px);
+    width: 808px;
+  }
+}
+
 @media (max-width: 1180px) {
   .chart-guide-screen {
     padding: 24px 20px 34px;
@@ -876,6 +1150,11 @@ function axisRows(params) {
     align-items: flex-start;
     flex-direction: column;
   }
+
+  .guide-chart-grid {
+    grid-template-columns: repeat(2, 398px);
+    width: 808px;
+  }
 }
 
 @media (max-width: 760px) {
@@ -890,5 +1169,10 @@ function axisRows(params) {
   .guide-palette {
     grid-template-columns: repeat(3, 34px);
   }
+
+  .guide-chart-grid {
+    grid-template-columns: 398px;
+    width: 398px;
+  }
 }
 </style>