原例子 Make A Pie - 模拟迁徙+百度地图
(1条消息) 利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。_GiScript的博客-CSDN博客
效果图：
申请key:[控制台 | 百度地图开放平台 (baidu.com)][_ _ _baidu.com]
可以去这里---->Make A Pie - 150种legend-----图例
飞线样式也可以改
遇到什么问题，可留言，看到会尽快回复。
2016-05-12
上一周完成了地图与飞线的实现，使用的是 d3.js + svg，后发现可能存在性能隐患。
当飞线数量多的时候，页面上则有多个 svg <path> 结点，并且每条飞线有头部、结束圆圈、蒙板等效果，则页面上的结点数是 飞线数*其他部件数。将会是一个较大的值。
画布罩在整个 HTML 上，共两层 Canvas 画布，底层绘制世界地图，表层绘制飞线。
二次贝塞尔曲线公式
（其中 起始点 p0, 控制点 p1, 终点 p2）
t 从 0 变到 1，每个 t 的变化时，就绘制一帧；
飞线的速度就取决于增量变化的大小，增量越小，动画就越细致。
如何表现 t ？
给每一个飞线对象单独一个 t 属性，每绘制完一帧，t = t + 增量(固定值)；
requestAnimationFrame 动画
与 SVG 飞线 相比:
渐变消失: ctx.globalAlpha
使用 globalAlpha 和 临时 Canvas；
但有两个弊端：
模拟数据来源于B2B 外贸单日询盘量，总数共 596 条， 单次同时绘制 50 条 飞线情况下：
具体如下：
动画帧数保持在 42-60 左右，动画流畅；
动画帧数保持在 12-43 左右，视觉上仔细看略有卡顿；
CPU 占用率在 20%-30% 浮动
CPU 占用率高于 100%
皆无内存泄漏问题。 SVG 飞线的 JS heap 总大小略高于 Canvas 飞线。
测试了 Canvas 飞线，在同时绘 50 条、100 条、200 条、300 条、400 条 时的动画流畅度。
