echars 绘制多点连线地图 vue

最终效果

引入echarts

	import echarts from 'echarts' // 全局注册echarts 
	Vue.prototype.$echarts = echarts;

获取地图所需要的数据

http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

html

	<div id="map_bd"></div>

请求数据

	getCityData() {
		var url =  'https://geo.datav.aliyun.com/areas_v2/bound/500000.json';//重庆
		axios.get(url).then(res=> {
			this.renderMap(res);
		})
	}

渲染地图

	//相关数据
	data() {
		return {
			mapData:[]
		}
	}
	renderMap(mapData) {
		var oMap = this.$echarts.init(document.getElementById("map_bd"));
      	var _self = this;
      	this.$echarts.registerMap("CQ", mapData);
      	this._handleMapData("巴南区", mapData);
      	//
      	var convertData = function (data) {
	        var res = [];
	        for (var i = 0; i < data.length; i++) {
	          var dataItem = data[i];
	          var fromCoord = _self.coverPointerList[dataItem[0].name];//开始
	          var toCoord = _self.coverPointerList[dataItem[1].name];//结束
	          if (fromCoord && toCoord) {
	            res.push({
	              fromName: dataItem[0].name,
	              toName: dataItem[1].name,
	              coords: [fromCoord, toCoord],//
	            });
	          }
	        }
	        return res;
      };
      var customSettings = []; //每块颜色
      var colors = ["#054667", "#00a8ff"];
      this.mapData.forEach(function (item, index) {
        customSettings.push({
          name: item.name,
          map:item.map,
          itemStyle: {
            areaColor: colors[item.value],
            color: colors[item.value],
          },
        });
      });
      var options = {
        geo: {
          map: "CQ",
          zoom: 1.2,
          roam: false,
          label: {
            show: false,
          },
          itemStyle: {
            borderColor: "#000",
          },
          emphasis: {
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: "#2a333d",
            },
          },
          regions: customSettings,//
        },
        series: [
          {
            type: "lines",//绘制连线
            zlevel: 2,
            symbolSize: 2,
            effect: {
              show: true,
              period: 0,
              trailLength: 0,
              symbolSize: 2,
            },
            lineStyle: {
              color: "#FAFD04",
              width: 1,
              opacity: 1,
              curveness: 0.2,
              type: "dashed",
            },
            data: convertData(this.mapSeriesListData),
          },
          {
            type: "scatter",//绘制点
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke",
            },
            symbolSize: function (val) {
              return 5;
            },
            itemStyle: {
              color: "#FAFD04",
            },

            data: this.mapSeriesListData.map(function (dataItem) {
              // console.log(dataItem[1])
              return {
                name: dataItem[1].name,
                value: _self.coverPointerList[dataItem[1].name].concat([
                  dataItem[1].value,
                ]),
              };
            }),
          },
          {
            type: "effectScatter",//绘制中心辐射点
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke",
              scale: 250,
              period: 10,
            },
            symbolSize: function (val) {
              return 1;
            },
            itemStyle: {
              color: "#FAFD04",
            },
            data: [
              {
                naem: "巴南区",
                value: [106.519423, 29.381919],
              },
            ],
          },
        ],
      }; 
      oMap.setOption(options);
	},
		//处理地图数据  模拟 可根据业务调整  以target为中心
	 _handleMapData(target, mapData) { 
      for (var i = 0; i < mapData.features.length; i++) {
        var index = i % 2;
        var temp = mapData.features[i].properties;
        var { name, cp } = temp;
        this.coverPointerList[name] = cp;
        this.mapData.push({
          name,
          value: index,
          map:mapData.features[i]
        });
        if (index == 1) {
          this.mapSeriesListData.push([{ name: target }, { name, value: i }]);
        }
      }
    }