gx

src/view/analyze.vue

@@ -69,13 +69,19 @@
         </div>
         <div style="overflow: hidden">
           <div class="minPie">
-            <div class="minPieImg" style="letter-spacing: 1px">
+            <div
+              class="minPieImg"
+              style="letter-spacing: 1px"
+              @click="showEchartTy('集聚类型分布')"
+            >
               集聚类型分布
             </div>
             <Pie3dMt :list="minData.minPieData1"></Pie3dMt>
           </div>
           <div class="minPie">
-            <div class="minPieImg">年龄分布</div>
+            <div class="minPieImg" @click="showEchartTy('年龄分布')">
+              年龄分布
+            </div>
             <Pie3dMt2 :list="minData.minPieData2"></Pie3dMt2>
           </div>
         </div>
@@ -182,6 +188,34 @@
     </DialogElderly>
     <DialogMap :dialogShowMap="dialogShowMap" :title="mapTitle" @close="close">
     </DialogMap>
+    <DialogEcTy
+      :dialogShowEc="dialogShowEcTy"
+      :title="dataEc.title"
+      @close="close"
+    >
+      <template #echart>
+        <dialog_jjlxfb
+          :list="nlfb.list1"
+          :list2="nlfb.list2"
+          :list3="nlfb.list3"
+          :year="nlfb.year"
+        ></dialog_jjlxfb>
+      </template>
+    </DialogEcTy>
+    <DialogEcTy
+      :dialogShowEc="dialogShowEcTy1"
+      :title="dataEc.title"
+      @close="close"
+    >
+      <template #echart>
+        <dialog_nlfb
+          :list="nlfb.list1"
+          :list2="nlfb.list2"
+          :list3="nlfb.list3"
+          :year="nlfb.year"
+        ></dialog_nlfb>
+      </template>
+    </DialogEcTy>
   </div>
 </template>
 
