部分echart图表无法显示的解决方法记录

这几天在自学echart图表，没想到直接下载官网示例中的html文件后打开也会出现有些3d图表无法显示的问题，在这里做一个错误记录。

引入第三方插件的问题

因为复制出现了问题，我直接下载官网示例的html文件，发现还是无法显示。研究了一下，发现下载下来的网页源代码里大都只引入了echarts.min.js这个文件，其他的第三方插件虽然有但是都被注释掉了。而事实上，有些3d图表需要其他的第三方插件，这里列举几个主要的：

1. 使用get或getJson函数时需要引入jquery.min.js；

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js">
</script>

2. 绘制3d图时需要引入echarts-gl.min.js，官网的教程里提到使用 ECharts GL 实现基础的三维可视化均需要引入这个文件；

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js">
</script>

3. 绘制矢量场图时需要引入百度地图的第三方插件以及bmap.min.js

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=在这里输入百度地图的key">
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js">
</script>

4. 绘制的图表中有地图时需要引入world.js，很奇怪，这里不能使用版本是5的world.js，不然还是显示不出来。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js">
</script>

getImageData()报错

这里截取了部分报错信息：
Uncaught DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.

百度了很多，最后试了一下 https://www.xttblog.com/?p=2502 这里提到的办法就成功了，感动：

img.crossOrigin = "Anonymous"; //解决画布已被跨源数据污染

多个图表显示出现空白

有一个需要注意的点是不能把所有的图表都命名为myChart，图表的命名不要重复；有的时候不同图表中定义的参数名称一样也会受影响！

以上就是所有错误记录啦！
最后附上echart官网链接：https://echarts.apache.org/examples/zh/index.html