可视化编辑器完全指南：从AI生成到精细微调的全流程

📅 2026-03-20 · ⏱️ 阅读约 8 分钟 · 编辑器教程可视化编辑得刻图表

得刻图表的 AI 能在 30 秒内生成一张专业图表，但你可能想要做一些个性化调整——换个颜色、移动图例位置、修改标题格式等。这就是可视化编辑器大显身手的时候。

本文是可视化编辑器的完整教程，帮你掌握从基础修改到高级自定义的所有技能。

一、编辑器界面总览

得刻图表的编辑器由三个核心区域组成：

区域	功能
实时预览区	左侧大面积，实时显示图表效果，支持鼠标交互
属性面板	右侧，可视化表单控件，修改即时生效
JSON 编辑器	右侧切换标签，直接编辑 ECharts 完整 JSON 配置

核心特性：属性面板和 JSON 编辑器是双向同步的——在属性面板修改会自动更新 JSON，在 JSON 中修改也会自动反映在属性面板中。

二、属性面板详解

📝 基础属性

最常用的调整选项：

标题设置

属性	说明	常用值
主标题	图表大标题	描述图表内容的简洁文字
副标题	补充说明文字	数据来源、时间范围等
标题位置	水平对齐方式	居左 / 居中 / 居右
字号	标题文字大小	16-24px（默认18px）
颜色	标题文字颜色	#333333（深灰，推荐）

💡 操作示例：想把AI生成的标题从"各季度销售额分析"改成"图3-2 2025年各季度销售额对比"——直接在标题输入框修改即可。

背景色

默认白色背景。如果你的PPT是深色底，可以将图表背景改为透明或深色，让图表融入PPT风格。

动画设置

属性	说明
开启/关闭	是否在加载时播放入场动画
持续时间	动画时长（毫秒），默认 1000ms
缓动函数	动画曲线（cubicOut 最常用）

💡 导出图片时动画无影响，动画只在在线查看和分享链接时生效。

🎨 配色主题一键切换

这是最高频的编辑操作。得刻图表内置 6 套精心设计的配色主题：

主题名	色调	适用场景
经典蓝	蓝、绿、黄、红	通用场景，最安全的选择
商务绿	蓝、青、绿为主	科技、互联网行业汇报
暖色调	红、橙、棕为主	营销、运营类汇报
紫色系	紫、蓝、粉为主	创意、设计类场景
科技蓝	深蓝、渐变为主	科技感演示、数据大屏
自然绿	绿、青、蓝为主	环保、农业、自然主题

操作方式：在配色面板中点击任一主题色块，图表会立即切换整体配色方案。

智能着色机制：

普通图表（柱状图、折线图、饼图等）：更新顶级 color 全局色板
旭日图/矩形树图：同时更新各层级的 itemStyle.color
桑基图：同时更新各节点的独立颜色
不覆盖你手动设置的单独颜色

📊 图例设置

属性	说明
显示/隐藏	是否展示图例
方向	水平排列 / 垂直排列
位置	居左 / 居中 / 居右

📈 系列管理

如果你的图表有多个数据系列（如分组柱状图的多个组），可以：

修改系列属性：颜色、线型、标签显示等
添加新系列：新增一组数据
删除系列：移除不需要的数据组

每个系列的修改都是独立的，互不影响。

三、JSON 编辑器

适合谁？

如果你对 ECharts 有一定了解，或者需要做属性面板中没有的精细调整，JSON 编辑器是你的利器。

工作方式

切换到 "JSON" 标签
你会看到完整的 ECharts options JSON
直接编辑任意属性
编辑器会在 400ms 防抖后自动同步到图表预览

常用 JSON 修改

修改坐标轴标签旋转角度

json

{
  "xAxis": {
    "axisLabel": {
      "rotate": 45
    }
  }
}

适用于 X 轴标签太长导致重叠的情况。

添加数据缩放滑块

json

{
  "dataZoom": [{
    "type": "slider",
    "start": 0,
    "end": 100
  }]
}

数据量大时，添加底部滑块让用户可以左右滚动查看。

json

{
  "tooltip": {
    "trigger": "axis",
    "formatter": "{b}: {c} 万元"
  }
}

自定义鼠标悬停时的提示信息格式。

⚠️ 注意事项

JSON 必须是合法的 JSON 格式，否则会显示错误提示
修改 JSON 后，属性面板会自动同步更新
如果改坏了，可以点"重置"恢复到 AI 生成的原始版本

四、编辑后的保存与更新

保存新图表

第一次保存时，图表会作为新图表存入你的云端图表库。

更新已保存图表

