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

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

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

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

（流向地圖，GIF動圖）

實現(xiàn)方案A：Echats

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

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、 引入相關(guān)文件后就開始創(chuàng)建地圖實例。在Echarts中，數(shù)據(jù)需要預(yù)先進行清洗，再放入代碼中。代碼塊主要分為三部分：字段定義地理位置、字段賦值以及圖表框架搭建，部分代碼如下所示：

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], //偏移設(shè)置
                formatter: "{b}" //圓環(huán)顯示文字 },
              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);  }

（模擬數(shù)據(jù)）

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

（流向地圖，GIF動圖）

小結(jié)：

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

實現(xiàn)方案B：嵌入式商業(yè)智能軟件

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

（原始數(shù)據(jù)）

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

（拖拽式設(shè)計流向地圖，GIF動圖）

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

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

（Wyn Enterprise可視化大屏）

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

總結(jié)

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

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

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