vue中高德搭配echarts做数据迁徙流线图

前言

此系列共分为以下几篇

• 《vue中高德地图的使用》
• 《vue中基于高德的多行政区域覆盖》
• 《vue中高德搭配echarts做数据迁徙流线图》 （本篇）

本篇效果

流线迁徙.gif

---

实现步骤

1. 思路分析

第一篇的基础讲解，加上上一片的行政区域行政区域展示（描边及背景），其实可以完成很多炫酷效果了。本篇讲述系列篇的最后一篇：vue中高德搭配echarts做数据迁徙流线图。由于流线图使用的曲线是贝塞尔曲线，而在高德中无法直接简单粗暴的使用，想要完成此效果的话可能要进行一些算法操作才能完成该效果。在节约时间成本的条件下，找到了在echarts中完成该操作。简单的说，就是用echarts的功能，搭配高德的经纬度当背景板，来完成此操作。

步骤分析

1. echarts安装 引入
2. 高德背景板设置（经纬度、中心点等）
3. 挂载数据

2. 代码分析

echarts安装 引入

• 安装：npm install echarts --save-dev
• 引入： main.js =>

// 全局挂载echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts;

高德背景板设置

在此中，可以自定义的调整一些关于地图背景板的配置，如样式、3D效果、旋转、动画等，在demo中有所注释，自己根据需要配置即可。

// 加载 amap 组件
amap: {
    // 高德地图中心经纬度
    center: [105.397428, 38.90923], //中心点
    // 高德地图缩放
    zoom: 4,
    // 启用resize
    resizeEnable: true,
    // 自定义地图样式主题
    mapStyle: "amap://xxxxxx", // 地图主题 自己申请即可 我的是极夜蓝主题
    // viewMode:'3D',//开启3D视图,默认为关闭
    // expandZoomRange:true,
    // zooms:[3,20],
    // pitch: 40
},

数据

此处写了两组数据，一组为flyLine代表流线数组，另一组为goals代表目标点。其中流线数据中坐标点有两个，是起始和终点的经纬度坐标。如下所示：

data() {
    return {
        flyLine: [
            {coords: [[116.496437,39.913523], [123.499706,41.857793]]},
            {coords: [[116.496437,39.913523], [86.113232,43.684254]]},
            {coords: [[116.496437,39.913523], [87.343701,35.720308]]},
            {coords: [[116.496437,39.913523], [101.406201,24.177443]]},
            {coords: [[116.496437,39.913523], [111.249951,24.976714]]},
            {coords: [[116.496437,39.913523], [107.206982,33.843608]]},
            {coords: [[116.496437,39.913523], [115.468701,43.557002]]},
            {coords: [[116.496437,39.913523], [107.031201,37.134586]]},
            {coords: [[116.496437,39.913523], [99.648388,38.522914]]},
            {coords: [[116.496437,39.913523], [124.081982,49.361353]]},
        ],
        goals: [
            [123.499706,41.857793],
            [86.113232,43.684254],
            [87.343701,35.720308],
            [101.406201,24.177443],
            [111.249951,24.976714],
            [107.206982,33.843608],
            [115.468701,43.557002],
            [107.031201,37.134586],
            [107.031201,37.134586],
            [99.648388,38.522914],
            [124.081982,49.361353]
        ]
    }
},

数据渲染

最后一步，其实是echarts的常规操作，可以配置流线、提示、流线背景、特效、效果、等等等等，依然是配置自己需要的即可，毕竟是搭配来的地图，特效多了会影响性能～如下：

<div class="map" ref="map">

</div>

mapInit () {
    let _this = this;
    let option = {
        // 加载 amap 组件
        amap: {
            // 高德地图中心经纬度
            center: [105.397428, 38.90923], //中心点
            // 高德地图缩放
            zoom: 4,
            // 启用resize
            resizeEnable: true,
            // 自定义地图样式主题
            mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", //地图主题
            // viewMode:'3D',//开启3D视图,默认为关闭
            // expandZoomRange:true,
            // zooms:[3,20],
            // pitch: 40
        },
        tooltip: {
            trigger: 'item',
            show: false
        },
        animation: false,
        series: [
            // 流线
            {
                coordinateSystem: "amap", // 该系列使用的坐标系是高德地图的坐标系
                type: "lines", // 该类型用于地图上路线的绘制
                zlevel: 1, // 相当于z-index
                effect: { // 线特效的配置
                    show: true,  // 是否显示特效
                    period: 5, // 特效动画的时间
                    trailLength: 0.05, // 特效尾迹的长度 0-1
                    color: "#3437ff", // 特效的颜色
                    symbolSize: 5 // 特效的大小
                },
                lineStyle: { // 线的颜色
                    normal: {
                        color: "rgba(47,68,200,0.1)",
                        width: 2,
                        curveness: 0.2
                    }
                },
                data: _this.flyLine,
            },
            // 目标点
            {
                name: '目标点',
                type: "scatter",
                // 使用高德地图坐标系
                coordinateSystem: "amap",
                // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
                data:  _this.goals,
                symbolSize: 3,
                encode: {
                    value: 2
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(98,122,200,0.78)'
                    }
                }
            },

        ],

    };
    let chart = this.$echarts.init(_this.$refs.map);
    chart.setOption(option);
},

至此，目的完成：

流线迁徙.png

刚才给源码贴出来了，关注公众号【流眸】回复【20617】获取源码哟~