echarts 4.0+画全国地图(省 市 区),地图撒点---vue项目中实战

时间:2024-03-05 13:20:20

1、准备好全国的Json文件

2、echarts插件 (对应配置是4.0+的)

3、获取json文件后设置在地图上               this.$echarts.registerMap("currentmap", geoJson);

初始加载地图

 

 

 点击地图上某个点画下一级地图

    initMap(geoJson, mapData) {
      this.myMapchart = this.$echarts.init(this.$refs.map);
      this.$echarts.registerMap("currentmap", geoJson);
      let option = this.getMapOption(mapData);
      this.myMapchart.setOption(option);
      //点击事件,根据点击某个省份计算出这个省份的数据
      this.myMapchart.on("click", (params) => {
        console.log("dianji地图", params);
        // 如果是区级就不能往下点了
        if (!params.data) return; // 点击的不是描的点
        bus.$emit("geo", params.data.deptCode);
        this.deptCode = params.data.deptCode
        this.getFormData1()
        this.getFormData2()
        if (params.data.level == 1 || params.data.level == 2) {
          // 获取下级的json
          let code = params.data.deptCode;
          this.getGeoJson(code);
          //逻辑控制
         
        }
      });
    },

 

 

 

 

 

 

4、获取点位信息

 

 

5、设置options

  getMapOption(mapData) {
      return {
        backgroundColor: "transparent",
        series: [
          {
            type: "map",
            mapType: "currentmap",
            label: {
              show: false,
            },
            itemStyle: {
              label: {
                show: false,
              },
              normal: {
                color: "#ffffff",
                areaColor: "#053F72",
                borderColor: "#0BC4ED"
              },
              emphasis: {
                label: {
                  show: false,
                },
                color: "#ffffff",
                areaColor: "#053F72",
                borderColor: "#0BC4ED"
              }
            },
            data : mapData.data,
            markPoint : {
              clickable:true,
              symbolSize: [10,12],  // 标注大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
              itemStyle: {
                  normal: {
                      borderWidth:1,
                      areaColor:\'#135466\', //地图颜色
                      borderColor: "rgba(41, 218, 243, 1)",//边框颜色
                      borderWidth: 1,
                      label: {
                          show: true,
                          offset: [0, 15],
                          textStyle: {
                              //文本字体颜色
                              color: "rgba(254, 227, 74, 1)",
                              fontSize:\'12px\'
                          },
                          formatter: function (param){
                                return param.data.areaName;
                          }
                      }
                  },
                  emphasis: {
                      label: {
                          show: true,
                          textStyle: {
                              //文本字体颜色
                              color:"#05fcff",
                              fontSize:\'12px\'
                          },
                      }
                  }
              },
              data : mapData.data,
            },
            animation: false,
            roam: true,
            // animationDurationUpdate: 1000,
            // animationEasingUpdate: \'quinticInOut\'
          }
        ]
      };
    },