成品圖

（vue）

一、需求

• 中國板塊中的每一個板塊按權重顏色不同
• 遷徙線條的顏色不同
• 遷徙路徑下的文字大小根據權重而定
• 實現遷徙的動態效果

二、實現思路

• 需要地圖，echart，vue的js檔案並分別引入（這裡地圖引入china.js）
• 一個記錄所有遷徙點的經緯度座標的物件geoCoordMap
• 一個記錄出發點到遷徙點的對應關係陣列，每個遷徙點賦予value值對應權重和線條顏色HZdata
• 一個記錄字型大小的變數mapFontSize
• 在data中定義series
• mounted中初始化echart
• 在beforeDestroy中釋放定義了echart的變數

三、資料的處理和實現

    // methods
    getSeries() {
      var _this = this
      var series = [];

      [
        ['杭州', BJdata]
      ].forEach(function(item, i) {
        series.push(
          {  // 遷徙的展示線
            type: 'lines',
            zlevel: 2,
            effect: {  // 顯示線上的特效
              show: true
 
,
              period: 3,  // 特效動畫的時間
              trailLength: 0.02,  // 特效尾跡的長度
              symbol: 'arrow',  // 特效樣式
              symbolSize: 5,  // 特效大小
            },
            lineStyle: {  // 線的樣式
              normal: {
                width: 1,
                opacity: .5,
                curveness: 0.2
 
  // 邊的曲度
              }
            },
            data: _this.convertData(item[1])  // 將定義好的遷徙對應陣列傳給convertData函式處理
          },
          {  // 遷徙點的效果
            type: 'effectScatter',  // 帶有漣漪特效動畫的散點（氣泡）圖
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {  // 漣漪特效相關配置
              period: 4,  // 特效動畫的時間
              brushType: 'stroke',  // 波紋的繪製方式，預設'fill'（效果類似呼吸燈），'stroke'(效果類似水波紋)
              scale: 4  // 波紋的最大縮放比例
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                offset: [13, 0],
                formatter: '{b}',  // 模板變數有 {a}、{b}、{c}，分別表示系列名，資料名，資料值。
                fontWeight: 'lighter'
              },
              emphasis: {
                show: false
              }
            },
            symbol: 'circle',  // 標記的圖形
            // 標記的圖形大小，這裡的大小不固定，根據value值來做計算
            symbolSize: function(val) {
              return 4 + val[2] / 10
            },
            itemStyle: {
              normal: {
                show: false,
                color: '#fff'
              }
            },
            data: item[1].map(function(dataItem, i) {
              return {
                // 每個遷徙點的name和value值，value為包含遷徙點座標點和遷徙點value的陣列
                name: dataItem[0].name,
                value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
                // 這裡可以根據外層數量來單獨定義每個點的樣式大小等
                label:{
                  normal:{
                    fontSize: 12
                  }
                }
              }
            })
          },
          {
              type: 'scatter',  // 散點（氣泡）圖
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: {  // 漣漪特效相關配置
                  period: 4,  // 特效的執行時間
                  brushType: 'stroke',  // 波紋的繪製方式，預設'fill'（效果類似呼吸燈），'stroke'(效果類似水波紋)
                  scale: 4  // 波紋的縮放比例
              },
              label: {  // 是否顯示文字標籤
                  normal: {
                      show: false
                  }
              },
              symbol: 'circle',  // 標記圖形
              symbolSize: 10,  // 標記圖形大小
              itemStyle: {
                  normal: {
                      show: true,
                      color: '#9966cc'
                  }
              },
              // 資料展示
              data: [{
                  name: '貴陽市',
                  value: [106.636577, 26.653325, 100]
              }],
            },
          // 在這裡設定地圖每個模組的顏色
          {
            name: 'categoryA',
            type: 'map',
            geoIndex: 0,
            tooltip: {show: true},
            // 需要設定顏色的模組名稱，value對應visualMap中的顏色值
            data:[
              { name: '北京', value: 0 },
              { name: '上海', value: 2 }
              //.
              //.
              //.
            ],
          }
        )
      })
      this.series = series
    },
    convertData(data) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i]
        // 這裡data[i]的格式為[{name: '遷徙點名稱', value: '遷徙點的value值'}, {name: '出發點的名稱'}]
        // 遷徙點的座標
        var fromCoord = geoCoordMap[dataItem[0].name]
        // 出發點的座標
        var toCoord = geoCoordMap[dataItem[1].name]

        if (fromCoord && toCoord) {
        // 資料處理（這裡的陣列順序影響遷徙線中標記的指向，如果toCoord在前，則標記從出發點指向遷徙點，反之從遷徙點指向出發點）
          res.push([
            {
              coord: toCoord
            },
            {
              coord: fromCoord,
              value: dataItem[0].value
            }
          ])
        }
      }
      return res
    }

series定義好之後新增到option中，使用計算屬性即可

    // computed
    opt() {
      let _this = this
      let obj = {
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          // visualMap顏色值，對應方式是從高到低，這裡的顏色如果需要動態展示也可以定義在data中
          color: ['#0aff45', '#e4ff88', '#0fe6ff', '#f36467']
        },
        geo: {
          map: 'china', // 地圖名稱，如果是省級/市級區域，需要寫入中文，如北京地圖應該在這裡寫'北京' 
          label: {
            emphasis: {
              show: false   // 是否顯示地圖上每個板塊的名稱
            }
          },
          // 這個引數用於地圖的長寬比
          // aspectScale: 0.5,
          // 當前視角的縮放比例。
          // zoom: 1.5,
          layoutCenter: ['50%', '53%'],
          layoutSize: '100%',
          itemStyle: {
            normal: {
              borderWidth: 0,
              opacity: .6
            }
          }
        },
        series: _this.series
      }
      return obj
    }