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

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

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

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

（流向地圖，GIF動(dòng)圖）

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

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

1、 首先打開vue項(xiàng)目，cmd進(jìn)入命令安裝echarts依賴包，默認(rèn)下載最新版本

npm install echarts –save

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

import \* as echarts from 'echarts';

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

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

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動(dòng)圖）

小結(jié)：

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

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

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

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

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

（拖拽式設(shè)計(jì)流向地圖，GIF動(dòng)圖）

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

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

（Wyn Enterprise可視化大屏）

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

總結(jié)

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

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

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