Back to Plugins
ECharts Draw

ECharts Draw

Edit ECharts JSON, preview charts & export fully editable SVG vector graphics,bilingual UI supported

Plugin Preview

ECharts Draw preview

About this plugin

# ECharts DrawGenerate standard ECharts data charts and export lossless editable SVG for your Figma design files.## Core Features• Built-in ECharts JSON editor with auto-save config• Real-time live chart preview for bar/line/pie/radar/gauge charts• One-click copy pure SVG, paste into Figma to get separate vector layers• Chinese & English dual-language UI for global design teams• Customizable chart size percentage, one-click reset default ratio• AI prompt template to quickly generate ECharts configuration• 6 common chart templates for dashboard & data screen design## Simple Workflow1. Write your ECharts option JSON in the editor2. Render and preview charts instantly3. Preview clean SVG vector image in popup window4. Copy SVG and paste directly to Figma canvasSolve the pain point of inconsistent effects between design drafts and front-end ECharts development, no more blurry screenshots or manual drawing.---# ECharts Draw — Figma ECharts图表插件生成标准ECharts数据可视化图表,导出无损可编辑SVG矢量图,无缝用于Figma设计稿。## 核心功能• 内置ECharts代码编辑器,配置自动本地保存• 实时渲染预览柱状/折线/饼图/雷达图/仪表盘等全部图表• 一键复制纯净SVG,粘贴Figma后所有元素为独立可编辑图层• 中英文双语界面,适配国内外协作设计师• 百分比自由调整图表尺寸,一键恢复默认比例• 内置AI提示词模板,快速生成完整ECharts配置• 6类常用图表预设,覆盖后台管理、数据大屏场景## 极简使用流程1. 在编辑器编写ECharts option配置JSON2. 一键渲染实时预览图表效果3. 弹窗查看无干扰纯净SVG矢量图4. 复制SVG直接粘贴到Figma画布解决设计稿与前端ECharts还原效果不一致痛点,告别模糊截图、手动绘制图表。

Plugin Details

Version1
CreatedJune 10, 2026
Last UpdatedJune 10, 2026
Categorydesign-templates-other
CreatorWei Lu
Stats4 installs, 0 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:plugin/ui.html
  • main:plugin/main.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none