3 分钟教你使用 MarsCode AI 生成在线图表

需求

对于前端开发者来讲，应该必不可少的会碰到开发在线图表的需求。国内开发者要开发在线图表应该都绕不过echarts

对于很多刚上手 echart 的小伙伴来说，查阅配置文档是一个很痛苦的事情。

上手 echarts

一般上手 echarts 的步骤如下

1. 查看快速上手教程

   

2. 查阅示例，选择想要的图表

   

3. 根据实际需求，查阅配置项，进行微调

   

4. 各种尝试代码，验证结果

   

MarsCode AI 介绍

MarsCode AI 是豆包旗下的智能编程助手，提供以智能代码补全为代表的核心能力，支持主流编程语言及 IDE，能在编码过程中提供单

行或整个函数的建议，同时支持在用户编码过程中提供代码解释、单测生成、问题修复、技术问答等辅助功能，提升编码效率与质量。

当前 MarsCode AI 提供了以下功能：

1. 代码补全 Code Completion
2. 代码解释 Code Explain
3. 单测生成 Unit Test Generation
4. 注释生成 Generate documentation
5. 智能修复 AI Fix
6. 智能问答 AI Q&A
7. 智能问答 AI Q&A 一键 Apply AI 生成的代码变更至项目对应的文件位置并形成 Diff

当前要体验的便是 一键 Apply AI 生成的代码变更至项目对应的文件位置并形成 Diff 功能。

当前该功能该功能目前仅支持 VSCode（需升级至 1.1.42 版本）

vs code 安装 MarsCode AI

首次安装

1. 打开 vscode 左侧的插件列表
2. 搜索关键字 MarsCode AI
3. 点击安装

4. 首次安装成功后，使用的话需要登录

5. 然后，在 vscode 的左侧便可以看到 ai 助手

   

MarsCode AI 生成代码并且应用

1. 使用 vscode 打开你的工程目录，我这里是空的文件夹

2. 然后进行对话，输入你的需求

   请根据2011-2024年中国程序员的数量，使用echarts把数据渲染出来。需求如下：
   1. 所有的代码都写入到一个html文件中
   2. 一个文件中 ，请使用不同的图表如柱状图、饼图和折线图显示出来数据
   

3. 此时 **MarsCode AI ** 便开始生成代码

   

4. 这个时候，可以点击 右上角的 Apply 按钮，便可以把当前代码应用到对应的文件上，如果该文件还没有创建，那么便会自动的创建

   

5. 这里，你可以根据需求，点击 全部采纳 或者部分采纳

   ​ 我们点击 全部采纳

   

6. 实际效果

   

继续调整

可以看到，MarsCode AI 基本实现了我们的需求，这个时候发现部分效果不合适

1. 文字遮挡了
2. 希望图片水平排列

我们继续对话让它进行调整

再次点击 Apply

此时，你可以根据需求 点击 全部采纳 或者 采纳

得到效果

但是我们发现，第一个柱状图还是出现了文字遮挡，这里继续对话调整即可

总结

经过简单的小案例，我们发现豆包的交互还是比较智能的，包括 ui 的设计，对话的便利性

但是也存在缺点，如生成代码时反应慢、没有提供批量编辑或者创建文件的功能。代码质量也有待提升

“本文正在参加豆包 MarsCode AI 编程体验家活动”