@@ -197,10 +231,10 @@ import {
 import DialogEnrol from "./dialog/dialogEnrol.vue";
 import DialogElderly from "./dialog/diaLogElderlyData.vue";
 import DialogMap from "./dialog/dialogMap.vue";
+import DialogEcTy from "./dialog/dialogEcTy.vue";
 import right2 from "./echart_analyze/right2.vue";
 import right1 from "./echart_analyze/right1.vue";
 import jypx from "./echart_analyze/jypx.vue";
-
 import http from "@/utils/request.js";
 import Pie3dMt from "./echart_analyze/pie3dMt.vue";
 import Pie3dMt2 from "./echart_analyze/pie3dMt2.vue";
@@ -211,7 +245,8 @@ import ylXZZC from "./echart_analyze/ylXZZC.vue";
 import rxfx from "./echart_analyze/rxfx.vue";
 import FlipClock from "./echart_analyze/FlipClock.vue";
 import ePie4 from "./echart_analyze/pie4.vue";
-
+import dialog_nlfb from "./echart_analyze/dialog_nlfb.vue";
+import dialog_jjlxfb from "./echart_analyze/dialog_jjlxfb.vue";
 import ViewDataimg from "@/assets/images/sjfx/sjfx.png";
 import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
 import ViewDataimg2 from "@/assets/images/sjfx/sjfx2.png";
@@ -224,6 +259,8 @@ const showR = ref(false); //loading
 const dialogShowEnrol = ref(false);
 const dialogShowElderly = ref(false);
 const dialogShowMap = ref(false);
+const dialogShowEcTy = ref(false);
+const dialogShowEcTy1 = ref(false);
 const mapTitle = ref("");
 const dataTab = reactive({
   url: "",
@@ -466,13 +503,23 @@ const dataElderly = reactive({
     },
   ],
 });
-
+const dataEc = reactive({
+  title: "",
+});
+const nlfb = reactive({
+  year: [2022, 2023, 2024, 2025, 2026],
+  list1: [0, 1000, 500, 0, 0],
+  list2: [0, 2000, 1000, 0, 0],
+  list3: [0, 3000, 1500, 0, 0],
+});
 const showEnrol = () => {
   dialogShowEnrol.value = true;
 };
 const close = () => {
   dialogShowEnrol.value = false;
   dialogShowMap.value = false;
+  dialogShowEcTy.value = false;
+  dialogShowEcTy1.value = false;
 };
 const showEnrol1 = () => {
   dialogShowElderly.value = true;
@@ -480,7 +527,14 @@ const showEnrol1 = () => {
 const close1 = () => {
   dialogShowElderly.value = false;
 };
-
+const showEchartTy = (name) => {
+  dataEc.title = name;
+  if (name == "年龄分布") {
+    dialogShowEcTy1.value = true;
+  } else {
+    dialogShowEcTy.value = true;
+  }
+};
 //数据切换
 const tab_choose = ref([
   {
@@ -1197,6 +1251,7 @@ onBeforeUnmount(() => {
   position: relative;
   float: left;
   .minPieImg {
+    cursor: pointer;
     position: absolute;
     width: 137px;
     height: 20px;

src/view/dialog/dialogEcTy.vue

@@ -0,0 +1,219 @@
+
+<template>
+  <div class="dialogPage">
+    <el-dialog
+      v-model="dialogShowEc"
+      width="80vw"
+      :show-close="false"
+      center
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <template #header="{ close, titleId, titleClass }">
+        <div class="my-header">
+          <el-icon
+            size="26"
+            color="#fff"
+            @click="closeDialog"
+          >
+            <CircleCloseFilled />
+          </el-icon>
+        </div>
+      </template>
+
+      <div class="tabelPart">
+        <div class="bo">
+          <div class="title">
+            <div class="title_top">
+              <img
+                src="@/assets/images/table_l.png"
+                alt=""
+                style="margin-right: 10px"
+              />
+              <div class="name">{{ title }}详情</div>
+              <img
+                src="@/assets/images/table_r.png"
+                alt=""
+                style="margin-left: 10px"
+              />
+            </div>
+            <img
+              class="title_botton"
+              src="@/assets/images/table_c.png"
+              alt=""
+            />
+          </div>
+        </div>
+        <div style="width: 100%; height: 600px">
+            <slot name="echart"></slot>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import {
+  onMounted,
+  reactive,
+  ref,
+  onBeforeMount,
+  defineProps,
+  watch,
+  nextTick,
+} from "vue";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+import eL from "./echarts/echartLine.vue";
+
+const props = defineProps({
+  dialogShowEc: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
+  title: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+});
+const emit = defineEmits(["close"]);
+
+// 详情弹框
+const dialogShowEc = ref();
+const data = reactive({
+  title: "",
+  list1: [],
+  list2: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+
+// 监听
+watch(
+  () => props.dialogShowEc,
+  (newVal, oldVal) => {
+    dialogShowEc.value = newVal;
+  }
+);
+// 使用生命钩子
+onMounted(() => {
+  data.title = props.title;
+});
+
+const closeDialog = () => {
+  dialogShowEc.value = false;
+  emit("close");
+};
+
+</script>
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  --el-dialog-bg-color: none;
+  --el-dialog-width: 76% !important;
+}
+
+.my-header {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.tabelPart {
+  padding: 16px;
+  background: linear-gradient(
+      270deg,
+      rgba(0, 77, 131, 0.69) 0%,
+      rgba(0, 51, 83, 0.77) 50%,
+      rgba(0, 77, 131, 0.74) 100%
+    ),
+    radial-gradient(
+      66% 40% at 50% 0%,
+      rgba(1, 150, 243, 0.55) 0%,
+      rgba(0, 116, 255, 0) 100%
+    );
+  box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
+  border: 2px solid;
+  border-image: linear-gradient(
+      180deg,
+      rgba(21, 150, 255, 1),
+      rgba(0, 157, 227, 0)
+    )
+    2 2;
+
+  :deep(.el-table) {
+    --el-table-bg-color: none;
+    --el-table-tr-bg-color: none;
+    --el-table-header-bg-color: none;
+    background: none;
+    border: none;
+    --el-table-text-color: #fff;
+    --el-table-header-text-color: #fff;
+  }
+}
+
+.pagePart {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :deep(.el-pagination) {
+    --el-pagination-button-disabled-bg-color: none;
+    --el-pagination-bg-color: none;
+    --el-pagination-button-bg-color: none;
+    --el-pagination-button-color: #fff;
+    color: #fff;
+  }
+
+  :deep(.el-pagination button:disabled) {
+    background-color: rgba(0, 116, 255, 0) !important;
+  }
+  :deep(.el-pagination > .is-last) {
+    color: #ffffff;
+  }
+}
+
+.bo {
+  width: 100%;
+  display: flex;
+}
+
+.title {
+  margin: 10px auto;
+  display: flex;
+  flex-direction: column;
+
+  &_top {
+    display: flex;
+    align-items: end;
+
+    img {
+      height: 33px;
+      width: 33px;
+    }
+
+    .name {
+      font-family: PangMenZhengDao, PangMenZhengDao;
+      font-weight: 600;
+      font-size: 33px;
+      color: #ffffff;
+      line-height: 38px;
+      text-align: center;
+      font-style: normal;
+      letter-spacing: 2px;
+      background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
+      -webkit-background-clip: text;
+      /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent;
+      /*给文字设置成透明*/
+    }
+  }
+
+  &_botton {
+    margin-top: 5px;
+    height: 19px;
+  }
+}
+</style>

src/view/echart_analyze/dialog_jjlxfb.vue

@@ -0,0 +1,663 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup>
+import { onMounted, onBeforeMount, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+const emit = defineEmits(["shuju"]);
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const chart = ref(); // 创建DOM引用
+
+const colors = [
+  {
+    left: "rgba(234, 162, 57, .16)",
+    right: "rgba(234, 162, 57, .6)",
+    top: "rgba(234, 162, 57, 1)",
+    bottom: "rgba(234, 162, 57, .46)",
+    front: "rgba(234, 162, 57, .66)",
+  },
+  {
+    left: "rgba(14, 252, 255, .16)",
+    right: "rgba(14, 252, 255, .6)",
+    top: "rgba(14, 252, 255, 1)",
+    bottom: "rgba(14, 252, 255,  .46)",
+    front: "rgba(14, 252, 255, .66)",
+  },
+  {
+    left: "rgba(60, 143, 255, .16)",
+    right: "rgba(60, 143, 255, .6)",
+    top: "rgba(60, 143, 255, 1)",
+    bottom: "rgba(60, 143, 255, .46)",
+    front: "rgba(60, 143, 255, .66)",
+  },
+];
+const maxList = ref([
+  190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190,
+]);
+// const valueList = [20, 53, 47, 65, 29, 11, 10];
+const data = reactive({
+  list: [],
+  option: {},
+  Max: 200,
+  valueList: [20, 53, 47, 65, 29, 11, 10, 20, 53, 47, 65, 29, 11, 10, 30],
+  valueList2: [120, 153, 47, 65, 29, 11, 10, 20, 53, 47, 65, 29, 11, 10, 30],
+  xxname: [
+    "东华街道",
+    "大街乡",
+    "塔石镇",
+    "小南海镇",
+    "模环乡",
+    "横山镇",
+    "沐尘畲族乡",
+    "石佛乡",
+    "罗家乡",
+    "庙下乡",
+    "溪口镇",
+    "社阳乡",
+    "詹家镇",
+    "龙舟街道",
+    "湖镇镇",
+  ],
+});
+// 注册5个面图形:左侧、前面、右面、上面、下面
+//c0:左下角，c1：右下角,c2:右上角，c3：左上角
+// 绘制左侧面-ok rgba(103, 180, 233, 0.04)
+const CubeLeft_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 40, shape.y];
+    const c1 = [shape.x - 27, shape.y - 14];
+    const c2 = [xAxisPoint[0] - 27, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeFront_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 40, shape.y];
+    const c1 = [shape.x - 18, shape.y];
+    const c2 = [xAxisPoint[0] - 18, xAxisPoint[1]];
+    const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeRight_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 18, shape.y];
+    const c1 = [shape.x -5, shape.y - 14];
+    const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] - 18, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeTop_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    const c0 = [shape.x - 40, shape.y];
+    const c1 = [shape.x - 18, shape.y];
+    const c2 = [shape.x - 5, shape.y - 14];
+    const c3 = [shape.x - 27, shape.y - 14];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeBottom_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+
+    const c0 = [xAxisPoint[0] - 40, xAxisPoint[1]];
+    const c1 = [xAxisPoint[0] - 18, xAxisPoint[1]];
+    const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] - 27, xAxisPoint[1] - 14];
+
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+
+echarts.graphic.registerShape("CubeLeft_1", CubeLeft_1);
+echarts.graphic.registerShape("CubeFront_1", CubeFront_1);
+echarts.graphic.registerShape("CubeRight_1", CubeRight_1);
+echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
+echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
+// -------------------------
+const CubeLeft_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 0, shape.y];
+    const c1 = [shape.x +13, shape.y - 14];
+    const c2 = [xAxisPoint[0] +13, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeFront_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 0, shape.y];
+    const c1 = [shape.x + 22, shape.y];
+    const c2 = [xAxisPoint[0] + 22, xAxisPoint[1]];
+    const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeRight_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x + 22, shape.y];
+    const c1 = [shape.x + 35, shape.y - 14];
+    const c2 = [xAxisPoint[0] + 35, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] + 22, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeTop_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    const c0 = [shape.x - 0, shape.y];
+    const c1 = [shape.x + 22, shape.y];
+    const c2 = [shape.x + 35, shape.y - 14];
+    const c3 = [shape.x + 13, shape.y - 14];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeBottom_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+
+    const c0 = [xAxisPoint[0] - 0, xAxisPoint[1]];
+    const c1 = [xAxisPoint[0] + 22, xAxisPoint[1]];
+    const c2 = [xAxisPoint[0] + 35, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
+
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+
+echarts.graphic.registerShape("CubeLeft_2", CubeLeft_2);
+echarts.graphic.registerShape("CubeFront_2", CubeFront_2);
+echarts.graphic.registerShape("CubeRight_2", CubeRight_2);
+echarts.graphic.registerShape("CubeTop_2", CubeTop_2);
+echarts.graphic.registerShape("CubeBottom_2", CubeBottom_2);
+
+// ------------------------------
+const getOption = () => {
+  data.option = {
+    legend: {
+      data: [
+        "转入人数(含同乡镇跨村聚集人口)",
+        "转出人数(含同乡镇跨村聚集人口)",
+      ],
+      top: "0%",
+      right: "30%",
+      textStyle: {
+        fontSize: 16,
+        color: "#ffffff",
+      },
+    },
+    tooltip: {
+      trigger: "axis",
+      //   formatter: "{b0}:{c1}",
+    },
+    grid: {
+      left: 0,
+      right: 0,
+      bottom: 10,
+      top: 40,
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: data.xxname,
+        axisLine: {
+          show: false,
+        },
+        offset: 10,
+
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: "#fff",
+          fontSize: 16,
+          formatter: function (value) {
+            return value.length > 3 ? value.slice(0, 2) + "..." : value;
+          },
+        },
+      },
+      {
+        type: "category",
+        data: data.xxname,
+        axisLine: {
+          show: false,
+        },
+        offset: 10,
+
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+          color: "#fff",
+          fontSize: 16,
+        },
+      },
+    ],
+    yAxis: {
+      min: 0,
+      max: data.Max,
+      // interval: 100,
+      type: "value",
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(255, 255, 255, .16)",
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(255, 255, 255, .16)",
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        fontSize: 16,
+        color: "#fff",
+      },
+    },
+    series: [
+      //阴影部分
+      //   {
+      //     type: "custom",
+      //     renderItem: function (params, api) {
+      //       // console.log(api);
+      //       const location = api.coord([api.value(0), api.value(1)]);
+      //       return {
+      //         type: "group",
+      //         children: [
+      //           {
+      //             type: "CubeBottom_1",
+      //             shape: {
+      //               api,
+      //               x: location[0],
+      //               y: location[1],
+      //               xAxisPoint: api.coord([api.value(0), 0]),
+      //             },
+      //             style: {
+      //               fill: "rgba(103, 180, 233, .16)",
+      //             },
+      //           },
+      //           {
+      //             type: "CubeLeft_1",
+      //             shape: {
+      //               api,
+      //               x: location[0],
+      //               y: location[1],
+      //               xAxisPoint: api.coord([api.value(0), 0]),
+      //             },
+      //             style: {
+      //               fill: "rgba(103, 180, 233, .04)",
+      //             },
+      //           },
+      //           {
+      //             type: "CubeFront_1",
+      //             shape: {
+      //               api,
+      //               x: location[0],
+      //               y: location[1],
+      //               xAxisPoint: api.coord([api.value(0), 0]),
+      //             },
+      //             style: {
+      //               fill: "rgba(103, 180, 233, .16)",
+      //             },
+      //           },
+      //           {
+      //             type: "CubeRight_1",
+      //             shape: {
+      //               api,
+      //               x: location[0],
+      //               y: location[1],
+      //               xAxisPoint: api.coord([api.value(0), 0]),
+      //             },
+      //             style: {
+      //               fill: "rgba(103, 180, 233, .08)",
+      //             },
+      //           },
+      //           {
+      //             type: "CubeTop_1",
+      //             shape: {
+      //               api,
+      //               x: location[0],
+      //               y: location[1],
+      //               xAxisPoint: api.coord([api.value(0), 0]),
+      //             },
+      //             style: {
+      //               fill: "rgba(103, 180, 233, .26)",
+      //             },
+      //           },
+      //         ],
+      //       };
+      //     },
+      //     data: maxList.value,
+      //   },
+      {
+        xAxisIndex: 0,
+        name: "转入人数(含同乡镇跨村聚集人口)",
+        type: "custom",
+        renderItem: (params, api) => {
+          const location = api.coord([api.value(0), api.value(1)]);
+
+          return {
+            type: "group",
+            children: [
+              {
+                type: "CubeBottom_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[0]["bottom"],
+                },
+              },
+              {
+                type: "CubeLeft_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[0]["left"],
+                },
+              },
+                {
+                  type: "CubeFront_1",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: colors[0]["front"],
+                  },
+                },
+              {
+                type: "CubeRight_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[0]["right"],
+                },
+              },
+                {
+                  type: "CubeTop_1",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: colors[0]["top"],
+                  },
+                },
+            ],
+          };
+        },
+
+        data: data.valueList,
+      },
+        {
+          xAxisIndex: 0,
+          name: "转出人数(含同乡镇跨村聚集人口)",
+          type: "custom",
+          renderItem: (params, api) => {
+            const location = api.coord([api.value(0), api.value(1)]);
+
+            return {
+              type: "group",
+              children: [
+                {
+                  type: "CubeBottom_2",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: colors[1]["bottom"],
+                  },
+                },
+                {
+                  type: "CubeLeft_2",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: colors[1]["left"],
+                  },
+                },
+                {
+                  type: "CubeFront_2",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: colors[1]["front"],
+                  },
+                },
+                {
+                  type: "CubeRight_2",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: colors[1]["right"],
+                  },
+                },
+                {
+                  type: "CubeTop_2",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0]),
+                  },
+                  style: {
+                    fill: colors[1]["top"],
+                  },
+                },
+              ],
+            };
+          },
+
+          data: data.valueList2,
+        },
+    ],
+  };
+};
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+  myChart.on("click", function (params) {
+    emit("shuju", params.name);
+  });
+};
+const getMaxCeilingValue = (arr) => {
+  let max = Math.max(...arr); // 找到数组中的最大值
+  return Math.ceil(max / 100) * 100; // 将最大值向上取整到最近的100的倍数
+};
+const setChart1 = () => {
+  data.valueList = [];
+  data.xxname = [];
+  if (data.list.length !== 0) {
+    data.list.forEach((item) => {
+      data.xxname.push(item.name); //信息名
+      data.valueList.push(item.num); //信息数
+    });
+  }
+};
+
+onBeforeMount(() => {
+  setTimeout(() => {
+    // data.list = props.list;
+    // setChart1();
+    // data.Max = getMaxCeilingValue(data.valueList);
+    // maxList.value = data.valueList.map((item) => parseInt(data.Max)   * 0.9);// 生成新的数组，将每个值都替换为 data.Max 的90%
+    getOption();
+    setChart();
+  }, 800);
+});
+</script>
+
+<style lang="scss" scoped></style>

