echarts地图上添加散点图

先看成果

1，先准备一个容器，引入echarts

 <div style="width:100;height:100%" ref="sctterMap"></div>

 

 import echarts from "echarts";

 

2，地区数据

  这边需要从后端返回了所在地区的地区码  citycode

 

3,绘制

      getGeoJson(adcode) {

        let that = this;

        AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {

          var districtExplorer = new DistrictExplorer();

          districtExplorer.loadAreaNode(adcode, function (error, areaNode) {

            if (error) {

              console.error(error);

              return;

            }

            let Json = areaNode.getSubFeatures();

            if (Json.length > 0) {

              that.geoJson.features = Json;

            } else if (Json.length === 0) {

              that.geoJson.features = that.geoJson.features.filter(

                item => item.properties.adcode == adcode

              );

              if (that.geoJson.features.length === 0) return;

            }

            that.getMapData();

          });

          //清除已有的绘制内容

          districtExplorer.clearFeaturePolygons();

          //绘制子区域

          districtExplorer.renderSubFeatures(areaNode, function(feature, i) {

              return {

                  bubble: true,

                  strokeColor: "#B5B5B5", //线颜色

                  strokeOpacity: 1, //线透明度

                  strokeWeight: 0.6, //线宽

                  fillColor: "#59D4FC", //填充色

                  fillOpacity: 0.35, //填充透明度

              };

          })

        });

      },

 

//获取数据

      getMapData() {

        let mapData = this.geoJson.features.map(item => {

          return {

            name: item.properties.name,

            value: Math.random() * 1000,

            cityCode: item.properties.adcode

          };

        });

        mapData = mapData.sort(function (a, b) {

          return b.value - a.value;

        });

        this.initEcharts(mapData);

      },

 

4，添加散点图

      initEcharts(mapData) {

        this.myChart = echarts.init(this.$refs.sctterMap);

        echarts.registerMap("Map", this.geoJson); //注册

        this.myChart.setOption({

            tooltip: {

                trigger: "item"

              },

            title: {

              show: true,

              left: "center",

              top: "15",

              textStyle: {

                color: "rgb(179, 239, 255)",

                fontSize: 12

              }

            },

            toolbox: {

              feature: {

                restore: {

                  show: false

                },

                dataZoom: {

                  show: false

                },

                magicType: {

                  show: false

                }

              },

              iconStyle: {

                normal: {

                  borderColor: "#1990DA"

                }

              },

              top: 15,

              right: 35

            },

            series: [{

              name: "地图",

              type: "map",

              map: "Map",

             // roam: true, //是否可缩放

              zoom: 1.2, //缩放比例

              data: mapData,

              label: {

                normal: {

                  show: true,

                  color: "rgb(249, 249, 249)", //省份标签字体颜色

                  formatter: p => {

                    switch (p.name) {

                      case "内蒙古自治区":

                        p.name = "内蒙古";

                        break;

                      case "西藏自治区":

                        p.name = "西藏";

                        break;

                      case "新疆维吾尔自治区":

                        p.name = "新疆";

                        break;

                      case "宁夏回族自治区":

                        p.name = "宁夏";

                        break;

                      case "广西壮族自治区":

                        p.name = "广西";

                        break;

                      case "香港特别行政区":

                        p.name = "香港";

                        break;

                      case "澳门特别行政区":

                        p.name = "澳门";

                        break;

                      default:

                        break;

                    }

                    return p.name;

                  }

                },

                emphasis: {

                  show: true,

                  color: "#f75a00"

                }

              },

              itemStyle: {

                normal: {

                  // areaColor: "#24CFF4",

                  areaColor: new echarts.graphic.LinearGradient(

                    0, 0, 0, 1,

                    [

                      { offset: 0, color: '#72bcf0' },

                      { offset: 0.5, color: '#188df0' },

                      { offset: 1, color: '#188df0' }

                    ]

                  ),

                  borderColor: "#53D9FF",

                  borderWidth: 1.3,

                  shadowBlur: 15,

                  shadowColor: "rgb(58,115,192)",

                  shadowOffsetX: 7,

                  shadowOffsetY: 6

                },

                emphasis: {

                  areaColor: "#8dd7fc",

                  borderWidth: 1.6,

                  shadowBlur: 25

                }

              }

            }]

          },

          true

        );

      },