自定义页面用JSX做一个中国地图散点图不成功，求分析原因

希望的功能为：用Echarts中国地图，在一些坐标点上标记散点图，鼠标悬停时能显示该坐标点的数据。期望的实现效果和Echarts案例类似https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-scatter-simple。只是案例上的地图为冰岛的。希望大师能指导以下下面代码有什么问题？怎么修改？希望修改后的代码实际可用，也算是丰富了宜搭的调取资源。非常感谢！

JSX设定ID为”main“，然后didMount()的代码为： export function didMount() { const script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js'; script.async = true; script.onload = () => this.ditu(); document.body.appendChild(script); }

ditu函数的代码为： export function ditu() {

// 坐标分别为北京、广州、重庆的市政府坐标点 const coordinates = [ [116.397128, 39.916527], [113.271431, 23.135336], [106.50394, 29.546977] ];

const data = [ { name: '北京', value: Math.random() * 100 }, { name: '广州', value: Math.random() * 100 }, { name: '重庆', value: Math.random() * 100 } ];

const dom = document.getElementById('main'); const myChart = window.echarts.init(dom);

const option = { tooltip: { trigger: 'item', formatter: '{b}
{c}' }, series: [ { name: '地图散点', type: 'scatter', coordinateSystem: 'geo', data: data.map((item, idx) => { return { name: item.name, value: [...coordinates[idx], item.value] }; }), symbolSize: 10, itemStyle: { color: '#7FFF00' } }, { type: 'map', map: 'china', roam: false, emphasis: { itemStyle: { areaColor: '#d0e1e5' } } } ] };

myChart.setOption(option); }

展开

收起

游客as6kdbzxuw7hy 2023-06-13 17:35:00 157 0

来自：钉钉宜搭

2 条回答

写回答

取消提交回答

飞云觅宙

十年摸盘键，代码未曾试。今日码示君，谁有上云事。

我觉得你可以考虑用宜搭大屏地图组件来实现，

钉钉宜搭大屏借助阿里云DataV引擎，实现数据可视化的搭建，帮助有数据展示需求的用户快速完成可视化应用搭建。为馆理者，运营，设计师，研发人员提供完整的可视化搭建工具。同时提供企业经营分析，业务监控，展示汇报，城市指挥等多种业务场景的。

具体你可以去b站关注一位叫苏星河牛通的博主，他视频讲解链接截图如下：

2023-06-14 15:04:21

赞同 1 展开评论打赏
爱吃白菜的GGB
根据提供的代码，我发现可能存在以下问题：
1. 在didMount函数中，创建的script标签的属性async为true，这意味着脚本会异步加载，可能导致echarts.min.js未加载完毕就执行ditu函数，从而导致报错。建议将async属性设置为false，确保echarts.min.js加载完毕后再执行ditu函数。
2. 在ditu函数中，没有对window.echarts进行判断，如果echarts.min.js加载失败或未加载，会导致window.echarts为undefined，从而导致报错。建议在使用window.echarts前先进行判断，例如：
```
if (typeof window.echarts === 'undefined') {
  console.error('echarts未加载');
  return;
}
```
1. 在使用echarts时，需要引入对应的地图文件，例如上述代码中的中国地图。可以在https://echarts.apache.org/examples/zh/index.html下载对应的地图文件，然后在代码中通过option.map属性进行引用。建议将地图文件下载到本地，然后通过相对路径进行引用，例如：
```
series: [
  {
    type: 'map',
    map: 'china',
    roam: false,
    emphasis: {
      itemStyle: {
        areaColor: '#d0e1e5'
      }
    }
  }
],
```
以上是我对代码的初步分析，希望对您有所帮助。
2023-06-13 18:46:26

赞同展开评论打赏