Echart3+vue实现自定义多色板块迁徙地图

成品图

已上传到Echart（js）

也可以看github（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
    }