永洪社区

标题: 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文件放到本地,再改一下引用路径试试




欢迎光临 永洪社区 (http://club.yonghongtech.com/) Powered by Discuz! X3.4