From 8f3874f4b960cd3a3af1dfe1ebaf8bc3e42a655a Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Wed, 15 May 2024 17:30:56 +0800
Subject: [PATCH] gx

---
 src/view/echarts_yl/pie3d.vue | 968 ++++++++++++++++++----------------
 src/view/yl.vue               |  21 +-
 2 files changed, 525 insertions(+), 464 deletions(-)

diff --git a/src/view/echarts_yl/pie3d.vue b/src/view/echarts_yl/pie3d.vue
index 6c11250..70396c4 100644
--- a/src/view/echarts_yl/pie3d.vue
+++ b/src/view/echarts_yl/pie3d.vue
@@ -1,492 +1,546 @@
 <template>
-    <div ref="chart" style="width:100%;height:250px;"></div>
+  <div ref="chart" style="width: 100%; height: 250px"></div>
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import {
+  onMounted,
+  onBeforeMount,
+  ref,
+  reactive,
+  defineProps,
+  nextTick,
+} from "vue";
 // 局部引入echarts核心模块
-import * as echarts from 'echarts'
-import 'echarts-gl';
+import * as echarts from "echarts";
+import "echarts-gl";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
 
 const chart = ref(); // 创建DOM引用
 
-const colorList = ['#FFE35F','#0081FF','#8ABEDB','#25B9C8','#30EB92','rgba(69, 244, 245)', 'rgba(7, 166, 255)', 'rgba(255, 208, 118)', 'rgba(109, 148, 198)', 'rgba(255, 255, 255)']
+const data = reactive({
+  list: [],
+  option: {},
+});
+
+const colorList = [
+  "#FFE35F",
+  "#0081FF",
+  "#8ABEDB",
+  "#25B9C8",
+  "#30EB92",
+  "rgba(69, 244, 245)",
+  "rgba(7, 166, 255)",
+  "rgba(255, 208, 118)",
+  "rgba(109, 148, 198)",
+  "rgba(255, 255, 255)",
+];
 
 const pieData = [
-    {
-        name: "60-70岁", //名称
-        value: 101243, //值
-    },
-    {
-        name: "70-80岁",
-        value: 84253,
-    },
-    {
-        name: "80-90岁",
-        value: 14325,
-    },
-    {
-        name: "90-100岁",
-        value: 4325,
-    },
-    {
-        name: "100岁以上",
-        value: 563,
-    }
-]
+  {
+    name: "60-70岁", //名称
+    value: 79357, //值
+  },
+  {
+    name: "70-80岁",
+    value: 57842,
+  },
+  {
+    name: "80-90岁",
+    value: 40934,
+  },
+  {
+    name: "90-100岁",
+    value: 11375,
+  },
+  {
+    name: "100岁以上",
+    value: 1945,
+  },
+];
 
 const serData = pieData.map((dItem, index) => {
-      return {
-        ...dItem,
-        value: Number(dItem.value),
-        itemStyle: {
-          color: colorList[index]
-        },
-      }
-    })
+  return {
+    ...dItem,
+    value: Number(dItem.value),
+    itemStyle: {
+      color: colorList[index],
+    },
+  };
+});
 
 //设置图表配置项
