weixin_52084329的博客

又是心情异常复杂的一篇文章，但是万事开头难，还是超级开心啊哈哈哈哈哈哈哈！这是自己写的一个小项目，基于vite创建，包含了echarts调用api请求数据，所以里面涉及到了跨域问题困扰了我很久！

在写中国地图和世界地图切换的时候，由于要两次进行网络请求调用api，而echarts渲染又不能多次渲染，所以就报了这么一个错误：echarts.js Uncaught TypeError: Cannot read property ‘getAttribute’ of null错误原因分析：解决方法：让两个请求都调用完，在进行渲染——执行多个并发请求官方示例：使用axios配合axios.all()、axios.spread()同时发送多个请求，axios.all()并发执行两个请求，两个请求执行完成

，使用的是itemStyle对象结合了一个setColor自定义函数来进行数据的区间判断并且显示的，但是发现其实可以用visualMap这个映射组件来直接配置颜色。

在echarts.js文件中设置tools对象并导出，在其中可以定义多个函数，此处的chinaMap就是其中的一个图形，这里传入了两个参数，第一个id是这个地图所占据的盒子，第二个data是对地图渲染的数据（也就是关于疫情的数据），其中init初始化语句和最后的setOption语句是必要的，详细的使用方法可以看echarts官网，中间的option部分就是自己关于地图的配置，图形的data直接把传入的data赋值即可。因为这里使用了中国地图，所以需要在main.js文件中额外添加一句，表示引入中国地图。

写这篇多少有点心情复杂，毕竟因为一个巨巨巨巨没意思的bug卡了两整天…废话不多说啦，开篇入题叭，希望大家都能改好自己的bugggggg！！！

详细的选择过程就不放在这里了，需要的可以戳这篇https://blog.csdn.net/weixin_44882488/article/details/124220864。检查是否安装了cnpm, 用以下命令查看一下你是否安装了cnpm。安装完成以后查看安装的版本（显示版本号说明安装成功）选择对应创建条件，创建成功后cd到项目文件夹下面。出现版本号则说明安装成功（最新的以官网为准）进入任意一个想要创建项目的文件夹输入。安装完成后使用以下命令查看版本号。vue create “文件名”