src/view/echart_analyze/dialog_nlfb.vue

@@ -0,0 +1,283 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup >
+import {
+  onMounted,
+  reactive,
+  ref,
+  onBeforeMount,
+  defineProps,
+  watch,
+} from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  list2: {
+    type: Array,
+    default: () => [],
+  },
+  list3: {
+    type: Array,
+    default: () => [],
+  },
+  year: {
+    type: Array,
+    default: () => [],
+  },
+});
+const data = reactive({
+  list: [],
+  list2: [],
+  list3: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+
+const chart = ref(); // 创建DOM引用
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+    },
+    legend: {
+      data: ["0-18岁", "19-60岁", "60岁以上"],
+      top: "3%",
+      right: "40%",
+      textStyle: {
+        fontSize: 16,
+        color: "#ffffff",
+      },
+    },
+    grid: {
+      top: "15%",
+      left: "1%",
+      right: "10%",
+      bottom: "3%",
+      containLabel: true,
+    },
+
+    xAxis: {
+      type: "category",
+      // boundaryGap: false,
+      data: data.year,
+      // splitArea: {
+      //   show: true,
+      //   interval: '10',
+      //   areaStyle: {
+      //     color: ["rgba(255, 255, 255, 0.10)"],
+      //     width:10,
+      //   },
+      // },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+    },
+    series: [
+      {
+        name: "0-18岁",
+        type: "line",
+        stack: "Total",
+        symbol: "emptyCircle",
+        smooth: true,
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#E8FF00",
+          borderWidth: 1,
+          color: "#E8FF00",
+        },
+        label: {
+          show: true,
+          color: "#ffffff",
+          position: "top",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        areaStyle: {
+          color: "#F4F65B",
+          normal: {
+            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  // color: 'RGBA(184, 204, 241, 1)'
+                  color: "rgba(255, 234, 90, 0.50)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(255, 234, 90, 0)",
+                },
+              ],
+              false
+            ),
+            shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+          },
+        },
+        data: data.list,
+      },
+      {
+        name: "19-60岁",
+        type: "line",
+        stack: "Total",
+        symbol: "emptyCircle",
+        smooth: true,
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#00FCFF",
+        },
+        label: {
+          show: true,
+          color: "#ffffff",
+          position: "top",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        areaStyle: {
+          color: "#F4F65B",
+          normal: {
+            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  // color: 'RGBA(184, 204, 241, 1)'
+                  color: "rgba(0, 252, 255, 0.50)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(0, 252, 255, 0)",
+                },
+              ],
+              false
+            ),
+            shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+          },
+        },
+        data: data.list2,
+      },
+      {
+        name: "60岁以上",
+        type: "line",
+        stack: "Total",
+        symbol: "emptyCircle",
+        smooth: true,
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#00A8FF",
+          borderWidth: 1,
+          color: "#00A8FF",
+        },
+        label: {
+          show: true,
+          color: "#ffffff",
+          position: "top",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        areaStyle: {
+          color: "#00A8FF",
+          normal: {
+            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: "rgba(0, 168, 255,0.50)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(0, 168, 255,0)",
+                },
+              ],
+              false
+            ),
+            shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+          },
+        },
+        data: data.list3,
+      },
+    ],
+  };
+};
+watch(
+  () => props.list,
+  (newValue, oldValue) => {
+    setTimeout(() => {
+      data.list = props.list;
+      data.list2 = props.list2;
+      data.year = props.year;
+      getOption();
+      setChart();
+    }, 600);
+  }
+);
+
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.list2 = props.list2;
+    data.list3 = props.list3;
+    data.year = props.year;
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped>
+</style>