永洪社区

标题: js组件使用echarts地图组件加载不出 [打印本页]

作者: yhdata_yPlp2g7t 时间: 2022-8-12 16:42
标题: js组件使用echarts地图组件加载不出
情况是这样的，公司有一个业务需求，要求在地图上，点击某个区域，就跳转到相应的页面。现在现在的组件是js自定义绘图，使用的js是echarts。
第一阶段判断是否可行时，使用了文档的第一个示例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
  title: {
text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
data: ['销量']
  },
  xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
{
   name: '销量',
   type: 'bar',
   data: [5, 20, 36, 10, 10, 20]
}
  ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

但会显示如下问题：

查询得知找不到dom树，也是，所以就将第一行var myChart = echarts.init(document.getElementById('main')); 给删除了，成功运行。

但轮到地图时，噩梦就开始了，让我们看看部分js代码：
var ROOT_PATH = 'https://echarts.apache.org/examples';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/geo/USA.json', function (usaJson) {
  myChart.hideLoading();
  echarts.registerMap('USA', usaJson, {});
  option = {};
  myChart.setOption(option);
});
option && myChart.setOption(option);

这次发生了其他错误，图像一直在loading界面，关闭这个小窗口后，会显示原本的问题，如图所示：

这时将dom相关的代码删除，下述代码：
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
myChart.showLoading();
myChart.hideLoading();

这时成功运行了，吗？嗯……就是一片空白，就没有报错，也没有出现图片，如下图的上半部分所示

现在初步猜测是dom的问题，以至于地图未显示，但是……
后端小白啥都不会，啥都不懂，跪求前端大佬指教修改代码

作者: odinge 时间: 2022-8-12 17:55

原因：可能是请求的地理信息地址跨域了，echarts官网做了跨域限制，导致后面的回调没执行到所以一致loading
解决：可以尝试使用没限制跨域的地址或者使用请求本地地址
如：
myChart.showLoading();
$.get('?proc=2&resource=(bihome下的路径)', function (usaJson) {
myChart.hideLoading();
echarts.registerMap('USA', usaJson, {});
option = {};
myChart.setOption(option);
});

echarts

作者: 心猿 时间: 2022-8-17 15:28
本帖最后由心猿于 2022-8-17 15:40 编辑

odinge 发表于 2022-8-12 17:55
原因：可能是请求的地理信息地址跨域了，echarts官网做了跨域限制，导致后面的回调没执行到所以一致loadin ...

作者: yhdata_bear 时间: 2022-8-17 17:21
您好，问题解决了吗？

作者: 永洪tech-cp 时间: 2022-8-17 18:42

odinge 发表于 2022-8-12 17:55
原因：可能是请求的地理信息地址跨域了，echarts官网做了跨域限制，导致后面的回调没执行到所以一致loadin ...

跨域问题可以参考这个帖子https://club.yonghongtech.com/thread-26030-1-2.html?id=26030

作者: 永洪tech-cp 时间: 2022-8-17 18:43
把需要用到的json文件放到本地，再改一下引用路径试试

欢迎光临永洪社区 (https://club.yonghongtech.com/)