<template>
  <div class="mapBox">
    <el-select
      v-model="selectData"
      :teleported="false"
      popper-class="popperClass"
      class="select"
      size="small"
      placeholder="库区名称"
      style="width: 150px; height: 21px"
    >
      <el-option v-for="item in toolTipData" :value="item.id" :label="item.name" />
      <!-- <el-option value="2" label="2" />
      <el-option value="3" label="3" /> -->
    </el-select>

    <div style="width: 100%; height: 100%" ref="mapdom" id="map-container" class="map-container"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import china from "./ChinaMap.json";
import { GetKuiDian } from "@/api/keshihua/index";
import { useRouter } from "vue-router";
let selectData = ref("");
const router = useRouter();
const goDetail = () => {
  router.push("/DataVisualization/detailPage");
};
let mapdom = ref(null);
echarts.registerMap("china", china as any);
let toolTipData = ref([
  // {
  //   name: '国家粮食和物资储备局河北局一三三处',
  //   value: [114.31344, 38.08587],
  //   id: 1764201081714810882
  // },
  // {
  //   name: '国家粮食和物资储备局河北局一三二处',
  //   value: [114.46104, 38.00407],
  //   id: 1764201188094943234
  // },
  // {
  //   name: '河北省应急物资供应中心',
  //   value: [114.53952, 38.03647],
  //   id: 1764201125377515521
  // },
  // {
  //   name: '河北省应急物资供应中心',
  //   value: [114.53952, 38.03647],
  //   id: 1764201125377515521
  // },
  // {
  //   name: '北京直属处',
  //   value: [116.23128, 40.22077],
  //   id: 13
  // },
  // {
  //   name: '北京市粮食和物资储备事务中心',
  //   value: [116.34159, 39.72684],
  //   id: 1764178224611930114
  // },
  // {
  //   name: '北京市大兴区永定河管理所',
  //   value: [116.65714, 39.90998],
  //   id: 1764178291469135873
  // },
  // {
  //   name: '天津市救灾物资储备站',
  //   value: [117.00739, 39.14111],
  //   id: 1764178530607378434
  // },
  // {
  //   name: '河北省应急物资供应中心',
  //   value: [117.25228, 39.12827],
  //   id: 1764178617756626946
  // },
  // {
  //   name: '北京库(833处)',
  //   value: [117.71071, 39.0032],
  //   id: 14
  // },
]);
async function getKuidian() {
  const res = await GetKuiDian();
  console.log(res, "获取的数据");

  res.forEach((item) => {
    toolTipData.value.push({ id: item.deptId, value: item.jwd, name: item.name });
  });
  console.log(res, toolTipData.value, "返回的树");
}
onMounted(() => {
  getKuidian()
    .then((res) => {
      let myChart = echarts.init(mapdom.value);
      let img2 =
        "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAbCAYAAACTHcTmAAAACXBIWXMAAAsTAAALEwEAmpwYAAACt0lEQVRIiZXVXYhVVRTA8d9cb1oSGpqW9uAEKk6QJb4mJIjiQwWSUaJpT0VIVmhFahTzIqmYHxRCCCX4IGRUD/kUPlSCZlkQfVB+ICmmM+PIlDmOTg9rXed07j1jLjics9fe+7/X116nbczAZsPICMxEB27HP/gZ3+FK1aZ6hX4CVmMFJraY78UevI0T5cm2FpY+hXdxR47P4XucT939uCfnLuF1vDOcpauxMb+/xnocxgO4O8FHMR1vYiG2oB0vtoI+mcBBvIWd+f4Mowvr+vExVmIedmAV/mgY1HB/LH7H+AR9mrDJqqUXi3Av3sdlkdDjtVywJoGH8B4+KQAHsR9L8BGupX4s9uGr1I9Kg65beixPnJ+nP4cB7E2XjhYsnCZivzxB+/EyfsRfmFDDjASeF8l5Ojd3YAOmYAwWi2S1Y1e+u7AgYT+IWp5TSyBR1DMMJeVR/I0LuIoeUfAX0Ie5eVgbZqel0F7HuBx04a6Cm1PT1YdF6RDZluGYgltyPBHd+T2+nhbAnYWJIviYZmkvjXtyP/TUDF2zjrSgt7C44Xb5Kd77aziI+3J8so6fcFqU0Fx8gBdE0G8T8SpLPxrl+Lm4vjNFw/myLupwF9ahU8TvcSwTGb+1AjoyvXrJ0NXei77GaVtEomaLmpuPUxVACezGIyJ5j6WVnQoudOPZtPpVLM0DtuNiCXgJH+JBzMo18Bp+o7n1bReNAr7FWhzIzY2yOZLjTpEDosEsakDK0FEik7MKui6RzLOieU/DpML8yVzfKM2mfnpZNOlvRPaJRvOQ1jIgGk1PUVlrsfAXPF8BKcsbol/8R1pBYXc+w8kX4h/VJFVQwtpfK+b+FBVy9WahfSK+/SX9oPjLnqnaOByUKKtXSrpN4mpWyo2gsE38r4jfzbobbfg/0EE8g614QnM4muRfpgCuNPFbmq0AAAAASUVORK5CYII=";
      let mapName = "china";
      /*获取地图数据*/
      myChart.showLoading();
      //所有省的数据
      // let mapFeatures = echarts.getMap(mapName).geoJson.features;
      // console.log(mapFeatures);

      myChart.hideLoading();
      // mapFeatures.forEach(function (v) {
      //   // 地区名称
      //   let name = v.properties.name;
      //   // 地区经纬度
      //   console.log(v.properties.cp,'www');

      //   geoCoordMap[name] = v.properties.cp;
      // });

      // let convertData = function (data) {
      //   let res = [];
      //   for (let i = 0; i < data.length; i++) {
      //     let geoCoord = geoCoordMap[data[i].name];
      //     if (geoCoord) {
      //       res.push({
      //         name: data[i].name,
      //         value: geoCoord.concat(data[i].value),
      //       });
      //     }
      //   }
      //   return res;
      // };
      // 柱状体的主干
      // function lineData() {
      //   return toolTipData.map((item) => {
      //     return {
      //       coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 1.5]]
      //     }
      //   })
      // }
      // 柱状体的顶部
      function scatterData() {
        return toolTipData.value.map((item) => {
          return [item.value[0], item.value[1] + 2, item];
        });
      }
      let option = {
        backgroundColor: "",
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            console.log(params.data[2].name, "ssss");
            return params.data[2].name;
          },
          backgroundColor: "#fff",
          borderColor: "#333",
          padding: [5, 10],
          textStyle: {
            color: "#333",
            fontSize: "16"
          }
        },
        geo: [
          {
            layoutCenter: ["50%", "50%"], //位置
            layoutSize: "140%", //大小
            show: true,
            map: mapName,
            // roam: false,
            zoom: 0.65,
            roam: "scale",
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 0.65,
              max: 5
            },
            aspectScale: 1,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: "linear",
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(3,27,78,0.75)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(58,149,253,0.75)" // 50% 处的颜色
                    }
                  ],
                  global: true // 缺省为 false
                },
                borderColor: "#c0f3fb",
                borderWidth: 1,
                shadowColor: "#000",
                shadowOffsetY: 0,
                shadowBlur: 10
              },
              emphasis: {
                areaColor: "rgba(0,254,233,0.6)"
                // borderWidth: 0
              }
            }
          }
          // {
          //   type: "map",
          //   map: mapName,
          //   zlevel: -1,
          //   aspectScale: 1,

          //   layoutCenter: ["50%", "51%"],
          //   layoutSize: "140%",
          //   zoom: 1,
          //   roam: 'scale',
          //   scaleLimit: {
          //     //         //滚轮缩放的极限控制
          //     min: 0.8,
          //     max: 1.4,
          //   },
          //   silent: true,
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 0,
          //       // borderColor:"rgba(17, 149, 216,0.6)",
          //       borderColor: "rgba(58,149,253,0.8)",
          //       shadowColor: "rgba(172, 122, 255,0.5)",
          //       shadowOffsetY: 5,
          //       shadowBlur: 10,
          //       areaColor: "rgba(5,21,35,0.1)",
          //     },
          //   },
          // },
          // {
          //   type: "map",
          //   map: mapName,
          //   zlevel: -2,
          //   aspectScale: 1,
          //   layoutCenter: ["50%", "52%"],
          //   layoutSize: "140%",
          //   zoom: 1,
          //   roam: 'scale',
          //   scaleLimit: {
          //     //         //滚轮缩放的极限控制
          //     min: 0.8,
          //     max: 1.4,
          //   },
          //   silent: true,
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 1,
          //       // borderColor: "rgba(57, 132, 188,0.4)",
          //       borderColor: "rgba(58,149,253,0.6)",
          //       shadowColor: "rgba(65, 214, 255,0.2)",
          //       shadowOffsetY: 5,
          //       shadowBlur: 5,
          //       areaColor: "transpercent",
          //     },
          //   },
          // },
          // {
          //   type: "map",
          //   map: mapName,
          //   zlevel: -3,
          //   aspectScale: 1,
          //   zoom: 0.65,
          //   layoutCenter: ["50%", "53%"],
          //   layoutSize: "140%",
          //   roam: false,
          //   silent: true,
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 1,
          //       // borderColor: "rgba(11, 43, 97,0.8)",
          //       borderColor: "rgba(58,149,253,0.4)",
          //       shadowColor: "rgba(58,149,253,1)",
          //       shadowOffsetY: 15,
          //       shadowBlur: 10,
          //       areaColor: "transpercent",
          //     },
          //   },
          // },
          // {
          //   type: "map",
          //   map: mapName,
          //   zlevel: -4,
          //   aspectScale: 1,
          //   zoom: 0.65,
          //   layoutCenter: ["50%", "54%"],
          //   layoutSize: "140%",
          //   roam: false,
          //   silent: true,
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 5,
          //       // borderColor: "rgba(11, 43, 97,0.8)",
          //       borderColor: "rgba(5,9,57,0.8)",
          //       shadowColor: "rgba(29, 111, 165,0.8)",
          //       shadowOffsetY: 15,
          //       shadowBlur: 10,
          //       areaColor: "rgba(5,21,35,0.1)",
          //     },
          //   },
          // },
        ],
        series: [
          // {
          //   type: 'map',
          //   map: mapName,
          //   geoIndex: 0,
          //   aspectScale: 1, //长宽比
          //   zoom: 0.65,
          //   showLegendSymbol: true,
          //   roam: true,
          //   label: {
          //     normal: {
          //       show: true,
          //       textStyle: {
          //         color: "#fff",
          //         fontSize: "120%"
          //       },
          //     },
          //     emphasis: {
          //       // show: false,
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       areaColor: {
          //         type: "linear",
          //         x: 1200,
          //         y: 0,
          //         x2: 0,
          //         y2: 0,
          //         colorStops: [{
          //           offset: 0,
          //           color: "rgba(3,27,78,0.75)", // 0% 处的颜色
          //         }, {
          //           offset: 1,
          //           color: "rgba(58,149,253,0.75)", // 50% 处的颜色
          //         },],
          //         global: true, // 缺省为 false
          //       },
          //       borderColor: "#fff",
          //       borderWidth: 0.2,
          //     },
          //   },
          //   layoutCenter: ["50%", "50%"],
          //   layoutSize: "140%",
          //   animation: false,
          //   markPoint: {
          //     symbol: "none"
          //   },
          //   data: data,
          // },
          // 柱状体的主干
          // {
          //   type: 'lines',
          //   zlevel: 5,
          //   effect: {
          //     show: false,
          //     symbolSize: 5 // 图标大小
          //   },
          //   lineStyle: {
          //     width: 6, // 尾迹线条宽度
          //     color: 'rgba(249, 105, 13, .6)',
          //     opacity: 1, // 尾迹线条透明度
          //     curveness: 0 // 尾迹线条曲直度
          //   },
          //   label: {
          //     show: 0,
          //     position: 'end',
          //     formatter: '245'
          //   },
          //   silent: true,
          //   data: lineData()
          // },
          // 柱状体的顶部
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 5,
            label: {
              normal: {
                show: false,
                // formatter: function (params) {
                //   var name = params.data[2].name
                //   var value = params.data[2].value
                //   // var text = `{tline|项目个数} : {fline|${value}}`
                //   // var text = `{tline|${name}} :2 {fline|${value}}个`
                //   var text = `${name}`
                //   return text;
                // },
                color: "#fff",
                rich: {
                  fline: {
                    // padding: [0, 25],
                    color: "#fff",
                    fontSize: 10,
                    fontWeight: 400
                  },
                  tline: {
                    // padding: [0, 27],
                    color: "#ABF8FF",
                    fontSize: 12
                  }
                }
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              color: "#00FFF6",
              opacity: 1
            },
            //图标
            symbol: img2,
            symbolSize: [10, 15],
            symbolOffset: [0, -20],
            z: 999,
            data: scatterData(),
            tooltip: {
              // trigger: "item",
              // formatter: "{b}<br/>{c} 111(p / km2)"
            }
          }
          //圆环
          // {
          //   name: 'Top 5',
          //   type: 'effectScatter',
          //   coordinateSystem: 'geo',
          //   data: convertData(toolTipData),
          //   showEffectOn: 'render',
          //   itemStyle: {
          //     normal: {
          //       color: '#00FFFF',
          //     }
          //   },
          //   rippleEffect: {
          //     scale: 5,
          //     brushType: 'stroke',
          //   },
          //   label: {
          //     normal: {
          //       formatter: '{b}',
          //       position: 'bottom',
          //       show: false,
          //       color: "#fff",
          //       distance: 10,
          //     },
          //   },
          //   symbol: 'circle',
          //   symbolSize: [20, 10],
          //   itemStyle: {
          //     normal: {
          //       color: '#16ffff',
          //       shadowBlur: 10,
          //       shadowColor: '#16ffff',
          //     },
          //     opacity: 1
          //   },
          //   zlevel: 4,
          // },
        ],
        layoutCenter: ["50%", "55%"],
        layoutSize: "140%"
      };
      myChart.setOption(option);
      // getKuidian().then(res => {
      //   myChart.setOption(option);
      // })
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.on("click", (item) => {
        console.log(item);
        if (item.data) {
          router.push({
            path: "/DataVisualization/detailPage",
            query: item.data[2]
          });
        } else {
        }
      });
    })
    .finally(() => {
      let myChart = echarts.init(mapdom.value);
      let img2 =
        "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAbCAYAAACTHcTmAAAACXBIWXMAAAsTAAALEwEAmpwYAAACt0lEQVRIiZXVXYhVVRTA8d9cb1oSGpqW9uAEKk6QJb4mJIjiQwWSUaJpT0VIVmhFahTzIqmYHxRCCCX4IGRUD/kUPlSCZlkQfVB+ICmmM+PIlDmOTg9rXed07j1jLjics9fe+7/X116nbczAZsPICMxEB27HP/gZ3+FK1aZ6hX4CVmMFJraY78UevI0T5cm2FpY+hXdxR47P4XucT939uCfnLuF1vDOcpauxMb+/xnocxgO4O8FHMR1vYiG2oB0vtoI+mcBBvIWd+f4Mowvr+vExVmIedmAV/mgY1HB/LH7H+AR9mrDJqqUXi3Av3sdlkdDjtVywJoGH8B4+KQAHsR9L8BGupX4s9uGr1I9Kg65beixPnJ+nP4cB7E2XjhYsnCZivzxB+/EyfsRfmFDDjASeF8l5Ojd3YAOmYAwWi2S1Y1e+u7AgYT+IWp5TSyBR1DMMJeVR/I0LuIoeUfAX0Ie5eVgbZqel0F7HuBx04a6Cm1PT1YdF6RDZluGYgltyPBHd+T2+nhbAnYWJIviYZmkvjXtyP/TUDF2zjrSgt7C44Xb5Kd77aziI+3J8so6fcFqU0Fx8gBdE0G8T8SpLPxrl+Lm4vjNFw/myLupwF9ahU8TvcSwTGb+1AjoyvXrJ0NXei77GaVtEomaLmpuPUxVACezGIyJ5j6WVnQoudOPZtPpVLM0DtuNiCXgJH+JBzMo18Bp+o7n1bReNAr7FWhzIzY2yOZLjTpEDosEsakDK0FEik7MKui6RzLOieU/DpML8yVzfKM2mfnpZNOlvRPaJRvOQ1jIgGk1PUVlrsfAXPF8BKcsbol/8R1pBYXc+w8kX4h/VJFVQwtpfK+b+FBVy9WahfSK+/SX9oPjLnqnaOByUKKtXSrpN4mpWyo2gsE38r4jfzbobbfg/0EE8g614QnM4muRfpgCuNPFbmq0AAAAASUVORK5CYII=";
      let mapName = "china";
      /*获取地图数据*/
      myChart.showLoading();
      //所有省的数据
      // let mapFeatures = echarts.getMap(mapName).geoJson.features;
      // console.log(mapFeatures);

      myChart.hideLoading();
      // mapFeatures.forEach(function (v) {
      //   // 地区名称
      //   let name = v.properties.name;
      //   // 地区经纬度
      //   console.log(v.properties.cp,'www');

      //   geoCoordMap[name] = v.properties.cp;
      // });

      // let convertData = function (data) {
      //   let res = [];
      //   for (let i = 0; i < data.length; i++) {
      //     let geoCoord = geoCoordMap[data[i].name];
      //     if (geoCoord) {
      //       res.push({
      //         name: data[i].name,
      //         value: geoCoord.concat(data[i].value),
      //       });
      //     }
      //   }
      //   return res;
      // };
      // 柱状体的主干
      // function lineData() {
      //   return toolTipData.map((item) => {
      //     return {
      //       coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 1.5]]
      //     }
      //   })
      // }
      // 柱状体的顶部
      function scatterData() {
        return toolTipData.value.map((item) => {
          return [item.value[0], item.value[1] + 2, item];
        });
      }
      let option = {
        backgroundColor: "",
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            console.log(params.data[2].name, "ssss");
            return params.data[2].name;
          },
          backgroundColor: "#fff",
          borderColor: "#333",
          padding: [5, 10],
          textStyle: {
            color: "#333",
            fontSize: "16"
          }
        },
        geo: [
          {
            layoutCenter: ["50%", "50%"], //位置
            layoutSize: "140%", //大小
            show: true,
            map: mapName,
            // roam: false,
            zoom: 0.65,
            roam: "scale",
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 0.65,
              max: 5
            },
            aspectScale: 1,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: "linear",
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(3,27,78,0.75)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(58,149,253,0.75)" // 50% 处的颜色
                    }
                  ],
                  global: true // 缺省为 false
                },
                borderColor: "#c0f3fb",
                borderWidth: 1,
                shadowColor: "#000",
                shadowOffsetY: 0,
                shadowBlur: 10
              },
              emphasis: {
                areaColor: "rgba(0,254,233,0.6)"
                // borderWidth: 0
              }
            }
          }
          // {
          //   type: "map",
          //   map: mapName,
          //   zlevel: -1,
          //   aspectScale: 1,

          //   layoutCenter: ["50%", "51%"],
          //   layoutSize: "140%",
          //   zoom: 1,
          //   roam: 'scale',
          //   scaleLimit: {
          //     //         //滚轮缩放的极限控制
          //     min: 0.8,
          //     max: 1.4,
          //   },
          //   silent: true,
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 0,
          //       // borderColor:"rgba(17, 149, 216,0.6)",
          //       borderColor: "rgba(58,149,253,0.8)",
          //       shadowColor: "rgba(172, 122, 255,0.5)",
          //       shadowOffsetY: 5,
          //       shadowBlur: 10,
          //       areaColor: "rgba(5,21,35,0.1)",
          //     },
          //   },
          // },
          // {
          //   type: "map",
          //   map: mapName,
          //   zlevel: -2,
          //   aspectScale: 1,
          //   layoutCenter: ["50%", "52%"],
          //   layoutSize: "140%",
          //   zoom: 1,
          //   roam: 'scale',
          //   scaleLimit: {
          //     //         //滚轮缩放的极限控制
          //     min: 0.8,
          //     max: 1.4,
          //   },
          //   silent: true,
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 1,
          //       // borderColor: "rgba(57, 132, 188,0.4)",
          //       borderColor: "rgba(58,149,253,0.6)",
          //       shadowColor: "rgba(65, 214, 255,0.2)",
          //       shadowOffsetY: 5,
          //       shadowBlur: 5,
          //       areaColor: "transpercent",
          //     },
          //   },
          // },
          // {
          //   type: "map",
          //   map: mapName,
          //   zlevel: -3,
          //   aspectScale: 1,
          //   zoom: 0.65,
          //   layoutCenter: ["50%", "53%"],
          //   layoutSize: "140%",
          //   roam: false,
          //   silent: true,
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 1,
          //       // borderColor: "rgba(11, 43, 97,0.8)",
          //       borderColor: "rgba(58,149,253,0.4)",
          //       shadowColor: "rgba(58,149,253,1)",
          //       shadowOffsetY: 15,
          //       shadowBlur: 10,
          //       areaColor: "transpercent",
          //     },
          //   },
          // },
          // {
          //   type: "map",
          //   map: mapName,
          //   zlevel: -4,
          //   aspectScale: 1,
          //   zoom: 0.65,
          //   layoutCenter: ["50%", "54%"],
          //   layoutSize: "140%",
          //   roam: false,
          //   silent: true,
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 5,
          //       // borderColor: "rgba(11, 43, 97,0.8)",
          //       borderColor: "rgba(5,9,57,0.8)",
          //       shadowColor: "rgba(29, 111, 165,0.8)",
          //       shadowOffsetY: 15,
          //       shadowBlur: 10,
          //       areaColor: "rgba(5,21,35,0.1)",
          //     },
          //   },
          // },
        ],
        series: [
          // {
          //   type: 'map',
          //   map: mapName,
          //   geoIndex: 0,
          //   aspectScale: 1, //长宽比
          //   zoom: 0.65,
          //   showLegendSymbol: true,
          //   roam: true,
          //   label: {
          //     normal: {
          //       show: true,
          //       textStyle: {
          //         color: "#fff",
          //         fontSize: "120%"
          //       },
          //     },
          //     emphasis: {
          //       // show: false,
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       areaColor: {
          //         type: "linear",
          //         x: 1200,
          //         y: 0,
          //         x2: 0,
          //         y2: 0,
          //         colorStops: [{
          //           offset: 0,
          //           color: "rgba(3,27,78,0.75)", // 0% 处的颜色
          //         }, {
          //           offset: 1,
          //           color: "rgba(58,149,253,0.75)", // 50% 处的颜色
          //         },],
          //         global: true, // 缺省为 false
          //       },
          //       borderColor: "#fff",
          //       borderWidth: 0.2,
          //     },
          //   },
          //   layoutCenter: ["50%", "50%"],
          //   layoutSize: "140%",
          //   animation: false,
          //   markPoint: {
          //     symbol: "none"
          //   },
          //   data: data,
          // },
          // 柱状体的主干
          // {
          //   type: 'lines',
          //   zlevel: 5,
          //   effect: {
          //     show: false,
          //     symbolSize: 5 // 图标大小
          //   },
          //   lineStyle: {
          //     width: 6, // 尾迹线条宽度
          //     color: 'rgba(249, 105, 13, .6)',
          //     opacity: 1, // 尾迹线条透明度
          //     curveness: 0 // 尾迹线条曲直度
          //   },
          //   label: {
          //     show: 0,
          //     position: 'end',
          //     formatter: '245'
          //   },
          //   silent: true,
          //   data: lineData()
          // },
          // 柱状体的顶部
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 5,
            label: {
              normal: {
                show: false,
                // formatter: function (params) {
                //   var name = params.data[2].name
                //   var value = params.data[2].value
                //   // var text = `{tline|项目个数} : {fline|${value}}`
                //   // var text = `{tline|${name}} :2 {fline|${value}}个`
                //   var text = `${name}`
                //   return text;
                // },
                color: "#fff",
                rich: {
                  fline: {
                    // padding: [0, 25],
                    color: "#fff",
                    fontSize: 10,
                    fontWeight: 400
                  },
                  tline: {
                    // padding: [0, 27],
                    color: "#ABF8FF",
                    fontSize: 12
                  }
                }
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              color: "#00FFF6",
              opacity: 1
            },
            //图标
            symbol: img2,
            symbolSize: [10, 15],
            symbolOffset: [0, -20],
            z: 999,
            data: scatterData(),
            tooltip: {
              // trigger: "item",
              // formatter: "{b}<br/>{c} 111(p / km2)"
            }
          }
          //圆环
          // {
          //   name: 'Top 5',
          //   type: 'effectScatter',
          //   coordinateSystem: 'geo',
          //   data: convertData(toolTipData),
          //   showEffectOn: 'render',
          //   itemStyle: {
          //     normal: {
          //       color: '#00FFFF',
          //     }
          //   },
          //   rippleEffect: {
          //     scale: 5,
          //     brushType: 'stroke',
          //   },
          //   label: {
          //     normal: {
          //       formatter: '{b}',
          //       position: 'bottom',
          //       show: false,
          //       color: "#fff",
          //       distance: 10,
          //     },
          //   },
          //   symbol: 'circle',
          //   symbolSize: [20, 10],
          //   itemStyle: {
          //     normal: {
          //       color: '#16ffff',
          //       shadowBlur: 10,
          //       shadowColor: '#16ffff',
          //     },
          //     opacity: 1
          //   },
          //   zlevel: 4,
          // },
        ],
        layoutCenter: ["50%", "55%"],
        layoutSize: "140%"
      };
      myChart.setOption(option);
      // getKuidian().then(res => {
      //   myChart.setOption(option);
      // })
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.on("click", (item) => {
        console.log(item);
        if (item.data) {
          router.push({
            path: "/DataVisualization/detailPage",
            query: item.data[2]
          });
        } else {
        }
      });
    });
});
</script>