-const option = getPie3D(serData, 0.8)
+// const option = getPie3D(serData, 0.8);
+
+const getOption = () => {
+  data.option = getPie3D(serData, 0.8);
+};
 
 // 生成模拟 3D 饼图的配置项
 function getPie3D(pieData, internalDiameterRatio) {
-    let series = [];
-    let sumValue = 0;
-    let startValue = 0;
-    let endValue = 0;
-    let legendData = [];
-    let k =
-        typeof internalDiameterRatio !== 'undefined'
-            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
-            : 1 / 3;
+  let series = [];
+  let sumValue = 0;
+  let startValue = 0;
+  let endValue = 0;
+  let legendData = [];
+  let k =
+    typeof internalDiameterRatio !== "undefined"
+      ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+      : 1 / 3;
 
-    // 为每一个饼图数据，生成一个 series-surface 配置
-    for (let i = 0; i < pieData.length; i++) {
-        sumValue += pieData[i].value;
+  // 为每一个饼图数据，生成一个 series-surface 配置
+  for (let i = 0; i < pieData.length; i++) {
+    sumValue += pieData[i].value;
 
-        let seriesItem = {
-            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
-            type: 'surface',
-            parametric: true,
-            wireframe: {
-                show: false,
-            },
-            pieData: pieData[i],
-            pieStatus: {
-                selected: false,
-                hovered: false,
-                k: 1 / 10,
-            },
-        };
-
-        if (typeof pieData[i].itemStyle != 'undefined') {
-            let itemStyle = {};
-
-            typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
-            typeof pieData[i].itemStyle.opacity != 'undefined'
-                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
-                : null;
-
-            seriesItem.itemStyle = itemStyle;
-        }
-        series.push(seriesItem);
-    }
-
-    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
-    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-    for (let i = 0; i < series.length; i++) {
-        endValue = startValue + series[i].pieData.value;
-
-        series[i].pieData.startRatio = startValue / sumValue;
-        series[i].pieData.endRatio = endValue / sumValue;
-        series[i].parametricEquation = getParametricEquation(
-            series[i].pieData.startRatio,
-            series[i].pieData.endRatio,
-            false,
-            false,
-            k,
-            series[i].pieData.value
-        );
-
-        startValue = endValue;
-
-        legendData.push(series[i].name);
-    }
-
-    // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
-    // series.push({
-    //     name: 'mouseoutSeries',
-    //     type: 'surface',
-    //     parametric: true,
-    //     wireframe: {
-    //         show: false,
-    //     },
-    //     width: '30px',
-    //     itemStyle: {
-    //         opacity: 0.7,
-    //         color: '#fff',
-    //     },
-    //     parametricEquation: {
-    //         u: {
-    //             min: 0,
-    //             max: Math.PI * 2,
-    //             step: Math.PI / 20,
-    //         },
-    //         v: {
-    //             min: 0,
-    //             max: Math.PI ,
-    //             step: Math.PI / 20,
-    //         },
-    //         x: function (u, v) {
-    //             return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI);
-    //         },
-    //         y: function (u, v) {
-    //             return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) ;
-    //         },
-    //         z: function (u, v) {
-    //             return Math.cos(v) > 0 ? -6 : -7;
-    //         },
-    //     },
-    // });
-
-    // 准备待返回的配置项，把准备好的 legendData、series 传入。
-    let option = {
-        //animation: false,
-        //图例组件
-        legend: {
-            data: legendData,
-            color: [
-                "#8FD7FC",
-                "#466BE7",
-                "#F4BB29",
-                "#49C384",
-                "#8FD7FC",
-                "#466BE7",
-                "#F4BB29",
-                "#49C384",
-            ],
-            width: '40%',
-            //图例列表的布局朝向。
-            orient: "vertical",
-            right: 20,
-            // bottom: 20,
-            top: 'center',
-            // left: '10px',
-            //图例文字每项之间的间隔
-            itemGap: 10,
-            show: true,
-            icon: "rect",
-            itemHeight: 10,
-            itemWidth: 25,
-            textStyle: {
-                //图例字体大小
-                fontSize: 14,
-                color: "#B8DDFF",
-                lineHeight: 20,
-            },
-
-            //格式化图例文本
-            formatter: function (name) {
-                var target;
-                for (var i = 0, l = pieData.length; i < l; i++) {
-                    if (pieData[i].name == name) {
-                        target = pieData[i].value;
-                    }
-                }
-                if(name == '90-100岁'){
-                    return `   ${name}           ${target} 人`;
-                }else if(name == '100岁以上'){
-                    return `   ${name}          ${target} 人`;
-                }else{
-                    return `   ${name}             ${target} 人`;
-                }
-            },
-        },
-        //移动上去提示的文本内容
-        tooltip: {
-            backgroundColor: "rgba(18, 55, 85, 0.8);",
-            borderColor: "transparent",
-            formatter: (params) => {
-                if (
-                    params.seriesName !== "mouseoutSeries" &&
-                    params.seriesName !== "pie2d"
-                ) {
-                    let bfb = (
-                        (option.series[params.seriesIndex].pieData.endRatio -
-                            option.series[params.seriesIndex].pieData.startRatio) *
-                        100
-                    ).toFixed(2);
-                    const value = option.series[params.seriesIndex].pieData.value;
-                    return (
-                        `<div style='color:rgba(214, 243, 255, 0.9);'>` +
-                        `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
-                        `${params.seriesName}<br/>` +
-                        `<span style='margin-right:20px'>${value}人</span>` +
-                        `<span >${bfb}%</span>` +
-                        `</div>`
-                    );
-                }
-            },
-        },
-        xAxis3D: {},
-        yAxis3D: {},
-        zAxis3D: {},
-        grid3D: {
-            viewControl: {
-                autoRotate: true,
-                rotateSensitivity: 0, //设置为0无法旋转
-                zoomSensitivity: 0, //设置为0无法缩放
-                panSensitivity: 0, //设置为0无法平移
-                alpha: 25, //角度(这个很重要 调节角度的)
-                distance: 100, //调整视角到主体的距离，类似调整zoom(这是整体大小)
-            },
-            top: '-30',
-            left: '-120',
-            width: '100%',
-            show: false,
-            boxHeight: 20,
-        },
-        series: series,
+    let seriesItem = {
+      name:
+        typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
+      type: "surface",
+      parametric: true,
+      wireframe: {
+        show: false,
+      },
+      pieData: pieData[i],
+      pieStatus: {
+        selected: false,
+        hovered: false,
+        k: 1 / 10,
+      },
     };
-    return option;
+
+    if (typeof pieData[i].itemStyle != "undefined") {
+      let itemStyle = {};
+
+      typeof pieData[i].itemStyle.color != "undefined"
+        ? (itemStyle.color = pieData[i].itemStyle.color)
+        : null;
+      typeof pieData[i].itemStyle.opacity != "undefined"
+        ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+        : null;
+
+      seriesItem.itemStyle = itemStyle;
+    }
+    series.push(seriesItem);
+  }
+
+  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+  for (let i = 0; i < series.length; i++) {
+    endValue = startValue + series[i].pieData.value;
+
+    series[i].pieData.startRatio = startValue / sumValue;
+    series[i].pieData.endRatio = endValue / sumValue;
+    series[i].parametricEquation = getParametricEquation(
+      series[i].pieData.startRatio,
+      series[i].pieData.endRatio,
+      false,
+      false,
+      k,
+      series[i].pieData.value
+    );
+
+    startValue = endValue;
+
+    legendData.push(series[i].name);
+  }
+
+  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
+  // series.push({
+  //     name: 'mouseoutSeries',
+  //     type: 'surface',
+  //     parametric: true,
+  //     wireframe: {
+  //         show: false,
+  //     },
+  //     width: '30px',
+  //     itemStyle: {
+  //         opacity: 0.7,
+  //         color: '#fff',
+  //     },
+  //     parametricEquation: {
+  //         u: {
+  //             min: 0,
+  //             max: Math.PI * 2,
+  //             step: Math.PI / 20,
+  //         },
+  //         v: {
+  //             min: 0,
+  //             max: Math.PI ,
+  //             step: Math.PI / 20,
+  //         },
+  //         x: function (u, v) {
+  //             return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI);
+  //         },
+  //         y: function (u, v) {
+  //             return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) ;
+  //         },
+  //         z: function (u, v) {
+  //             return Math.cos(v) > 0 ? -6 : -7;
+  //         },
+  //     },
+  // });
+
+  // 准备待返回的配置项，把准备好的 legendData、series 传入。
+  let option = {
+    //animation: false,
+    //图例组件
+    legend: {
+      data: legendData,
+      color: [
+        "#8FD7FC",
+        "#466BE7",
+        "#F4BB29",
+        "#49C384",
+        "#8FD7FC",
+        "#466BE7",
+        "#F4BB29",
+        "#49C384",
+      ],
+      width: "40%",
+      //图例列表的布局朝向。
+      orient: "vertical",
+      right: 20,
+      // bottom: 20,
+      top: "center",
+      // left: '10px',
+      //图例文字每项之间的间隔
+      itemGap: 10,
+      show: true,
+      icon: "rect",
+      itemHeight: 10,
+      itemWidth: 25,
+      textStyle: {
+        //图例字体大小
+        fontSize: 14,
+        color: "#B8DDFF",
+        lineHeight: 20,
+      },
+
+      //格式化图例文本
+      formatter: function (name) {
+        var target;
+        for (var i = 0, l = pieData.length; i < l; i++) {
+          if (pieData[i].name == name) {
+            target = pieData[i].value;
+          }
+        }
+        if (name == "90-100岁") {
+          return `   ${name}           ${target} 人`;
+        } else if (name == "100岁以上") {
+          return `   ${name}          ${target} 人`;
+        } else {
+          return `   ${name}             ${target} 人`;
+        }
+      },
+    },
+    //移动上去提示的文本内容
+    tooltip: {
+      backgroundColor: "rgba(18, 55, 85, 0.8);",
+      borderColor: "transparent",
+      formatter: (params) => {
+        if (
+          params.seriesName !== "mouseoutSeries" &&
+          params.seriesName !== "pie2d"
+        ) {
+          let bfb = (
+            (option.series[params.seriesIndex].pieData.endRatio -
+              option.series[params.seriesIndex].pieData.startRatio) *
+            100
+          ).toFixed(2);
+          const value = option.series[params.seriesIndex].pieData.value;
+          return (
+            `<div style='color:rgba(214, 243, 255, 0.9);'>` +
+            `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+            `${params.seriesName}<br/>` +
+            `<span style='margin-right:20px'>${value}人</span>` +
+            `<span >${bfb}%</span>` +
+            `</div>`
+          );
+        }
+      },
+    },
+    xAxis3D: {},
+    yAxis3D: {},
+    zAxis3D: {},
+    grid3D: {
+      viewControl: {
+        autoRotate: true,
+        rotateSensitivity: 0, //设置为0无法旋转
+        zoomSensitivity: 0, //设置为0无法缩放
+        panSensitivity: 0, //设置为0无法平移
+        alpha: 25, //角度(这个很重要 调节角度的)
+        distance: 100, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+      },
+      top: "-30",
+      left: "-120",
+      width: "100%",
+      show: false,
+      boxHeight: 20,
+    },
+    series: series,
+  };
+  return option;
 }
 
 // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
-function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
-    // 计算
-    let midRatio = (startRatio + endRatio) / 2;
-    let startRadian = startRatio * Math.PI * 2;
-    let endRadian = endRatio * Math.PI * 2;
-    let midRadian = midRatio * Math.PI * 2;
-    // 如果只有一个扇形，则不实现选中效果。
-    if (startRatio === 0 && endRatio === 1) {
-        isSelected = false;
-    }
-    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-    k = typeof k !== "undefined" ? k : 1 / 3;
-    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-    // 计算高亮效果的放大比例（未高亮，则比例为 1）
-    let hoverRate = isHovered ? 1.05 : 1;
-    // 返回曲面参数方程
-    return {
-        u: {
-            min: -Math.PI,
-            max: Math.PI * 3,
-            step: Math.PI / 32,
-        },
-        v: {
-            min: 0,
-            max: Math.PI * 2,
-            step: Math.PI / 20,
-        },
-        x: function (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: function (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: function (u, v) {
-            if (u < -Math.PI * 0.5) {
-                return Math.sin(u);
-            }
-            if (u > Math.PI * 2.5) {
-                return Math.sin(u) * h * 0.1;
-            }
-            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
-        },
-    };
-};
+function getParametricEquation(
+  startRatio,
+  endRatio,
+  isSelected,
+  isHovered,
+  k,
+  h
+) {
+  // 计算
+  let midRatio = (startRatio + endRatio) / 2;
+  let startRadian = startRatio * Math.PI * 2;
+  let endRadian = endRatio * Math.PI * 2;
+  let midRadian = midRatio * Math.PI * 2;
+  // 如果只有一个扇形，则不实现选中效果。
+  if (startRatio === 0 && endRatio === 1) {
+    isSelected = false;
+  }
+  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+  k = typeof k !== "undefined" ? k : 1 / 3;
+  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+  let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+  let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  // 计算高亮效果的放大比例（未高亮，则比例为 1）
+  let hoverRate = isHovered ? 1.05 : 1;
+  // 返回曲面参数方程
+  return {
+    u: {
+      min: -Math.PI,
+      max: Math.PI * 3,
+      step: Math.PI / 32,
+    },
+    v: {
+      min: 0,
+      max: Math.PI * 2,
+      step: Math.PI / 20,
+    },
+    x: function (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: function (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: function (u, v) {
+      if (u < -Math.PI * 0.5) {
+        return Math.sin(u);
+      }
+      if (u > Math.PI * 2.5) {
+        return Math.sin(u) * h * 0.1;
+      }
+      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    },
+  };
+}
 
 // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
 function bindListen(myChart) {
-    let selectedIndex = "";
-    let hoveredIndex = "";
-    // 监听点击事件，实现选中效果（单选）
-    myChart.on("click", function (params) {
-        //  从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
-        let isSelected =
-            !option.series[params.seriesIndex].pieStatus.selected;
-        let isHovered =
-            option.series[params.seriesIndex].pieStatus.hovered;
-        let k = option.series[params.seriesIndex].pieStatus.k;
-        let startRatio =
-            option.series[params.seriesIndex].pieData.startRatio;
-        let endRatio = option.series[params.seriesIndex].pieData.endRatio;
-        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
-        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
-            option.series[selectedIndex].parametricEquation =
-                getParametricEquation(
-                    option.series[selectedIndex].pieData.startRatio,
-                    option.series[selectedIndex].pieData.endRatio,
-                    false,
-                    false,
-                    k,
-                    option.series[selectedIndex].pieData.value
-                );
-            option.series[selectedIndex].pieStatus.selected = false;
-        }
-        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+  let selectedIndex = "";
+  let hoveredIndex = "";
+  // 监听点击事件，实现选中效果（单选）
+  myChart.on("click", function (params) {
+    //  从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+    let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
+    let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
+    let k = option.series[params.seriesIndex].pieStatus.k;
+    let startRatio = option.series[params.seriesIndex].pieData.startRatio;
+    let endRatio = option.series[params.seriesIndex].pieData.endRatio;
+    // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+    if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      option.series[selectedIndex].parametricEquation = getParametricEquation(
+        option.series[selectedIndex].pieData.startRatio,
+        option.series[selectedIndex].pieData.endRatio,
+        false,
+        false,
+        k,
+        option.series[selectedIndex].pieData.value
+      );
+      option.series[selectedIndex].pieStatus.selected = false;
+    }
+    // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+    option.series[params.seriesIndex].parametricEquation =
+      getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        option.series[params.seriesIndex].pieData.value
+      );
+    option.series[params.seriesIndex].pieStatus.selected = isSelected;
+    // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+    isSelected ? (selectedIndex = params.seriesIndex) : null;
+    // 使用更新后的 option，渲染图表
+    myChart.setOption(option);
+  });
+  // 监听 mouseover，近似实现高亮（放大）效果
+  myChart.on("mouseover", function (params) {
+    // 准备重新渲染扇形所需的参数
+    let isSelected;
+    let isHovered;
+    let startRatio;
+    let endRatio;
+    let k;
+    // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+    if (hoveredIndex === params.seriesIndex) {
+      return;
+      // 否则进行高亮及必要的取消高亮操作
+    } else {
+      // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+      if (hoveredIndex !== "") {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+        isSelected = option.series[hoveredIndex].pieStatus.selected;
+        isHovered = false;
+        startRatio = option.series[hoveredIndex].pieData.startRatio;
+        endRatio = option.series[hoveredIndex].pieData.endRatio;
+        k = option.series[hoveredIndex].pieStatus.k;
+        // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+        option.series[hoveredIndex].parametricEquation = getParametricEquation(
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          option.series[hoveredIndex].pieData.value
+        );
+        option.series[hoveredIndex].pieStatus.hovered = isHovered;
+        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+        hoveredIndex = "";
+      }
+      // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+      if (
+        params.seriesName !== "mouseoutSeries" &&
+        params.seriesName !== "pie2d"
+      ) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+        isSelected = option.series[params.seriesIndex].pieStatus.selected;
+        isHovered = true;
+        startRatio = option.series[params.seriesIndex].pieData.startRatio;
+        endRatio = option.series[params.seriesIndex].pieData.endRatio;
+        k = option.series[params.seriesIndex].pieStatus.k;
+        // 对当前点击的扇形，执行高亮操作（对 option 更新）
         option.series[params.seriesIndex].parametricEquation =
-            getParametricEquation(
-                startRatio,
-                endRatio,
-                isSelected,
-                isHovered,
-                k,
-                option.series[params.seriesIndex].pieData.value
-            );
-        option.series[params.seriesIndex].pieStatus.selected = isSelected;
-        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
-        isSelected ? (selectedIndex = params.seriesIndex) : null;
-        // 使用更新后的 option，渲染图表
-        myChart.setOption(option);
-    });
-    // 监听 mouseover，近似实现高亮（放大）效果
-    myChart.on("mouseover", function (params) {
-        // 准备重新渲染扇形所需的参数
-        let isSelected;
-        let isHovered;
-        let startRatio;
-        let endRatio;
-        let k;
-        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
-        if (hoveredIndex === params.seriesIndex) {
-            return;
-            // 否则进行高亮及必要的取消高亮操作
-        } else {
-            // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
-            if (hoveredIndex !== "") {
-                // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
-                isSelected = option.series[hoveredIndex].pieStatus.selected;
-                isHovered = false;
-                startRatio = option.series[hoveredIndex].pieData.startRatio;
-                endRatio = option.series[hoveredIndex].pieData.endRatio;
-                k = option.series[hoveredIndex].pieStatus.k;
-                // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-                option.series[hoveredIndex].parametricEquation =
-                    getParametricEquation(
-                        startRatio,
-                        endRatio,
-                        isSelected,
-                        isHovered,
-                        k,
-                        option.series[hoveredIndex].pieData.value
-                    );
-                option.series[hoveredIndex].pieStatus.hovered = isHovered;
-                // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-                hoveredIndex = "";
-            }
-            // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
-            if (
-                params.seriesName !== "mouseoutSeries" &&
-                params.seriesName !== "pie2d"
-            ) {
-                // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-                isSelected =
-                    option.series[params.seriesIndex].pieStatus.selected;
-                isHovered = true;
-                startRatio =
-                    option.series[params.seriesIndex].pieData.startRatio;
-                endRatio = option.series[params.seriesIndex].pieData.endRatio;
-                k = option.series[params.seriesIndex].pieStatus.k;
-                // 对当前点击的扇形，执行高亮操作（对 option 更新）
-                option.series[params.seriesIndex].parametricEquation =
-                    getParametricEquation(
-                        startRatio,
-                        endRatio,
-                        isSelected,
-                        isHovered,
-                        k,
-                        option.series[params.seriesIndex].pieData.value + 5
-                    );
-                option.series[params.seriesIndex].pieStatus.hovered =
-                    isHovered;
-                // 记录上次高亮的扇形对应的系列号 seriesIndex
-                hoveredIndex = params.seriesIndex;
-            }
+          getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            option.series[params.seriesIndex].pieData.value + 5
+          );
+        option.series[params.seriesIndex].pieStatus.hovered = isHovered;
+        // 记录上次高亮的扇形对应的系列号 seriesIndex
+        hoveredIndex = params.seriesIndex;
+      }
 
-            // 使用更新后的 option，渲染图表
-            myChart.setOption(option);
-        }
-    });
-    // 修正取消高亮失败的 bug
-    myChart.on("globalout", function () {
-        // 准备重新渲染扇形所需的参数
-        let isSelected;
-        let isHovered;
-        let startRatio;
-        let endRatio;
-        let k;
-        if (hoveredIndex !== "") {
-            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-            isSelected = option.series[hoveredIndex].pieStatus.selected;
-            isHovered = false;
-            k = option.series[hoveredIndex].pieStatus.k;
-            startRatio = option.series[hoveredIndex].pieData.startRatio;
-            endRatio = option.series[hoveredIndex].pieData.endRatio;
-            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-            option.series[hoveredIndex].parametricEquation =
-                getParametricEquation(
-                    startRatio,
-                    endRatio,
-                    isSelected,
-                    isHovered,
-                    k,
-                    option.series[hoveredIndex].pieData.value
-                );
-            option.series[hoveredIndex].pieStatus.hovered = isHovered;
-            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-            hoveredIndex = "";
-        }
-        // 使用更新后的 option，渲染图表
-        myChart.setOption(option);
-    });
+      // 使用更新后的 option，渲染图表
+      myChart.setOption(option);
+    }
+  });
+  // 修正取消高亮失败的 bug
+  myChart.on("globalout", function () {
+    // 准备重新渲染扇形所需的参数
+    let isSelected;
+    let isHovered;
+    let startRatio;
+    let endRatio;
+    let k;
+    if (hoveredIndex !== "") {
+      // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+      isSelected = option.series[hoveredIndex].pieStatus.selected;
+      isHovered = false;
+      k = option.series[hoveredIndex].pieStatus.k;
+      startRatio = option.series[hoveredIndex].pieData.startRatio;
+      endRatio = option.series[hoveredIndex].pieData.endRatio;
+      // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+      option.series[hoveredIndex].parametricEquation = getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        option.series[hoveredIndex].pieData.value
+      );
+      option.series[hoveredIndex].pieStatus.hovered = isHovered;
+      // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+      hoveredIndex = "";
+    }
+    // 使用更新后的 option，渲染图表
+    myChart.setOption(option);
+  });
 }
 
