在vscode中用codegeex插件可快速生成可运行的echarts图表代码：安装插件→新建chart.html→光标置于内按ctrl+enter→输入中文需求描述→生成含html结构、cdn引入及配置的完整代码→用live server运行验证。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想在 VSCode 里用 CodeGeeX 插件，几秒钟内生成可运行的 ECharts 图表代码，而不是手动查文档、拼配置项、反复调试 options 对象。
安装并启用 CodeGeeX 插件
打开 VSCode → 点击左侧扩展图标（或 Ctrl+Shift+X）→ 搜索框输入 【CodeGeeX】 → 找到官方插件（图标为蓝白齿轮+闪电）→ 点击“安装”。
安装完成后重启 VSCode，或直接点击“重新加载”按钮——不重启会导致插件未激活，后续命令无法触发。
创建空白 HTML 文件并激活 CodeGeeX
新建一个文件，命名为 chart.html，保存到本地任意文件夹。
将光标定位在 标签内部空白处，按 Ctrl+Enter（Windows/Linux）或 Cmd+Enter（Mac）唤出 CodeGeeX 快捷指令面板。
如果快捷键无响应，请确认当前文件已保存且后缀为 .html；未保存的临时文件不会被识别为有效上下文。
用自然语言描述图表需求，生成 ECharts 代码
在弹出的输入框中，用中文清晰描述你要的图表类型和数据特征。例如：
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
方法一：直输需求
输入“画一个柱状图，横轴是月份（1月到12月），纵轴是销售额，数据分别是 2300、1800、3100、2750、3420、2980、3650、3210、2890、3020、3370、3560，标题叫‘2024年各月销售额’”→ 回车。
方法二：带格式提示词
输入“ECharts 柱状图代码，含完整 HTML 结构，使用 CDN 引入 echarts@5.4.3，坐标轴文字大小设为 12px，图例位置在顶部右侧”→ 回车。
CodeGeeX 会在光标处插入一段可直接运行的 HTML + JavaScript 代码，包含 <div id="chart"></div> 容器、echarts.min.js CDN 引入、init 初始化和 setOption 配置。
运行并验证生成的图表
第一步：确保当前 HTML 文件已保存（Ctrl+S）。
第二步：右键编辑器空白处 → 选择“Open with Live Server”，浏览器自动打开页面。
第三步：观察页面是否渲染出预期图表——若显示“初始化失败”或空白，大概率是 DOM 元素未挂载完成就调用了 echarts.init。
遇到空白页时，检查生成代码中是否有 document.getElementById('chart') 对应的 div 存在；若 CodeGeeX 生成了 id="main" 却没改容器 id，需手动同步——【容器 id 必须与 init 方法中传入的 DOM 节点 id 完全一致】。
这一步操作起来很简单，直接把文件拖进去就行。
