echarts map地图geojson/json格式的简单使用

**

echarts地图简单使用方法 （geojson格式/json格式）

**
首先贴两个非常有用的地图网站
地图下载网站：http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
可以下载精确到县区的geojson格式地图文件(地图更新有一定迟滞性，新成立的区可能没有标注需要自己用下面那个网站修改)
自定义修改地图网站：http://geojson.io/#map=2/20.0/0.0

简单使用

1.引入echarts不多赘述，但要注意echarts5以后引入方式以官网为准。
2.下载所需的地图文件
进入http://datav.aliyun.com/tools/atlas/#下载

3.echarts相关代码

//写在vueData中的地图数据
mapDataArr: [{
        name: '平泉县',
        value: 0,
      },
      {
        name: '宽城县',
        value: 42,
      },
      {
        name: '兴隆县',
        value: 342,
      },
      {
        name: '鹰手营子矿区',
        value: 12,
      },
      {
        name: '承德县',
        value: 132,
      },
      {
        name: '双桥区',
        value: 322,
      },
      {
        name: '双滦区',
        value: 0,
      },
      {
        name: '滦平县',
        value: 25,
      },
      {
        name: '丰宁县',
        value: 125,
      },
      {
        name: '隆化县',
        value: 425,
      },
      {
        name: '围场县',
        value: 23,
      },
      {
        name: '高新区',
        value: 74,
      },
      ],
//以下为数据处理和地名自定义移动与地名字体大小，不需要可不用
let _this = this;
for (let i in _this.mapDataArr) {
//修改地图名称大小（有需要也可在地图上显示自定义文字在formatter中添加即可）
  _this.mapDataArr[i].label = {
    show: true,
    formatter: "{b}",
    fontSize: 15,
    offset: [0, -38],
  };
  //通过修改offset更改地图名称的位置避免遮挡
  if (_this.mapDataArr[i].name == "承德县") {
    _this.mapDataArr[i].label.offset = [50, -80];
  } else if (_this.mapDataArr[i].name == "兴隆县") {
    _this.mapDataArr[i].label.offset = [0, 0];
  } else if (_this.mapDataArr[i].name == "兴隆县") {
    _this.mapDataArr[i].label.offset = [0, 0];
  } else if (_this.mapDataArr[i].name == "高新区") {
    _this.mapDataArr[i].label.offset = [0, 0];
  } else if (_this.mapDataArr[i].name == "双滦区") {
    _this.mapDataArr[i].label.offset = [0, 0];
  } else if (_this.mapDataArr[i].name == "滦平县") {
    _this.mapDataArr[i].label.offset = [30, 0];
  }
}
//以下为echartsmap相关代码
$.get('chengde.geojson', function (chengde) {//我的geojson文件是放在public下的
        echarts.registerMap('chengde', chengde);
        var chart = echarts.init(document.getElementById('eChartsMap'));
        chart.setOption({
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{b}:{c}户',
            backgroundColor: 'rgb(0,0,0,0.5)',
            textStyle: {
              color: 'white',
              fontSize: 15,
            }
          },
          roam: 'scale',//仅支持缩放不能平移
          scaleLimit: {//缩放限制
            max: 2,
            min: 1
          },
          dataRange: {
            left: '0',
            bottom: '0',
            splitList: [{
              start: 300,
              label: '客户数大于300',
              color: 'rgb(233,182,55)'
            },
            {
              start: 101,
              end: 200,
              label: '客户数100 ~ 200',
              color: 'rgb(73,207,242)'
            },
            {
              start: 1,
              end: 100,
              label: '客户数1 ~ 100',
              color: 'rgb(141,214,19)'
            },
            {
              start: 0,
              end: 0,
              label: '客户数为0',
              color: 'rgb(225,225,225)'
            }
            ],
            color: ['rgb(225,225,225)', 'rgb(141,214,19)', 'rgb(73,207,242)', 'rgb(233,182,55)'],
            textStyle: {
              fontSize: 15,
            }
          },
          legend: {
            show: false,
          },
          series: [{
            type: 'map',
            name: '承德市',
            map: 'chengde',

            nameMap: {
              '平泉市': '平泉县',
              '宽城满族自治县': '宽城县',//此处为更改县区名称
              '丰宁满族自治县': '丰宁县',
              '围场满族蒙古族自治县': '围场县',
            },
            itemStyle: {
              areaColor: 'green',
              borderColor: 'white',
              borderWidth: '5',
            },
            data: _this.mapDataArr,
          }],

        });
      });

4.效果图如下
您也可以访问我的私人站 antinfield.com查看动态实例

地图的修改

如果你细心的话可能发现最后的效果图中的中间部分有一个高新区，但下载下来的却没有，这个就是通过上文中的地图修改网站修改的了。由于文章过长具体修改方式请点击：
echarts使用之 geojson.io 自定义修改geojson地图文件

本文地址：https://blog.csdn.net/wallace_yang/article/details/111058917