如果你是从"我的图表"打开已有图表进行编辑，保存时会直接更新原有图表（覆盖旧配置），无需创建新副本。

保存时保留原始数据

编辑器在保存时会同时保存：

✅ ECharts 配置（你编辑后的最终版本）
✅ 原始表格数据（用于后续重新生成或下载 Excel）

这意味着你可以随时用同一份数据重新生成不同类型的图表。

五、高级技巧

技巧1：先 AI 生成，再精细调整

最佳工作流：

先用 AI 生成一个"80分"的图表
用属性面板快速调整配色和标题
需要更细致的调整时切换到 JSON 编辑器

技巧2：配色主题 + 手动微调

如果整体配色满意但某一个系列的颜色想改：

先用配色主题设定整体风格
在 JSON 中单独修改该系列的 series[n].itemStyle.color
下次切换主题时，这个手动设置的颜色不会被覆盖

技巧3：利用图表类型检测

编辑器会自动检测当前图表的类型，并据此：

显示/隐藏相关的编辑选项（如极坐标只在支持的图表类型中显示）
智能切换配色策略（层级图表和普通图表的着色方式不同）

技巧4：批量更新

需要同时修改多个属性时（比如调整所有子图的间距），编辑器提供了批量更新能力，避免逐一修改导致的中间状态渲染闪烁。

六、常见编辑需求速查

我想...	操作方式
修改图表标题	属性面板 → 基础属性 → 标题
换一套配色	属性面板 → 配色主题 → 选择主题
隐藏图例	属性面板 → 图例设置 → 关闭显示
旋转 X 轴标签	JSON 编辑 → xAxis.axisLabel.rotate
修改背景色	属性面板 → 基础属性 → 背景色
添加数据标签	JSON 编辑 → series[n].label.show: true
恢复原始版本	点击"重置"按钮
导出高清图片	点击"下载图片"按钮

总结

得刻图表的编辑器设计理念是**"AI 做 80%，你做 20%"**：

AI 负责：数据理解、图表类型选择、整体布局、配色方案
你负责：标题措辞、品牌色微调、特殊格式要求

这种分工让你既能享受 AI 的效率，又保留了完全的控制权。

🚀 立即体验可视化编辑器

可视化编辑器完全指南：从AI生成到精细微调的全流程

一、编辑器界面总览

二、属性面板详解

📝 基础属性

标题设置

背景色

动画设置

🎨 配色主题一键切换

📊 图例设置

📈 系列管理

三、JSON 编辑器

适合谁？

工作方式

常用 JSON 修改

修改坐标轴标签旋转角度

添加数据缩放滑块

修改 tooltip 格式

⚠️ 注意事项

四、编辑后的保存与更新

保存新图表

更新已保存图表

保存时保留原始数据

五、高级技巧

技巧1：先 AI 生成，再精细调整

技巧2：配色主题 + 手动微调

技巧3：利用图表类型检测

技巧4：批量更新

六、常见编辑需求速查

总结

相关文章

可视化编辑器完全指南：从AI生成到精细微调的全流程 ​

一、编辑器界面总览 ​

二、属性面板详解 ​

📝 基础属性 ​

标题设置 ​

背景色 ​

动画设置 ​

🎨 配色主题一键切换 ​

📊 图例设置 ​

📈 系列管理 ​

三、JSON 编辑器 ​

适合谁？ ​

工作方式 ​

常用 JSON 修改 ​

修改坐标轴标签旋转角度 ​

添加数据缩放滑块 ​

修改 tooltip 格式 ​

⚠️ 注意事项 ​

四、编辑后的保存与更新 ​

保存新图表 ​

更新已保存图表 ​

保存时保留原始数据 ​

五、高级技巧 ​

技巧1：先 AI 生成，再精细调整 ​

技巧2：配色主题 + 手动微调 ​

技巧3：利用图表类型检测 ​

技巧4：批量更新 ​

六、常见编辑需求速查 ​

总结 ​

相关文章 ​

可视化编辑器完全指南：从AI生成到精细微调的全流程

一、编辑器界面总览

二、属性面板详解

📝 基础属性

标题设置

背景色

动画设置

🎨 配色主题一键切换

📊 图例设置

📈 系列管理

三、JSON 编辑器

适合谁？

工作方式

常用 JSON 修改

修改坐标轴标签旋转角度

添加数据缩放滑块

修改 tooltip 格式

⚠️ 注意事项

四、编辑后的保存与更新

保存新图表

更新已保存图表

保存时保留原始数据

五、高级技巧

技巧1：先 AI 生成，再精细调整

技巧2：配色主题 + 手动微调

技巧3：利用图表类型检测

技巧4：批量更新

六、常见编辑需求速查

总结

相关文章