我們經常在一些新聞報道和商業雜志上看到運用地圖來展示商業現象的做法。這樣利用地圖來反映和分析數據的形式，叫數據地圖，它可以直觀的表達出數據之間的空間關系。

在數據地圖中，流向地圖屬于高頻應用場景，但實現起來并不容易，本文來將以Vue這個熱門的Web技術為例，探討如何在項目中快速開發出炫酷的流向地圖。

流向地圖也稱遷徙圖，可以在地圖上顯示信息或物體從一個位置到另一個位置的移動及其數量，通常用來顯示人物、動物和產品的遷移數據。單一流向線所代表的移動規模或數量由其粗細度表示，有助顯示遷移活動的地理分布。

流向地圖多應用于區際貿易、交通流向、人口遷移、購物消費行為、通訊信息流動、航空線路等場景，也可應用企業貨物運輸，供應鏈管理。

（流向地圖，GIF動圖）

實現方案A：Echats

Echarts是百度的開源圖表庫，其中就包含地圖組件。使用Echarts進行地圖可視化會稍顯復雜，需要有一定JS基礎才能上手。

1、 首先打開vue項目，cmd進入命令安裝echarts依賴包，默認下載最新版本

npm install echarts –save

2、 進入src目錄里的main.js全局引入echarts，以及引入中國地圖文件，這樣就可以在任何組件中使用了

import \* as echarts from 'echarts';

import "echarts/map/js/china.js"; 

3、 引入相關文件后就開始創建地圖實例。在Echarts中，數據需要預先進行清洗，再放入代碼中。代碼塊主要分為三部分：字段定義地理位置、字段賦值以及圖表框架搭建，部分代碼如下所示：

public render() {      //圖表繪制方法
    this.chart.clear();
    const isMock = !this.items.length;
    const items = isMock ? Visual.mockItems : this.items;
    this.container.style.opacity = isMock ? '0.3' : '1';
    const options = this.properties;
    let planePath = options.effect ? options.symbol : options.symbolStyle;
    let departureValue = isMock ? ['北京', '上海', '廣州市'] : this.legendData;
    let color = isMock ? ['#a6c84c', '#ffa022', '#46bee9'] : options.palette;
    var series = [];
    items.map((item: any, i: number) => {
      if (item.length) {
        let j = i % color.length;
        series.push({
            name: item[0].fromName,
            type: 'lines',
            zlevel: 1,
            effect: {
              show: true,
              period: options.period,
              trailLength: 0.7,
              color: color[j],
              symbolSize: 4},
            lineStyle: {
              normal: {
                color: color[j],
                width: 0.1,
                curveness: 0.2 } },
            data: item },
          {
            name: item[0].fromName,
            type: 'lines',
            zlevel: 2,
            symbol: ['none', 'arrow'],
            symbolSize: 10,
            effect: {
              show: true,
              period: options.period,
              trailLength: 0,
              symbol: planePath,
              symbolSize: options.symbolSize },
            lineStyle: {
              normal: {
                color: color[j],
                width: 1,
                opacity: 0.6,
                curveness: 0.2 } },
            data: item},
          {
            name: item[0].fromName,
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              brushType: 'stroke' },
            label: {
              normal: {
                show: true,
                position: "right", //顯示位置
                offset: [5, 0], //偏移設置
                formatter: "{b}" //圓環顯示文字 },
              emphasis: {
                show: true  } },
            symbolSize: options.pointSize,
            itemStyle: {
              normal: {
                color: color[j]  }  },
            data: this.parseData(item)  }  );  } });
    var option = {
      tooltip: {
        trigger: 'item',
        formatter: function (params, ticket, callback) {
          if (params.seriesType == "lines") {
            return params.data.fromName + " --> " + params.data.toName + "
" + params.data.value;
          } else {
            return params.name; }  } },
      legend: {
        show: options.showLegend,
        orient: 'vertical',
        top: 'bottom',
        left: 'right',
        data: departureValue,
        textStyle: {
          color: '#fff'   },
        selectedMode: 'multiple',   },
      geo: {
        map: options.mapName,
        label: {
          emphasis: {
            sfalsehow: true,
            color: '#fff'  } },
        roam: options.roam,
        layoutCenter: ["50%", "50%"], //地圖位置
        layoutSize: "125%",
        itemStyle: {
          normal: {
            borderColor: options.borderColor,
            borderWidth: 1,
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [{
                offset: 0,
                color: options.startColor // 0% 處的顏色
              }, {
                offset: 1,
                color: options.endColor // 100% 處的顏色  }], },
            shadowColor: options.shadowColor,
            shadowOffsetX: -2,
            shadowOffsetY: 2,
            shadowBlur: 10  },
          emphasis: {
            areaColor: options.emphasisColor,
            borderWidth: 0  }   }  },
      series: series   };
    this.chart.setOption(option);  }

（模擬數據）

寫了大約300多行代碼，完成了Echarts的流向地圖，效果如下：

（流向地圖，GIF動圖）

小結：

使用代碼開發，讓Echarts在實現地圖可視化的過程中具有極大的自由度（任何用代碼開發的操作都是如此）。雖然稍學習一下都能很快掌握簡單的JS技巧，但要深入做一些和數據的交互，會有難度；涉及到后端數據整理和傳輸，復雜度會更高一些，不在本文的示例范圍。總體來看，Echarts作為一款國產工具，可以說瑕不掩瑜，推薦有編程基礎的讀者使用。

實現方案B：嵌入式商業智能軟件

除了Echarts之外，還有更快的數據地圖制作方法，那就是利用一些可視化地圖制作軟件，比如一些BI工具Wyn Enterprise、tableau等。那具體如何實現呢？以下，我們以Wyn Enterprise嵌入式商業智能和報表軟件作為工具、以一個企業的區域貿易的銷量情況為場景，做一些具體介紹。

（原始數據）

首先導入數據，然后創建新的儀表板，拖拽數據字段制作圖表。這里有兩種方式來識別地理信息：一種是讓系統根據位置名稱（如城市名）來識別，只綁定位置名稱，系統會自動根據位置名稱識別對應的經緯度，另一種是直接通過經緯度數據來識別，綁定數據系統會自動識別，一鍵生成流向地圖。

（拖拽式設計流向地圖，GIF動圖）

我們使用Wyn Enterprise就這樣簡單拖拽，實現了一個流向地圖。地圖還自動支持數據過濾，鉆取聯動分析等功能，最終用戶也可以根據自己的個人愛好或者分析目標、設置圖表顏色或者其他酷炫的動態效果。

流向地圖在Wyn Enterprise可視化大屏中的一個示例：

（Wyn Enterprise可視化大屏）

最后，我們只需要在VUE項目里調用這個儀表板地址即可實現項目需求。借助強大的開發工具，開發效率有了大幅提升。

總結

是一款嵌入式商業智能和報表軟件，能幫助企業用戶發現更多的數據潛在價值，為管理者制定決策提供數據支撐。Wyn Enterprise 具備完整的嵌入式分析能力，能夠與其他軟件深度集成，也可獨立部署使用，快速提升數據展示和分析能力。

Wyn Enterprise支持公有云、私有云和本地部署等多種部署方式，并能在Java、.net、PHP等開發平臺中使用。您可以將其與ERP、CRM、OA等業務系統，以及釘釘、企業微信等APP進行深度集成，持續交付BI和報表功能，助力您的客戶發現數據的價值。

了解更多關于Wyn Enterprise嵌入式商業智能和報表軟件的內容，請點擊此處立即下載體驗。