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

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

  •  
  •   ImmerTry · 2022-08-02 09:40:12 +08:00 · 2469 次点击
    这是一个创建于 873 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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