<style scoped>
.mapBox {
  width: 100%;
  height: 100%;
  position: relative;
  /* background: green; */
}

/* .mapBox .select {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 22;
} */
:deep(.select .el-select-dropdown) {
  background: rgba(132, 159, 228, 0.2) !important;
}

:deep(.select .el-select-dropdown .el-select-dropdown__item) {
  /* background: rgba(12,21,44,0.2); */
}

.el-select-dropdown__item.selected,
.el-select-dropdown__item:hover,
.el-select-dropdown__item.hover {
  color: #fff;
  background: #409eff;
}

.select {
  /* position: absolute; */
  left: 0%;
  top: 7%;
  position: absolute;
  z-index: 2;
  /* height: 10%; */
}

:deep(.el-popper.is-light) {
  background: #307cbf;
  border: 1px solid #273f70;
}

:deep(.el-select-dropdown__item.hover) {
  background: transparent;
  border: none;
  color: #04faa0;
}

:deep(.el-select-dropdown__item) {
  background: transparent;
  border: none;
  color: #fff;
}

:deep(.el-popper.is-light .el-popper__arrow::before) {
  border: 1px solid #4778d9;
  background: #4778d9;
  right: 0;
}

:deep(.el-select__wrapper) {
  /* position: absolute; */
  /* width: 50%; */
  /* height: 4%; */
  /* left: 20%;
    top:; */
  background: transparent !important;
  border: rgba(255, 255, 255, 0.2) 1px solid !important;
  box-shadow: none;
}
</style>
