Echarts地图 绘制圆点

<template>
  <div>
    <div
      style="width: 100%; height: 100vh; background: linear-gradient(blue, pink);"
      ref="chartsDOM"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

// 借鉴：https://blog.csdn.net/2301_78542842/article/details/139608529

let myChart = false;

//需要在阿里云数据可视化平台得到地图的绘制数据：https://datav.aliyun.com/portal/school/atlas/area_selector
//比如这个链接：https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=510000_full 就可以得到四川地图的绘制json数据
let sichuanGeoData = {......}

export default {
  mounted() {
    // 初始化Echarts元素
    myChart = echarts.init(this.$refs["chartsDOM"]);
    this.renderMap();
  },
  data() {
    return {};
  },
  methods: {
    renderMap() {
      //注册一个地图绘制工具，名称为：sichuanDiTu ，用于绘制出地图
      echarts.registerMap("sichuanDiTu", sichuanGeoData);

      //在地图上绘制标记点的数据
      let geoData = [
        { name: "成都市", value: [104.06531, 30.576208], status: 1 },
        { name: "自贡市", value: [104.78708, 29.334152], status: 2 },
        { name: "攀枝花市", value: [101.70073, 26.565037], status: 1 },
        { name: "泸州市", value: [105.43501, 28.878778], status: 1 },
        { name: "德阳市", value: [104.404526, 31.122791], status: 2 },
        { name: "绵阳市", value: [104.721954, 31.480577], status: 1 },
        { name: "广元市", value: [105.8467, 32.436306], status: 1 },
        { name: "遂宁市", value: [105.56971, 30.519241], status: 1 },
        { name: "内江市", value: [105.06119, 29.609081], status: 1 },
        { name: "乐山市", value: [103.760345, 29.579762], status: 1 },
        { name: "南充市", value: [106.0713, 30.79638], status: 1 },
        { name: "眉山市", value: [103.86413, 30.067642], status: 1 },
        { name: "宜宾市", value: [104.630585, 28.753216], status: 1 },
        { name: "广安市", value: [106.633125, 30.445374], status: 1 },
        { name: "达州市", value: [107.46774, 31.209936], status: 1 },
        { name: "雅安市", value: [103.01266, 29.979443], status: 1 },
        { name: "巴中市", value: [106.76535, 31.85927], status: 1 },
        { name: "资阳市", value: [104.67522, 30.10802], status: 1 },
        { name: "阿坝州", value: [102.225525, 31.90005], status: 1 },
        { name: "甘孜州", value: [101.23, 30.05], status: 1 },
        { name: "凉山州", value: [102.25521, 27.889338], status: 1 },
      ];

      let seriesData = [{"name":"成都市","value":"4062","code":"510100"},{"name":"自贡市","value":"595","code":"510300"},{"name":"攀枝花市","value":"240","code":"510400"},{"name":"泸州市","value":"870","code":"510500"},{"name":"德阳市","value":"517","code":"510600"},{"name":"绵阳市","value":"1093","code":"510700"},{"name":"广元市","value":"639","code":"510800"},{"name":"遂宁市","value":"723","code":"510900"},{"name":"内江市","value":"811","code":"511000"},{"name":"乐山市","value":"762","code":"511100"},{"name":"南充市","value":"1161","code":"511300"},{"name":"眉山市","value":"678","code":"511400"},{"name":"宜宾市","value":"1708","code":"511500"},{"name":"广安市","value":"833","code":"511600"},{"name":"达州市","value":"1091","code":"511700"},{"name":"雅安市","value":"444","code":"511800"},{"name":"巴中市","value":"537","code":"511900"},{"name":"资阳市","value":"684","code":"512000"},{"name":"阿坝藏族羌族自治州","value":"325","code":"513200"},{"name":"甘孜藏族自治州","value":"460","code":"513300"},{"name":"凉山彝族自治州","value":"1420","code":"513400"}];
      var option = {
        //鼠标悬浮在地图上的时候 显示的气泡框信息
        tooltip: {
          show: true,
          trigger: "item",
          formatter: function (params, ticket, callback) {
            return params.name;
          },
        },
        // 地图的偏移位置
        layoutCenter: ["50%", "40%"], //位置
        //地图的缩放大小
        layoutSize: "80%",
        
        //地图样式配置，也就是在 sichuanDiTu 绘制的地图上进行样式配置
        geo: {
          map: "sichuanDiTu",//这里必须使用上面注册好的绘制地图时候的名称
          //是否显示标签
          label: {
            normal: {
              show: false,
              color: "#ffff",
            },
            //鼠标悬浮的时候展示的内容，默认展示地址名字
            emphasis: {
              show: true,
              color: "#fff",
            },
          },
          //是否拖动地图
          roam: true,
          //放大我们的地图,也是地图缩放
          zoom: 1,
          //每一个区域模块的样式配置
          itemStyle: {
            //默认展示时候的配置
            normal: {
              //区域模块的背景色支持透明度，阴影
              areaColor: "#00000000",
              borderWidth: 1,
              borderColor: "#fff",
              borderWidth: 2,
            },
            //鼠标悬浮时候的样式
            emphasis: {
              areaColor: "#2B91B755",
              borderWidth: 5,
              //阴影设置
              shadowOffsetX: 2,
              shadowOffsetY: 2,
              shadowColor: "rgba(255, 255, 255, 0.5)",
            },
          },
        },
        //数据配置 每一个对象都相当于一个图层，在不同的图层展示数据 series是个列表，每一个项目是一个对象，可以理解成一个图层
        series: [
          {
            //圆点
            type: "effectScatter",
            //坐标系类型，这里使用geo，表示使用地理坐标系经纬度
            coordinateSystem: "geo",
            //层级 类似z-index
            zlevel: 10,
            //光点的大小
            symbolSize: function (val) {
              return 10; //val[2] / 4;
            }, 
            //点上的标签配置
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 12,
                  color: "#FFF",
                },
                //标签相对于圆点的位置
                position: "bottom",
                //标签指定展示
                formatter: function (params, ticket, callback) {
                  return params.name;
                },
              }
            },
            //每一个点的样式配置
            itemStyle: {
              normal: {
                //点的颜色 可以直接设置，也可以动态设置
                color: function (params) {
                  console.log(params);
                  return params.data.status == 1 ? "#00fff6" : "#e94848";
                }, 
              },
              emphasis: {
                areaColor: "#fff",
              },
            },
            data: geoData,
          },
        ],
      };

      myChart.setOption(option);

      //单击某个区域
      myChart.on("click", (params) => {
        console.log("echartsMap click", params);

        if (this.map.level == 0) {
          this.map.level++;

          this.map.region.name = params.data.name;
          this.map.region.code = params.data.code;
          this.renderMap();
        }
      });
    },
  },
};
</script>

<style>
</style>