echarts地图绘制

概览

此篇文章为echart进行地图绘制，并有城市与城市之前的路径图，适用于物流方面，以下示例为大致的思路梳理，实际应用场景需要拓展更改

一. echarts配置完整代码示例

{
  "geo": {
      "map": "world",
      "roam": true,
      "zoom": 3.8,
      "center": [
          110,
          35
      ],
      "label": {
          "show": false,
          "emphasis": {
              "show": true,
              "textStyle": {
                  "color": "#333",
                  "textBorderColor": "#fff",
                  "textBorderWidth": 2
              }
          }
      },
      "itemStyle": {
          "normal": {
              "areaColor": "#F0F3FA",
              "borderColor": "#C8C1B3",
              "borderWidth": 1
          },
          "emphasis": {
              "areaColor": "#F0F3FA",
              "borderColor": "#B2A471",
              "borderWidth": 2
          }
      },
      "regions": []
  },
  "series": [
      {
          "name": "城市名称",
          "type": "effectScatter",
          "coordinateSystem": "geo",
          "zlevel": 2,
          "symbol": "circle",
          "rippleEffect": {
              "period": 4,
              "brushType": "stroke",
              "scale": 6
          },
          "label": {
              "normal": {
                  "show": true,
                  "position": "right",
                  "offset": [
                      5,
                      0
                  ],
                  "fontSize": 10
              },
              "emphasis": {
                  "show": true
              }
          },
          "itemStyle": {
              "normal": {
                  "show": false,
                  "color": "#1A90FF"
              }
          },
          "data": [
              {
                  "name": "济宁",
                  "value": [
                      "116.59",
                      "35.38"
                  ]
              },
              {
                  "name": "常德",
                  "value": [
                      "111.69",
                      "29.05"
                  ]
              },
              {
                  "name": "武汉",
                  "value": [
                      "114.298572",
                      "30.584355"
                  ]
              },
              {
                  "name": "苏州",
                  "value": [
                      "120.619585",
                      "31.299379"
                  ]
              },
              {
                  "name": "宁波",
                  "value": [
                      "121.549792",
                      "29.868388"
                  ]
              },
              {
                  "name": "南昌",
                  "value": [
                      "115.892151",
                      "28.676493"
                  ]
              },
              {
                  "name": "福州",
                  "value": [
                      "119.3",
                      "26.08"
                  ]
              },
              {
                  "name": "海口",
                  "value": [
                      "110.35",
                      "20.02"
                  ]
              },
              {
                  "name": "上海",
                  "value": [
                      "121.48",
                      "31.22"
                  ]
              },
              {
                  "name": "天津",
                  "value": [
                      "117.2",
                      "39.13"
                  ]
              },
              {
                  "name": "重庆",
                  "value": [
                      "106.54",
                      "29.59"
                  ]
              },
              {
                  "name": "拉萨",
                  "value": [
                      "91.132212",
                      "29.660361"
                  ]
              },
              {
                  "name": "乌鲁木齐",
                  "value": [
                      "87.617733",
                      "43.792818"
                  ]
              },
              {
                  "name": "成都",
                  "value": [
                      "104.065735",
                      "30.659462"
                  ]
              },
              {
                  "name": "广州",
                  "value": [
                      "113.280637",
                      "23.125178"
                  ]
              },
              {
                  "name": "惠州",
                  "value": [
                      "114.412599",
                      "23.079404"
                  ]
              }
          ]
      },
      {
          "name": "线路路径",
          "type": "lines",
          "zlevel": 1,
          "effect": {
              "show": true,
              "period": 8,
              "trailLength": 0,
              "symbol": "",
              "symbolSize": [
                  28,
                  30
              ]
          },
          "lineStyle": {
              "normal": {
                  "color": "#5470C6",
                  "width": 1.5,
                  "opacity": 0.5,
                  "curveness": 0.3
              },
              "emphasis": {
                  "width": 1.5,
                  "opacity": 1,
                  "color": "#4DDC26"
              }
          },
          "data": [
              {
                  "fromCity": "厦门市",
                  "toCity": "昆明市",
                  "coords": [
                      [
                          "118.1",
                          "24.46"
                      ],
                      [
                          "102.73",
                          "25.04"
                      ]
                  ]
              },
              {
                  "fromCity": "青岛市",
                  "toCity": "天津市",
                  "coords": [
                      [
                          "120.33",
                          "36.07"
                      ],
                      [
                          "117.2",
                          "39.13"
                      ]
                  ]
              },
              {
                  "fromCity": "上海市",
                  "toCity": "大连市",
                  "coords": [
                      [
                          "121.48",
                          "31.22"
                      ],
                      [
                          "121.618622",
                          "38.91459"
                      ]
                  ]
              }
          ]
      }
  ]
}

二. 总结梳理

1. geo属性

geo属性主要是地图样式的配置

2. serires

（1）数组第一个对象属性介绍

    1. data：总体需要展示的城市；
    2. 其它属性：主要是对所以展示城市的样式配置，比如涟漪效果等。

（2）数组 第二个数对象属性介绍：

  1.  data：
    指的是从哪个城市到哪个城市，其中数据需要处理
    data里面需要有cityLocation属性，为两个城市的经纬度，为必传属性
   
   2 。effect: 路线图动态效果，例如图标等