plantScreen/src/components/areaMap.vue

<template>
  <div>

    <div style="width: 45vw;height: 50vh;" id="chart2"></div>
  </div>

</template>



<style lang="scss" scoped>
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.img4 {
  top: 19.5vh;
  left: 33.3vw;
  height: 44vh;
  width: 33.6vw;
  position: absolute;
  //   transform: rotateX(45deg);
  // animation: spin 2s linear infinite;

}

#chart2 {
  position: absolute;
  z-index: 9;
}
</style>

<script setup>
import { ref, onMounted } from "vue"
import * as echarts from 'echarts';
import "echarts-gl"
import geoJson from "/static/jsonData/luxian_geo.js"
import { useRouter } from "vue-router"
const router = useRouter()
const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
const pointerFn = () => {
  let list = []
  geoJson.center.forEach((item, index) => {
    list.push({
      coord: item,
      symbol: index == geoJson.center.length - 1 ? ('image://' + lx) : ('image://' + icon),// 自定义图片路径
      symbolSize: [100, 30], // 图片大小
      symbolOffset: ['50%', '-50%'],
      value: geoJson.features[index]?.properties.name || '泸县',
      animation: true,
      label: {
        show: true,
        color: 'white',
        fontSize: 14,
      },
    },)
  })
  return list
}
onMounted(() => {


  var mapName = 'lz';
  const myChart = document.getElementById("chart2")
  /*获取地图数据*/
  let option = {
    geo: [


      {
        type: "map",
        map: mapName,
        aspectScale: 1,
        zoom: 1.2,
        layoutCenter: ["50%", "51%"],
        layoutSize: "110%",
        roam: false,
        label: {
          emphasis: {
            show: false
          }
        },
        show: true,
        map: mapName,
        zoom: 1.2,
        aspectScale: 1,
        roam: false,
        itemStyle: {
          normal: {
            areaColor: 'transparent',

          },
          emphasis: {

            areaColor: {
              type: 'radial', // linear 线性渐变  radial径向渐变
              x: 0.5,                  // 0.5为正中心，如果小于渐变中心靠左
              y: 0.5,                  // 0.5为正中心，如果小于渐变中心靠上
              r: 1,
              colorStops: [
                {
                  offset: 0, color: '#A46759' // 0% 处的颜色
                },
                {
                  offset: 0.1, color: '#A46759' // 0% 处的颜色
                },


                {
                  offset: 1, color: '#FFB821' // 100% 处的颜色
                }],

            }


            // borderWidth: 0
          }

        },


      },

      {
        type: "map",
        map: mapName,
        zlevel: -1,
        aspectScale: 1,
        zoom: 1.2,
        layoutCenter: ["50%", "51%"],
        layoutSize: "110%",
        roam: false,
        silent: true,

        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "rgba(17, 149, 216,0.6)",
            borderColor: "#5AD0E0",
            shadowColor: "rgba(172, 122, 255,0.5)",
            shadowOffsetY: 5,
            shadowBlur: 15,
            areaColor: "rgba(5,21,35,0.1)",
          },
        },
      },


      {
        type: "map",
        map: mapName,
        zlevel: -1,
        aspectScale: 1,
        zoom: 1.2,
        layoutCenter: ["50%", "52%"],
        layoutSize: "110%",
        roam: false,
        silent: true,

        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "rgba(17, 149, 216,0.6)",
            borderColor: "#5AD0E0",
            shadowColor: "rgba(172, 122, 255,0.5)",
            shadowOffsetY: 5,
            shadowBlur: 15,
            areaColor: "rgba(5,21,35,0.1)",
          },
        },
      },


      {
        type: "map",
        map: mapName,
        zlevel: -2,
        aspectScale: 1,
        zoom: 1.2,
        layoutCenter: ["50%", "53%"],
        layoutSize: "110%",
        roam: false,
        silent: true,

        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "rgba(17, 149, 216,0.4)",
            borderColor: "#5AD0E0",
            shadowColor: "rgba(172, 122, 255,0.5)",
            shadowOffsetY: 5,
            shadowBlur: 15,
            areaColor: "rgba(5,21,35,0.1)",
          },
        },
      },

      {
        type: "map",
        map: mapName,
        zlevel: -4,
        aspectScale: 1,
        zoom: 1.2,
        layoutCenter: ["50%", "54%"],
        layoutSize: "110%",
        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: [
      {
        name: '资产数',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        rippleEffect: {
          period: 4, //动画时间，值越小速度越快
          brushType: 'fill', //波纹绘制方式 stroke, fill
          scale: 12, //波纹圆环最大限制，值越大波纹越大
          number: 2,
        },

        // 发散点的大小
        symbolSize: function (val) {
          return 4
          // return val[2] / 10;
        },
        markPoint: {
          data: pointerFn()
        },

        data: (() => {
          let data = {
            资产数: geoJson.center

          }
          let finalData = []
          Object.keys(data).map((i, index) => {
            let child = data[i].map((row, index) => ({
              value: row,
              itemStyle: {
                color: index == geoJson.center.length - 1 ? '#FEB821' : '#F0733A',
              },
            }))

            finalData = [...finalData, ...child]
          })
          return finalData
        })(),
      },
    ],
  };

  document.getElementById("chart2").removeAttribute('_echarts_instance_');

  echarts.registerMap(mapName, geoJson)
  const bg = echarts.init(myChart)
  bg.setOption(option);

  bg.on('click', function (params) {

  router.push("/detail?town="+params.name||params.value)

  });

})

</script>