echarts自定义描绘地图和修改地图

需求要求

需要在四川省地图上添加天府区得行政区域

实现此功能

分步骤实现此功能
1、获取json数据
2、描绘地图
3、引入项目

1、获得地图json数据文件

可以从此获取 http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4
点击geojson下载

2、下载文件后（mapgeojson），在此网址内进行地图绘制 http://geojson.io/#map=2/20.0/0.0

如果是下载得文件（在 open 选择 file）

然后就在地图上进行绘制，绘制完成后 在 菜单栏得 Save 中选择 GeoJson 进行保存，保存后修改文件名称问json格式

3、引入项目中，就可以正常使用

扫描二维码关注公众号，回复： 12166408 查看本文章

// html
<div id="main" style="width: 800px;height:800px;"></div>
 // js
 var myChart = echarts.init(document.getElementById('main'));
    $.get('./mapgeo.json',function(geoJson){
    
    
      echarts.registerMap('sc',geoJson,{
    
    });
      var option = {
    
    
        tooltip: {
    
    
          trigger: 'item',
          formatter: '{b}<br/>{c} (p / km2)'
        },
        visualMap: {
    
    
          min: 500,
          max: 50000,
          text:['High','Low'],
          left: 'right',
          realtime: false,
          calculable: true,
          inRange: {
    
    
            color: ['#313695','#4575b4', '#74add1','#abd9e9','#e0f3f8']
          }
        },
        series: [
          {
    
    
            name: '西城',
            type: 'map',
            mapType: 'sc',
            aspectScale: 0.85,  //地图长度比
            label: {
    
    
              normal: {
    
    
                show: true,
                textStyle: {
    
    
                  color: '#000'
                }
              },
              emphasis: {
    
    
                show: true,
                textStyle: {
    
    
                  color: '#333'
                }
              }
            },
            data: [
              {
    
    name: '天府区', value: 5000},
            ]
          }
        ]
      };
      myChart.setOption(option);
    });