【可視化插件】Vue項目中Echarts流向圖遷徙圖實現

在數據可視化中，地圖可視化是高頻應用的一種。我們在一些新聞報道和商業雜志上，會經常看到運用地圖來分析展示商業現象，這樣的利用地圖來反映和分析數據的形式叫數據地圖。數據地圖可以最直觀的表達出數據之間的空間關系，因此在很多數據分析場景中被廣泛應用。流向地圖也是地圖可視化的一種，本文來分享Vue項目中Wyn Enterprise流向地圖使用技巧。

什么是流向地圖？
流向地圖在地圖上顯示信息或物體從一個位置到另一個位置的移動及其數量。
通常用來顯示人物、動物和產品的遷移數據。單一流向線所代表的移動規模或數量由其粗細度表示，有助顯示遷移活動的地理分布。
流向地圖多應用於區際貿易、交通流向、人口遷移、購物消費行為、通訊信息流動、航空線路等場景，也可應用企業貨物運輸，供應鏈管理。


如何快速在Vue項目中實現流向圖遷徙圖？
一、利用Echarts實現
Echarts百度的開源圖表庫，是一個純Java的圖表庫，因此使用Echarts進行地圖可視化會稍顯復雜，需要有一定JS基礎才能較為輕松地上手。
1. 首先打開vue項目，cmd進入命令安裝echarts依賴包，默認下載最新版本

1. npm install echarts --save

復制代碼

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

1. import * as echarts from 'echarts';
2. 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 + "<br />" + 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的流向地圖，效果如下：

總結：

代碼開發的特點讓Echarts在實現地圖可視化的過程中具有極大的自由度（任何用代碼開發的操作都是如此）。簡單的JS稍微學習下都能很快掌握，但要深入做一些和數據的交互，會有難度，不僅僅是前端的事情了。總體來看，Echarts作為一款國產工具，可以說瑕不掩瑜，比較推薦有編程基礎的讀者使用。用於集成一些圖表應用。

二、可視化軟件做流向地圖

除了Echarts之外，還有更快的數據地圖制作方法，那就是利用一些可視化地圖制作軟件，比如一些BI工具Wyn Enterprise、tableau等。比如我要分析一個企業的區域貿易的銷量情況，這里我就用Wyn Enterprise給大家實操一下。
下面是原始數據：

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

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

最后呢只需要在VUE項目里調用這個儀表板地址即可實現項目需求。
流向地圖在Wyn Enterprise可視化大屏中的一個示例：