基于echarts 使用地图 展示区域人数

 

 示例代码

    const charts = echarts.init(this.$refs["charts"]);
      var data = [
        { name: "北京", value: 177 },
        { name: "天津", value: 42 },
        { name: "河北", value: 102 },
        { name: "山西", value: 81 },
        { name: "内蒙古", value: 47 },
        { name: "辽宁", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 66 },
        { name: "上海", value: 24 },
        { name: "江苏", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 67 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 },
      ];
      echarts.registerMap("china", china); // 地图注册，第一个参数的名字必须和option.geo.map一致
      // 设置气球标志内的数字大小
      var max = 480,
        min = 9; // todo
      var maxSize4Pin = 100,
        minSize4Pin = 20;
      var geoCoordMap = {};

      charts.showLoading();
      var mapFeatures = echarts.getMap("china").geoJson.features; //从地图json文件中获取省份信息 经纬度
      charts.hideLoading();
      // 获取地区名称及经纬度
      mapFeatures.forEach(function (v) {
        var name = v.properties.name;
        geoCoordMap[name] = v.properties.cp;
      });
      //  根据mapFeatures数据匹配data中的数据   在series的data中调用convertData并传值
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }

        return res;
      };

      const option = {
        visualMap: {
          show: true,
          min: 0,
          max: 200,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          textStyle: {
            color: "#fff",
          },
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ["#00467F", "#A5CC82"], // 蓝绿
          },
        },
        geo: {
          // 地图配置
          layoutCenter: ["50%", "50%"], //位置
          layoutSize: "130%", //大小
          aspectScale: 0.8, //宽高比
          map: "china",
          roam: true, //控制地图放大缩小
          label: {
            // 图形上的文本标签
            normal: {
              // 通常状态下的样式
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            emphasis: {
              // 鼠标放上去高亮的样式
              textStyle: {
                color: "#fff",
              },
            },
          },
          itemStyle: {
            // 地图区域的样式设置
            normal: {
              // 通常状态下的样式
              borderColor: "#5089EC",
              borderWidth: 1,
              areaColor: {
                //地图区域的颜色
                type: "radial", // 径向渐变
                x: 0.3, // 圆心
                y: 0.3, // 圆心
                r: 0.6, // 半径
                colorStops: [
                  {
                    // 0% 处的颜色
                    offset: 0,
                    color: "rgba(0, 102, 154, 0)",
                  },
                  {
                    // 100% 处的颜色
                    offset: 1,
                    color: "rgba(0, 102, 154, .4)",
                  },
                ],
              },
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "#2386AD",
              borderWidth: 1,
              borderColor: "#00eeff",
            },
          },
        },

        series: [
          {
            // 散点系列数据
            type: "scatter",
            coordinateSystem: "geo", //该系列使用的坐标系:地理坐标系
            data: convertData(data), //传入数据匹配
            //根据数值大小动态控制小圆点大小
            symbolSize: function (val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false, //不显示地区名称
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#05C3F9",
              },
            },
          },
          {
            type: "map",
            map: china,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077",
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
            animation: false,
            data: data,
          },
          {
            name: "点",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin", //气泡
            //控制气泡大小
            symbolSize: function (val) {
              var a = (maxSize4Pin - minSize4Pin) / (max - min);
              var b = minSize4Pin - a * min;
              b = maxSize4Pin - a * max;
              return a * val[2] + b;
            },
            label: {
              normal: {
                show: true,
                //控制气泡内显示数值
                formatter: function (params) {
                  return params.data.value[2];
                },
                textStyle: {
                  color: "#fff",
                  fontSize: 9,
                },
              },
            },
            itemStyle: {
              normal: {
                color: "#F62157", //标志颜色
              },
            },
            zlevel: 6,
            data: convertData(data),
          },
        ],
      };

      charts.setOption(option);