-
 // 使用生命钩子
-onMounted(() => {
-    // 基于准备好的dom，初始化echarts实例
-    // var myChart = echarts.init(document.getElementById('main'));
-    // Vue3中： 需要引入
-    var myChart = echarts.init(chart.value)
-    //设置交互事件 鼠标移入 点击
-    // bindListen(myChart)
-    // init(); // vue3.2没有this
-    // 使用刚指定的配置项和数据显示图表。
-    myChart.setOption(option);
-
-    // 单图表响应式: 跟随浏览器大小改变
-    window.addEventListener('resize', () => {
-        myChart.resize()
-    })
-
-})
+// onMounted(() => {
+//   // 基于准备好的dom，初始化echarts实例
+//   // var myChart = echarts.init(document.getElementById('main'));
+//   // Vue3中： 需要引入
+//   var myChart = echarts.init(chart.value);
+//   //设置交互事件 鼠标移入 点击
+//   // bindListen(myChart)
+//   // init(); // vue3.2没有this
+//   // 使用刚指定的配置项和数据显示图表。
+//   myChart.setOption(option);
 
+//   // 单图表响应式: 跟随浏览器大小改变
+//   window.addEventListener("resize", () => {
+//     myChart.resize();
+//   });
+// });
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+  // 单图表响应式: 跟随浏览器大小改变
+  window.addEventListener("resize", () => {
+    myChart.resize();
+  });
+};
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    // console.log(data.list,555);
+    // pieData[0].value=data.list.nl5160
+    // pieData[1].value=data.list.nl6170
+    // pieData[2].value=data.list.nl7180
+    // pieData[3].value=data.list.nl8190
+    // pieData[4].value=data.list.nl91100
+    getOption();
+    setChart();
+  }, 600);
+});
 </script>
 
 <style scoped></style>
