集聚类型分布+年龄分布

src/view/analyze.vue

@@ -76,13 +76,15 @@
             >
               集聚类型分布
             </div>
-            <Pie3dMt :list="minData.minPieData1"></Pie3dMt>
+            <!-- <Pie3dMt :list="minData.minPieData1"></Pie3dMt> -->
+            <PieMt :list="minData.minPieData1"></PieMt>
           </div>
           <div class="minPie">
             <div class="minPieImg" @click="showEchartTy('年龄分布')">
               年龄分布
             </div>
-            <Pie3dMt2 :list="minData.minPieData2"></Pie3dMt2>
+            <!-- <Pie3dMt2 :list="minData.minPieData2"></Pie3dMt2> -->
+            <PieMt2 :list="minData.minPieData2"></PieMt2>
           </div>
         </div>
 
@@ -260,9 +262,9 @@ 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";
 import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
+import PieMt from "./echart_analyze/pieMt.vue";
+import PieMt2 from "./echart_analyze/pieMt2.vue";
 import edxs from "./echart_analyze/edXS.vue";
 import eP2 from "./echart_analyze/eP2.vue";
 import ylXZZC from "./echart_analyze/ylXZZC.vue";
@@ -723,7 +725,9 @@ const tab_change = (index, name) => {
   }
 };
 const chooseXX = (name) => {
-  if (name == "交通") {
+  console.log(name);
+  
+  if (name == "公交出行信息推送") {
     mapTitle.value = "交通";
     dialogShowMap.value = true;
   }

src/view/echart_analyze/PieMt2.vue

@@ -0,0 +1,230 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 240px"></div>
+</template>
+    
+    <script setup>
+import {
+  onMounted,
+  onBeforeMount,
+  ref,
+  reactive,
+  defineProps,
+  nextTick,
+} from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+import "echarts-gl";
+
+const props = defineProps({
+  list: {
+    type: Object,
+  },
+});
+
+const chart = ref(); // 创建DOM引用
+
+const data = reactive({
+  list: [
+    {
+      name: "0-18岁", //名称
+      num: 0, //值
+      value: 9.67,
+    },
+    {
+      name: "19-60岁",
+      num: 0,
+      value: 63.37,
+    },
+    {
+      name: "60岁以上",
+      num: 0,
+      value: 26.97,
+    },
+  ],
+  option: {},
+});
+let sum = 0;
+let legendData = [];
+data.list.forEach((item) => {
+  sum += item.value * 1; // *1保证sum值为数值
+  legendData.push(item.name);
+});
+data.list.push({
+  name: "总数",
+  value: sum,
+  tooltip: { formatter: () => "" },
+  itemStyle: { normal: { color: "rgba(0, 0, 0, 0)" } },
+});
+const colorList = [
+  "#FFE35F",
+  "#0081FF",
+  "#8ABEDB",
+  "#25B9C8",
+  "#30EB92",
+  "rgba(69, 244, 245)",
+  "rgba(7, 166, 255)",
+  "rgba(255, 208, 118)",
+  "rgba(109, 168, 198)",
+  "rgba(255, 255, 255)",
+];
+
+const getOption = () => {
+  data.option = {
+    //你的代码
+    color: [
+      "#FFE35F",
+      "#0081FF",
+      "#8ABEDB",
+      "#25B9C8",
+      "#30EB92",
+      "rgba(69, 244, 245)",
+    ],
+    tooltip: {
+      backgroundColor: "rgba(18, 55, 85, 0.8);",
+      borderColor: "transparent",
+      trigger: "item",
+      axisPointer: {
+        type: "shadow",
+      },
+      formatter: function (params) {
+        const num = data.list[params.seriesIndex].num;
+        return (
+          `<div style='color:#FFFFFF;'>` +
+          `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+          `${params.name}` +
+          `<span >：${num}人</span>` +
+          `</div>`
+        );
+      },
+    },
+    legend: {
+      // formatter: function (params) {
+      //   let value = "";
+      //   let num = "";
+      //   for (let i = 0; i < data.list.length; i++) {
+      //     if (data.list[i].name == params) {
+      //       value = data.list[i].value;
+      //       num=data.list[i].num;
+      //     }
+      //   }
+      //   if (params == "总数") {
+      //     return ''
+      //   } else if(params == "0-18岁"){
+      //     // return `${params}    ${num}人    ${value}%`;
+      //     return params+'         '+num+'人'+'       '+value+'%'+'          ';
+      //   }else if(params == "19-60岁"){
+      //     return params+'      '+num+'人'+'     '+value+'%';
+      //   }else{
+      //     return params+'     '+num+'人'+'     '+value+'%';
+      //   }
+      // },
+      height: "30%",
+      //图例列表的布局朝向。
+      orient: "vertical",
+      left: "10%",
+      bottom: 2,
+      //图例文字每项之间的间隔
+      itemGap: 2,
+      show: true,
+      icon: "rect",
+      itemHeight: 12,
+      itemWidth: 25,
+      textStyle: {
+        //图例字体大小
+        fontSize: 14,
+        color: "#FFFFFF",
+        lineHeight: 20,
+      },
+      formatter: function (params) {
+        // 添加
+ 
+      let value = "";
+        let num = "";
+        for (let i = 0; i < data.list.length; i++) {
+          if (data.list[i].name == params) {
+            value = data.list[i].value;
+            num=data.list[i].num;
+          }
+        }
+        var arr = [
+          "{a|" + params + "}",
+          "{b|" +num + "人}",
+          "{c|" + value + "%}",
+        ];
+        if (params == "总数") {
+          return ''
+        }else{
+          return arr.join("  ");
+        }
+       
+      },
+      textStyle: {
+        // 添加
+        padding: [8, 15, 0, 10],
+        rich: {
+          a: {
+            color: "#ffffff",
+            fontSize: 15,
+            width: 60,
+          },
+          b: {
+            fontSize: 15,
+            color: "#FFBE53",
+            width:80,
+          },
+          c: {
+            fontSize: 15,
+            color: "#ffffff",
+          },
+        },
+      },
+    },
+    series: [
+      {
+        type: "pie",
+        radius: ["55%", "85%"],
+        center: ["50%", "50%"],
+        startAngle: 180,
+        itemStyle: {
+          borderRadius: 0,
+          borderColor: "#092958",
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+        },
+        emphasis: {
+          label: {
+            show: false,
+          },
+        },
+        data: data.list,
+      },
+    ],
+  };
+};
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+  // 单图表响应式: 跟随浏览器大小改变
+  window.addEventListener("resize", () => {
+    myChart.resize();
+  });
+};
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list[0].num = props.list.wfgz;
+    data.list[1].num = props.list.xstp;
+    data.list[2].num = props.list.skym;
+    //   data.list[3].num = props.list.xxdc;
+    //   data.list[4].num = props.list.dzzh;
+    //   data.list[5].num = props.list.zq;
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+    
+    <style scoped></style>
+    

src/view/echart_analyze/map.vue

@@ -16,9 +16,9 @@ var map = null;
 const initMap = () => {
   map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
   map.enableScrollWheelZoom(true);
-  map.setMapStyleV2({
+  // map.setMapStyleV2({
-    styleId: "d0acde891abd157741b71e12670ee2e6",
+  //   styleId: "d0acde891abd157741b71e12670ee2e6",
-  });
+  // });
   goMapCenter([119.178783, 29.034583], 15);
     // 开启交通流量图层
       // map.addTileLayer(new BMapGL.TrafficLayer());

src/view/echart_analyze/pieMt.vue

@@ -0,0 +1,187 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 240px"></div>
+</template>
+  
+  <script setup>
+import {
+  onMounted,
+  onBeforeMount,
+  ref,
+  reactive,
+  defineProps,
+  nextTick,
+} from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+import "echarts-gl";
+
+const props = defineProps({
+  list: {
+    type: Object,
+  },
+});
+
+const chart = ref(); // 创建DOM引用
+
+const data = reactive({
+  list: [
+    {
+      value: 2,
+      name: "危房改造",
+    },
+    {
+      value: 8,
+      name: "下山脱贫",
+    },
+    {
+      value: 10,
+      name: "水库移民",
+    },
+    {
+      value: 43,
+      name: "小县大城",
+    },
+    {
+      value: 15,
+      name: "地质灾害",
+    },
+    {
+      value: 22,
+      name: "征迁",
+    },
+  ],
+  option: {},
+});
+let sum = 0;
+let legendData = [];
+data.list.forEach((item) => {
+  sum += item.value * 1; // *1保证sum值为数值
+  legendData.push(item.name);
+});
+data.list.push({
+  name: "总数",
+  value: sum,
+  tooltip: { formatter: () => "" },
+  itemStyle: { normal: { color: "rgba(0, 0, 0, 0)" } },
+});
+const colorList = [
+  "#FFE35F",
+  "#0081FF",
+  "#8ABEDB",
+  "#25B9C8",
+  "#30EB92",
+  "rgba(69, 244, 245)",
+  "rgba(7, 166, 255)",
+  "rgba(255, 208, 118)",
+  "rgba(109, 168, 198)",
+  "rgba(255, 255, 255)",
+];
+
+const getOption = () => {
+  data.option = {
+    //你的代码
+    color: [
+      "#FFE35F",
+      "#0081FF",
+      "#8ABEDB",
+      "#25B9C8",
+      "#30EB92",
+      "rgba(69, 244, 245)",
+    ],
+    tooltip: {
+      backgroundColor: "rgba(18, 55, 85, 0.8);",
+      borderColor: "transparent",
+      trigger: "item",
+      axisPointer: {
+        type: "shadow",
+      },
+      formatter: function (params) {
+        return (
+          `<div style='color:#FFFFFF;'>` +
+          `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+          `${params.name}` +
+          `<span >；${params.value}%</span>` +
+          `</div>`
+        );
+      },
+    },
+    legend: {
+      formatter: function (params) {
+        var value = "";
+        for (let i = 0; i < data.list.length; i++) {
+          if (data.list[i].name == params) {
+            value = data.list[i].value;
+          }
+        }
+        if (params == "总数") {
+        } else {
+          return `${params}；${value}%`;
+        }
+      },
+      height: "30%",
+      //图例列表的布局朝向。
+      orient: "vertical",
+      left: "5%",
+      bottom: 2,
+      //图例文字每项之间的间隔
+      itemGap: 2,
+      show: true,
+      icon: "rect",
+      itemHeight: 12,
+      itemWidth: 25,
+      textStyle: {
+        //图例字体大小
+        fontSize: 14,
+        color: "#FFFFFF",
+        lineHeight: 20,
+      },
+    },
+    series: [
+      {
+        type: "pie",
+        radius: ["55%", "85%"],
+        center: ["50%", "50%"],
+        startAngle: 180,
+        itemStyle: {
+          borderRadius: 0,
+          borderColor: "#092958",
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+        },
+        emphasis: {
+          label: {
+            show: false,
+          },
+        },
+        data: data.list,
+      },
+    ],
+  };
+};
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+  // 单图表响应式: 跟随浏览器大小改变
+  window.addEventListener("resize", () => {
+    myChart.resize();
+  });
+};
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list[0].num = props.list.wfgz;
+    data.list[1].num = props.list.xstp;
+    data.list[2].num = props.list.skym;
+    data.list[3].num = props.list.xxdc;
+    data.list[4].num = props.list.dzzh;
+    data.list[5].num = props.list.zq;
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+  
+  <style scoped></style>
+  

src/view/guide.vue

@@ -140,7 +140,6 @@ const login = () => {
     .then((res) => {
   // let auth__code = env == "pc" ? res.auth_code : res.code;
   // console.log( 555,res, auth__code);
-  a1.value = res.auth_code
   if (res.auth_code) {
     http
       .post(`/api/ggfwyth/ding/one_click_login?authCode=${res.auth_code}`)

src/view/sy_map.vue

@@ -432,7 +432,6 @@ import Dialog from "./dialog/dialogMapDp.vue";
 import DialogCamera from "./dialog/dialogCameras.vue";
 import personDetail from "./person/index.vue";
 // import gcj02towgs84 from "@/utils/gcj02towgs84.js";
-// import { DrawScene, AreaMeasure, MarkerDraw } from "bmap-draw";
 import {
   DrawScene,
   PolygonDraw,