Cursor+DeepSeek,快速上手属于你的 VChart 代码
在前面的章节中,我们已经大致了解了一份基础 spec 的组成部分以及基础图表的具体生成。然而 VChart 因为其功能的强大和 API 的多样性,想要使用 VChart 快速实现一个复杂的图表可能较为困难,那么有没有一种简单轻松的方式,可以快速上手,无需在 API 文档中苦苦寻找呢?
答案是肯定的!得益于当前 AI 技术的飞速发展,通过 AI 工具不仅可以快速理解和掌握 VChart 的使用方法,还能显著提升编码效率,让开发者专注于创造力和业务逻辑的实现。
这篇教程我们会通过配置Cursor和DeepSeek(可以是其他任何 AI,当然使用Cursor 默认的模型也是ok的,重点是自定义引入文档),快速快速上手属于你的 VChart 代码!
1. 前期准备
一个使用 vchart 的项目
例如我有一个通过npx create-react-app my-app --template typescript 初始化的一个简单项目,启动后如下所示:
DeepSeek
注册 deepSeek,在deepSeek api 官网上新建一个属于你的 api key
Cursor
在官网下载并注册,用cursor打开你的 VChart 项目,我们对cursor进行配置
配置 cursor
以deepSeek-V3为例,其模型名称为deepseek-chat,API 地址为 https://api.deepseek.com/v1 ,详见api 使用官网
我们在 model 页面进行新建,设置对应的 api 地址和 model 名称.
值得注意的是,目前cursor官方并不支持直接接入deepSeek,我们可以通过覆盖openAPI的接口地址达到接入deepSeek的目的。在设置过程中,需要先关闭其他模型,只接入deepSeek模型
2. 实战使用
新增柱图
通过cmd+i命令唤起 ai 交互,直接让 ai 帮我们先生成一个简单的柱图代码,直接应用这个 spec,我们查看结果,一个简单的柱图就渲染完成了;可以发现deepSeek对vchart有着一定的认知,简单的图表可以直接添加,我们尝试下更复杂的场景。
复杂场景,注入 docs
我们希望添加一条 y 轴的均值辅助线,查看结果,然而结果并不正确,仔细查看可以发现,markLine虽然写的像是这么回事,但是spec并不符合规范,而且均值线经过了计算,我们通过注入 docs 来解决这个问题。


设置 docs
进入cursor设置页面,选择Features,新增 docs,可以从以下 docs 地址中任选其一:

你也可以直接在编辑页面通过@Docs进行新增
实验结果
通过将新加入的 docs,再次编辑,可以得到正确的结果!


通过本教程,您已经了如何通过cursor+deepseek来提升你的 VChart 编码效率,同时探索 VChart 的强大功能和灵活性,编绘出绚丽多彩的图表。祝您编码愉快!