Vditor ECharts 渲染,只出来一个框框

地址:https://www.lifelonglearning.cc/financial-management

{ "title": { "text": "4 Baskets", "textStyle": { "color": "#235894" } }, "tooltip": {}, "series": [{ "name": "pie", "type": "pie", "selectedMode": "single", "selectedOffset": 30, "clockwise": true, "label": { "fontSize": 18, "color": "#235894" }, "labelLine": { "lineStyle": { "color": "#235894" } }, "data": [ {"value": 100, "name": "Security Basket"}, {"value": 100, "name": "Growth Basket"}, {"value": 100, "name": "High Growth Basket"}, {"value": 100, "name": "Luxury Basket"} ] }] }

@Vanessa 🙏

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    92 引用 • 730 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    1846 引用 • 11887 回帖 • 569 关注

赞助商 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • naiba 10 评论
    支持者 作者

    刚刚 @ 错了,@ 给 V 了,不知道通知到没有,重新 @Vanessa 一下

    现在收到了,你那个高度为 0 了,初始化的时候不能隐藏,要有高度。
    Vanessa
    @Vanessa 需要在哪里设置一下?没有特意设置高度为 0
    naiba
    @naiba 不太清楚你的代码,你参考 demo 试一下
    Vanessa
    @Vanessa 我看了几遍,echarts 的问题,我想办法解决吧
    naiba
    @naiba 就是渲染的时候 echarts 的位置不能隐藏
    Vanessa
    @Vanessa 解决了,只能提前在 style 上面设置 height, document.querySelectorAll(".language-echarts,.language-mindmap").forEach(e => { e.style.height = e.offsetWidth * 0.5 + 'px'; }) 但是很奇怪
    naiba
    @naiba 是不是你用了什么前端框架,md 渲染的时候界面还被隐藏着?
    Vanessa
    @Vanessa 没有使用前端框架,注释掉 vditor.echartRender() 的话会显示 raw 代码
    naiba
    @naiba 我访问你的站点,已经可以显示了
    Vanessa
    @Vanessa 这个方法 提前在 style 上面设置 height, document.querySelectorAll(".language-echarts,.language-mindmap").forEach(e => { e.style.height = e.offsetWidth * 0.5 + 'px'; })
    naiba