echarts绘制成都地图

备注：
1. 可以直接复制代码在echarts示例中，查看效果

2. registerMap()第二个**.json完整数据需要自己去下载（在线下载工具：http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.269597347856156&lng=102.93679772748688&zoom=6.5）

echarts.registerMap(
  'chengdu',
  '{"type":"FeatureCollection","features":[{"type":"Feature","id":1,"geometry":{"type":"Polygon","coordinates":[[[104.09427122000005,30.666710537000029,0,null],[104.09427497100006,30.666762004000077,0,null],[104.09427183900004,30.666803215000073,0,null],[104.09426782200006,30.666828923000025,0,null],[103.40568411200007,30.538810647000048,0,null],[103.40444321500007,30.540436224000075,0,null],[103.40232391400008,30.543840046000071,0,null],[103.39650656400005,30.546369546000051,0,null],[103.38915020500008,30.547232621000035,0,null],[103.38294887600006,30.548686215000032,0,null]]]},"properties":{"OBJECTID_1":24,"OBJECTID":22,"name":"邛崃市","Code":"510183","lng":103.39044461,"lat":30.383125580000002,"Shape.STArea()":0.12920987241399134,"Shape.STLength()":2.6419177768217228}}]}'
);

let areaNameData = [
  {
    value: '888', // ['103.901092','30.795854']
    symbol: '123456',
    name: '郫都区',
    symbolSize: 45,
    bg: 'red'
  }
];

var option = {
  // 添加地图底层（显示出边缘立体效果）
  geo: [
    // 最底层
    // {
    //   layoutCenter: ['50%', '50%'],
    //   layoutSize: '90%',
    //   show: true,
    //   map: 'chengdu',
    //   label: {
    //     show: false,
    //     color: '#fff'
    //   },
    //   roam: true,
    //   itemStyle: {
    //     areaColor: '#021E56',
    //     borderColor: 'RGBA(32, 161, 222, .4)',
    //     borderWidth: 2
    //   },
    //   select: {
    //     disabled: true
    //   },
    //   emphasis: {
    //     disabled: true
    //   }
    // },

    // {
    //   layoutCenter: ['50%', '50%'],
    //   layoutSize: '88%',
    //   show: true,
    //   map: 'chengdu',
    //   label: {
    //     show: false
    //   },
    //   roam: false,
    //   itemStyle: {
    //     areaColor: {
    //       type: 'linear',
    //       x: 0,
    //       y: 0,
    //       x2: 0,
    //       y2: 1,
    //       colorStops: [
    //         {
    //           offset: 0,
    //           color: '#0150A1'
    //         },
    //         {
    //           offset: 1,
    //           color: '#0150A1'
    //         }
    //       ],
    //       global: false
    //     },
    //     borderWidth: 0
    //   },
    //   emphasis: {
    //     disabled: true
    //   },
    //   select: {
    //     disabled: true
    //   }
    // }
  ],
  backgroundColor: '#202A36', // 整体容器背景 17212Drgba(0,0,0,0)
  tooltip: {
    show: true // 鼠标移动到地图显示的弹框信息
  },

  series: [
    {
      name: '所占面积', // 提示框标题
      // coordinateSystem: "geo",
      type: 'map',
      map: 'chengdu',
      data: areaNameData,
      roam: true, // 鼠标能够拖动/缩放地图
      // 地图上显示的文字
      label: {
        normal: {
          show: true,
          color: '#fff',
          fontSize: 20,
          formatter: function (params) {
            // params 是一个包含当前地区数据的对象
            // 你可以通过 params.name 拿到地区名称
            return params.value >= 0 ? params.name + ':' + params.value : ''; // JSON.stringify(params)
          }
          // formatter: '{b}\n{c}', // 标签显示内容 // b区域名称  c区域数据（对应value值）
          // position: 'right', // 标签位置
          // textStyle: {
          //     color: '#FCFCFD', // 文字颜色
          //     fontSize: 8, // 地圖区域文字
          //     backgroundColor: '#223156', // 文字背景
          //     borderColor: '#0E92F9',
          //     borderWidth: 1,
          //     padding: [5, 40, 5, 5],
          //     borderRadius: 3,
          // }
        }
      },
      itemStyle: {
        normal: {
          areaColor: '#223756', // 区域颜色
          borderColor:'#477BB9', // 区域边线颜色
          borderWidth: 1,
          borderType: 'dashed',
        }
      }
    }
  ]
};