用CDN方式引入echarts画热力图demo踩坑

调研echarts画热力图：官方示例地址 Examples - Apache ECharts

不想npm安装包，后来安装了好像处理不当遇到两次自动退出开发模式了

 首先先实现一个动态script加载的方法：

export async function loadScript(url: string, id?: string) {
  return new Promise((resolve, reject) => {
    if (document.querySelector(`#${id}`)) {
      resolve('');
      return;
    }
    const script = document.createElement('script');
    script.id = id || `${Date.now()}`;
    script.onload = () => resolve('');
    script.onerror = () => {
      script.parentNode?.removeChild(script);
      reject();
    };
    script.src = url;
    document.body.appendChild(script);
  });
}

之后就可以用loadScript方法来异步引入cdn的js了

loadScript('https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js', 'echart_script').then(() => {
  // window.echarts开始初始化操作
})

写到这里以为ok了，那就错了。

一运行，报错：

Uncaught TypeError: Cannot read properties of undefined (reading 'type')

懵了一段时间，github issue搜索一顿：

https://github.com/apache/echarts/issues/4407

里面提到要引入bmap，

于是再改一下：

loadScript('https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js', 'echart_script').then(() => {
    loadScript('https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/extension/bmap.min.js', 'echart_bmap').then(() => {
          // 可以echarts.init了？？？
        })
      })
    

好家伙，引完echarts引bmap，又报BMap.api is not loaded

于是又翻到了：

echart地图在vue中报错：BMap api is not loaded - 星宝攸宁 - 博客园

原来还要有百度地图的授权api秘钥信息

loadScript('https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js', 'echart_script').then(() => {
      loadScript('https://api.map.baidu.com/getscript?v=3.0&ak=秘钥信息等等', 'bd_api').then(() => {
        loadScript('https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/extension/bmap.min.js', 'echart_bmap').then(() => {
          // 可以echarts.init 和setOption了！！！
        })
      })
    })

终于，本地demo跑起来了。

似乎官方文档CDN只是建议去哪里取，并没有提及怎么画热力地图的使用场景，两个晚上折腾了一下，终于搞定了。