vue中使用echarts和百度地图实现飞机迁徙图

在vue-cli生成的项目中使用echarts和百度地图api实现飞机迁徙图，当然也可以实现其他效果。

1. 准备

• 项目安装echarts
  在已经生成的vue项目根目录npm install echarts -S

• 百度地图api平台申请百度地图ak

  地址

2. 开始

2.1 加入百度地图api

首先我们在public/inde.html head中引入百度地图api

2.2 引入echarts及其他文件

在我们需要绘制迁徙图的组件引入以下文件

import echarts from "echarts";
require("echarts/extension/bmap/bmap");
require("echarts/map/js/china.js");

以下是完整代码：

2.3 效果图

3 重点

每条路线的都有起始点，type 为 lines，然后增加effect
属性增加运动效果，一个完整的迁徙线的配置如下：

{
    name: "北京 ,
    type: 'lines',
    zlevel: 1,
    effect: {
        show: true,
        period: 6,
        trailLength: 0.7,
        color: "#fff",
        symbolSize: 3
    },
    lineStyle: {
        normal: {
            color: "#a6c84c",
            width: 0,
            curveness: 0.2
        }
    },
    data: [
    {
        fromName: "北京"toName: "上海"coords:['起点坐标', '结束坐标'']},
        ...
    ]
}