V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
LinkedIn
ImmerTry
V2EX  ›  前端开发

web 端富文本实现插入 echarts 图表

  •  
  •   ImmerTry · 56 天前 · 1019 次点击
    这是一个创建于 56 天前的主题,其中的信息可能已经有所发展或是发生改变。

    公司现在有个需求,实现富文本插入 echarts 图表,可以修改图表上的数据及内容。 大家有过类似需求的解决方案吗

    11 条回复    2022-08-02 15:30:47 +08:00
    ubbcou
        1
    ubbcou  
       56 天前
    如果可以去除图表的交互功能,那么我觉得可以这么做,echarts 依据数据的响应台后生成图表 & 导出图片,将图片插入到富文本。

    这样可以不依赖在渲染端对 echarts 的支持,就可以显示图表内容。
    LinYa
        2
    LinYa  
       56 天前
    我想先了解一下,目前用的富文本编辑器是什么?
    hellsnow
        3
    hellsnow  
       56 天前
    或者能不能搞一些占位符,最后去插入 echarts
    f056917
        4
    f056917  
       56 天前
    太复杂,建议用 form 表单
    ImmerTry
        5
    ImmerTry  
    OP
       56 天前
    @LinYa 目前再用的是 wangEditor 这个富文本编辑器
    zdhxiong
        6
    zdhxiong  
       56 天前
    把 echarts 封装成 Web Components ,富文本里插入一个自定义标签就行
    jucelin
        7
    jucelin  
       56 天前
    富文本编辑器 只添加图表的占位符,可以设置显示大小,过滤参数之类的
    实际显示的时候,再替换,并渲染数据。
    lneoi
        8
    lneoi  
       56 天前
    这很像目前的 Notion Like 逻辑
    lneoi
        9
    lneoi  
       56 天前
    wangEditor 可以自定义数据结构 实在不行套个壳应该可以
    zhangleshiye
        10
    zhangleshiye  
       56 天前
    @ImmerTry 粗略的看了下支持上传文件, 是我的话, (用户点击编辑器上的插入图表按钮)-> 打开一个新的页面或者模态窗( 类似数据大屏的那种编辑页,这种就一块显示图表,其他表单域显示配置项,颜色,维度,横轴数轴, 图表类型选择)->确认完后回传服务器并返回文件哈希地址->回传编辑器
    zhangleshiye
        11
    zhangleshiye  
       56 天前
    @ImmerTry vue 的话可以参考开源项目 https://gitee.com/MTrun/go-view 不考虑太复杂的交互应该还是能实现的
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2547 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 56ms · UTC 00:35 · PVG 08:35 · LAX 17:35 · JFK 20:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.