ElemeFE/v-charts

ve-map 不显示，其他组件的都正常

Closed this issue · 13 comments

Toxicant2 commented

Summary 简述

echarts @^4.1.0
v-charts @^1.17.6
其他的折现，柱状都显示正常，只有地图完全不加载，其他项目里又是正常的，完全想不到会受什么影响了，地图组件只显示个div，里面没有加载canvas

Reproduce 重现示例

image
image

xiguaxigua commented

把 el-row 换成 div 试试。

Toxicant2 commented

还是一样的，而且el-row里面的ve-line是可以正常显示的

xiguaxigua commented

https://jsfiddle.net/vue_echarts/k8wf54oe/4/

看看上面的例子在你的浏览器上是否有问题。

xiguaxigua commented

page-main 和 page-container 的样式分别是什么？

Toxicant2 commented

浏览器是chrome最新，例子没有任何问题，我现在里面只有div，还是ve-map不正常显示
image

xiguaxigua commented

map 组件在项目中是如何引入的 ？

xiguaxigua commented

参考示例项目，看看能不能重现出你现在遇到的问题 https://codesandbox.io/s/z69myovqzx

Toxicant2 commented

只在我的项目里有这个问题，示例没重现

xiguaxigua commented

确实是个奇怪的问题，不过我这边没有办法重现，所以也不好确定究竟是什么原因导致的。您的项目代码方便我看一下吗，如果不方便的话，可以把比较关键的相关几个页面的代码提供一下，只要能够在我的本地重现就好办了。

Toxicant2 commented

您好，项目上传了，直接npm install，run就可以了,
页面在统计下的第一个菜单，
代码在src/views/report/disease-ctrl-chart.vue
easy-project.zip

xiguaxigua commented

ve-map 获取地图数据的时候使用了一个简单的 ajax 请求，然而项目中的 mockjs 把 xhr 封装了一层，应该触发的 onload 没有触发出来，所以这个 promise 一直在 pending 状态，组件的渲染流程没有继续下去，所以就没有正常显示出来。
有两种方案可以解决这个问题：

  1. 去掉 mockjs ，使用别的方法来处理测试数据。
  2. 使用 mapOrigin 属性，预先在项目中引入地图 json 并通过 mapOrigin 传递给组件，这样就不需要通过 ajax 的方式引入地图了。
import China from 'echarts/map/json/china.json'

this.chartSettings = {
  mapOrigin: China
}
  • 👍11
Toxicant2 commented

嗯，问题解决了。太感谢了。

  • 😄1