diff --git a/src/view/yl.vue b/src/view/yl.vue
index acb8af4..4840623 100644
--- a/src/view/yl.vue
+++ b/src/view/yl.vue
@@ -136,10 +136,10 @@
           <div class="mtpImg1"></div>
           <div class="mtpImg2"></div>
           <div class="mtpImg3"></div>
-          <div class="mtpText1">588811</div>
-          <div class="mtpText2">18%</div>
+          <div class="mtpText1">{{ data.oldAgeTotal }}</div>
+          <div class="mtpText2">{{ data.oldAgePercent }}%</div>
         </div>
-        <ePie3d></ePie3d>
+        <ePie3d :list="data.rkgk"></ePie3d>
       </div>
       <div class="flex1">
         <div class="yd_title familyPlanning"></div>
@@ -156,7 +156,7 @@
         <div class="history">
           <div class="history1">
             <div>
-              <span>{{data.yljgzlzx.yljg}}<span class="unit">个</span></span>
+              <span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span>
             </div>
             <img src="@/assets/YLimg/ylimg11.png" alt="" />
             <img class="historyimg" src="@/assets/YLimg/ylimg5.png" alt="" />
@@ -170,7 +170,7 @@
           </div> -->
           <div class="history1">
             <div>
-              <span>{{data.yljgzlzx.zlzx}}<span class="unit">个</span></span>
+              <span>{{ data.yljgzlzx.zlzx }}<span class="unit">个</span></span>
             </div>
             <img src="@/assets/YLimg/ylimg12.png" alt="" />
             <img class="historyimg" src="@/assets/YLimg/ylimg10.png" alt="" />
@@ -203,8 +203,7 @@
             alt=""
           />
         </div>
-        <ylXZZC  :list1="data.zccs1"
-          :list2="data.zccs2"></ylXZZC>
+        <ylXZZC :list1="data.zccs1" :list2="data.zccs2"></ylXZZC>
       </div>
     </div>
   </div>
@@ -248,6 +247,9 @@ const data = reactive({
   leftbottom3: [],
   leftbottom4: [],
   leftbottomYear: [],
+  oldAgePercent: "",
+  oldAgeTotal: "",
+  rkgk: [],
   centerBottom1: [],
   centerBottom2: [],
   centerBottomYear: [],
@@ -300,6 +302,11 @@ const getData = async () => {
       });
       // 年份
       data.leftbottomYear = res.data.tkdbOldAge.year;
+      // 老年人各年龄及占比
+      data.oldAgePercent = res.data.lnrgnljzb.oldAgePercent;
+      data.oldAgeTotal = res.data.lnrgnljzb.oldAgeTotal;
+      data.rkgk = res.data.lnrgnljzb.rkgk;
+
       // 计划生育
       res.data.familyPlanning.familyPlanningData.forEach((element) => {
         data.centerBottom1.push(element.jhsyrs); // 人次