Echarts飞行路线图

最近需要引入飞行路线图，在echarts社区找到了相应的案例，并着手进行了尝试，因为中间出现了很多的问题，想在这里记录一下方便后面的学习。

这是我们需要进行引入的案例https://gallery.echartsjs.com/editor.html?c=xSyn_h87Sg
效果图
我们可以发现引入旅行路线图需要，引入第三方的地图插件world.js或者china.js。
我们可以查看相应的插件

由于我们的项目使用的是angular所以前提是在项目中安装Echarts所需的依赖

npm install echarts --save

在ts文件中导入相应的包

import '../../../../../../node_modules/echarts/map/js/china.js';

其他的的使用与官方实例一样，将数据复制到ts文件中，进行调试
我在项目中报了一个严重的错误，

仔细查看是出现dom异常，中间更改了很多的地方，也没有排查出问题，我的图是需要是通过模态框弹出的方式进行展示的。
当点击查看的时候就开始报错。关闭继续报错，我想的是关闭之后进行刷新页面，这样就就不会继续报错，发现不能实现，
是不是我关闭模态框的时候有东西没有关闭，查看了一下，是我的模态框中，使用了组件，组件中才是多点轨迹图。我关闭模态框的时候，
虽然关闭了模态框，但是组件没有判断是否显示或隐藏，我再想是否是这一方面的问题，尝试在关闭模态框的时候使用*ngIf将模态框中的组件也关闭，
发现就不报错了，

ERROR DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': 
The image argument is a canvas element with a width or height of 0.

这里报错，虽然是绘图相关的对象报错，很容易造成混淆
最后实现的效果

最后echart图形使用非常的方便，在数据可视化方面作用非常强大，值得学习。