用echarts 中的地图来显示区域分布情况(vue),包括地理数据来源生成的制作注意事项_echarts 地域分布

由于国家测绘部门的一些相关法律规定,现在版本的ecahrts 中的地图资源已经不能制作和直接使用,只能通过自己注册地图regiseterMap(name,json),来实现地图的区域,这些数据,学GIS的获取和制作应该都不是什么大问题,只需将相关区域的地理要素转换成geojson即可,如果不知道怎么转换,我的文章WebGIS常用的空间分析,地图发布，底图自定义，QGIS插件，地理矢量数据格式转换工具等资源汇总里面有相关的介绍,但是数据生成还是需要注意以下几点:

1.echarts 加载地图时注意geojson文件中的feature的propertis中的name字段名称一定要为name,
2.并且必须带有name的属性,不然echarts加载不到json中的地图,name不能大写,或者的单个字母大写,否则就会出错.

有了数据之后生成效果图就很方便了找到echarts的相关的配置和demo 进行设施即可,官方文档自己网上看就是了,我直接上我的效果地址):http://47.106.197.17/zhongshanUniversity/#/GIS/chartmap  和组件相关代码如下:

<template>
  <div style="height:80%;width:100%;background:#1e1e1e"/>
</template>
 
<script>
import echarts from "echarts";
import $ from "jquery";
import { debounce } from "@/utils";
 
export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    datalist: {
      type: [Object, Array],
      default: {
        gmq_count: 10,
        ftq_count: 20,
        dpxq_count: 30,
        lhq_count: 40,
        ytq_count: 1000,
        baq_count: 500,
        nsq_count: 60,
        lhuq_count: 90,
        lgq_count: 80,
        psq_count: 10
      }
    },
    name: {
      type: Array
    }
  },
  data() {
    return {
      chart: null,
      maxrangeV: ""
    };
  },
  mounted() {
    this.initChart();
    this.getMaxrange();
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHanlder);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    window.removeEventListener("resize", this.__resizeHanlder);
    this.chart.dispose();
    this.chart = null;
  },
  watch: {
    datalist() {
      this.initChart();
      this.getMaxrange();
    }
  },
  methods: {
    initChart() {
      let self = this;
      this.chart = echarts.init(this.$el);
      this.chart.on("click", function(param) {
        self.$emit("clickfunc", param);
        // alert(param.name);
      });
      var uploadedDataURL = "static/map/map.geojson"; //"http://echarts.baidu.com/examples/data-gl/asset/data/buildings.json"; szdistrict
      // 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。https://blog.csdn.net/GRAY_KEY/article/details/81295961
      this.chart.showLoading();
      $.get(uploadedDataURL, function(usaJson) {
        self.chart.hideLoading();
 
        echarts.registerMap("USA", usaJson);
        let option = {
          title: {
            text: "",
            subtext: "",
            sublink: "https://blog.csdn.net/qq_26991807",
            left: "right"
          },
          tooltip: {
            trigger: "item",
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: function(params) {
              var value = (params.value + "").split(".");
              value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, "$1,");
              return params.seriesName + "<br/>" + params.name + ": " + value;
            }
          },
          visualMap: {
            left: "right",
            min: 0,
            max: self.maxrangeV,
            inRange: {
              color: [
                "#313695",
                "#4575b4",
                "#74add1",
                "#abd9e9",
                "#e0f3f8",
                "#ffffbf",
                "#fee090",
                "#fdae61",
                "#f46d43",
                "#d73027",
                "#a50026"
                /* 
                '#29FF6C',
                '#29FF7E',
                '#29FF90',
               ' #29FFA2',
                '#29FFB4',
                '#29FFC6',
                '#29FFD7',
                '#29FFE9',
                '#29FFFB',
                '#29F1FF',
                '#29DFFF',
                '#29CDFF',
                '#29BCFF',
                '#29AAFF',
                '#2998FF',
                '#2986FF',
               ' #2974FF',
                '#2962FF',
                '#2950FF',
                '#293FFF',
                '#292DFF' */
              ]
            },
            text: ["High", "Low"], // 文本，默认为数值文本
            calculable: true,
            textStyle: {
              color: "#fff"
            }
          },
          toolbox: {
            show: true,
            //orient: 'vertical',
            left: "right",
            top: "top",
            feature: {
              // dataView: { readOnly: true },
              restore: {},
              saveAsImage: {}
            },
            iconStyle: {
              borderColor: "#fff"
            }
          },
          series: [
            {
              name: "深圳",
              type: "map",
              roam: true,
              map: "USA",
              center: [114.16315, 22.60894],
              zoom: 1.1,
              itemStyle: {
                emphasis: { label: { show: true } },
                normal: {
                  label: {
                    show: true,
                    formatter: function(params) {
                      var value = (params.value + "").split(".");
                      value = value[0].replace(
                        /(\d{1,3})(?=(?:\d{3})+(?!\d))/g,
                        "$1,"
                      );
                      return params.name + ":" + value;
                    },
                    textStyle: {
                      color: "#fff",
                      align: "left",
                      fontSize: 16
                    }
                  }
                }
              },
              // 文本位置修正
              textFixed: {
                // Alaska: [20, -20]
              },
 
              data: [
                { name: "福田区", value: self.datalist.ftq_count },
                { name: "罗湖区", value: self.datalist.lhuq_count },
                { name: "龙华区", value: self.datalist.lhq_count },
                { name: "龙岗区", value: self.datalist.lgq_count },
                { name: "南山区", value: self.datalist.nsq_count },
                { name: "坪山区", value: self.datalist.psq_count },
                { name: "盐田区", value: self.datalist.ytq_count },
                { name: "大鹏新区", value: self.datalist.dpxq_count },
                { name: "光明新区", value: self.datalist.gmq_count },
                { name: "宝安区", value: self.datalist.baq_count }
              ]
            }
          ]
        };
 
        self.chart.setOption(option);
        // self.chart.on("click", function(params) {
        //   alert(params.name + params.value);
        // });
      });
    },
    getMaxrange() {
      let v1 = 0;
      for (let v in this.datalist) {
        if (this.datalist[v] > v1) {
          v1 = this.datalist[v];
        }
      }
      this.maxrangeV = v1;
    }
  }
};
</script>

地图的geojson格式示意如下:

{"type":"Feature",
"geometry":{"type":"Polygon","coordinates":[[[114.07240271810434,22.591215901890433],    
  [114.07277218853474,22.59022699132922],[114.07345287044389,22.58930674419094], 
  [114.07358415928655,22.589101366040097],...]]]},
"properties":{"stroke":"#555555","stroke-width":2,"stroke-pacity":1,"fill":"#555555","fill- 
  opacity":0.5,"name":"罗湖区","height":1.1}
}