ecomfe/vue-echarts

示例代码显示内容空白

RoachLin opened this issue · 3 comments

RoachLin commented

请确认

  • 我可以确认这个问题无法在 ECharts 项目本身中复现。

您是如何将 Vue-ECharts 引入项目的？

通过 ES 模块 import

版本信息

auto-test-ui@0.0.0 C:\Users\Lin\Desktop\ui\auto-test-ui
+-- @vitejs/plugin-vue-jsx@3.1.0
| `-- vue@3.4.27 deduped
+-- @vitejs/plugin-vue@5.0.4
| `-- vue@3.4.27 deduped
+-- echarts@5.5.0
+-- element-plus@2.7.3
| +-- @element-plus/icons-vue@2.3.1
| | `-- vue@3.4.27 deduped
| +-- @vueuse/core@9.13.0
| | +-- @vueuse/shared@9.13.0
| | | `-- vue-demi@0.14.7
| | |   `-- vue@3.4.27 deduped
| | `-- vue-demi@0.14.7
| |   `-- vue@3.4.27 deduped
| `-- vue@3.4.27 deduped
+-- vue-echarts@6.7.2
| +-- echarts@5.5.0 deduped
| +-- vue-demi@0.13.11
| | `-- vue@3.4.27 deduped
| `-- vue@3.4.27 deduped
+-- vue-router@4.3.2
| `-- vue@3.4.27 deduped
`-- vue@3.4.27
  `-- @vue/server-renderer@3.4.27
    `-- vue@3.4.27 deduped

问题详情

https://github.com/ecomfe/vue-echarts/blob/main/README.zh-Hans.md#%E7%A4%BA%E4%BE%8B
https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue
第一个是vue3的示例代码，第二个是对应的demo，复制代码到本地，打开网页显示为空，打开浏览器控制台显示 [ECharts] Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.
换了几个浏览器都不行
后来发现在代码最后面的style里加个width就可以了，只有height的话就不行

问题复现

https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue

Justineo commented

无法复现，你发的复现链接渲染是正常的。

RoachLin commented

无法复现，你发的复现链接渲染是正常的。

是这样的，我按vue官方文档新建了个项目，然后把其中一个view替换成了示例代码，然后启动服务器，浏览器打开对应的网址，发现是空白的
明天把项目发给你吧
我知道在在线网站渲染是正常的
或者你看下这段报错是不是说宽高都必须要有的意思？
[ECharts] Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.

Justineo commented

这取决于你的样式布局，Vue ECharts 不会自带的宽高，你需要保证容器本事有一定的尺寸，渲染出来的图会自动撑满容器。你也可以给图本身设置宽高。