教程：在线编辑模式下快速插入 echarts 代码

一. 进入在线编辑

首先需要新建自定义组件并进入到编辑模式，请参见调试组件。

配置字段信息，并完成取数。

二. 获取 charts 示例代码

前往 echarts 示例，挑选示例图。

点击进入代码详情页，选择 "代码编辑" 卡片和 "JS" 选项，全选左侧代码并复制，得到的 option配置。

需要注意的是，"插入 echarts 代码" 功能接收的是 echarts 的 option 配置变量，具体可以查看生成之后的代码，因此复制代码时，要看是否有 option = {...} 这个变量 （echarts 官网大多数示例代码都可以直接全选复制）. 如果遇到不标准的情况，需要具体查看一下代码，把里面的 option = {...}变量复制出来。

三. 生成代码

1. 添加依赖

点击 "添加三方库"。

选择 echarts。

Quick BI 中预置了 echarts V5.4.0 版本，如果需要其他版本的 echarts 版本，可以自行填入CDN路径或者手动上传 js 库，

2. 插入 echarts 代码

点击 "插入 echarts 代码"。

将第二步中获取到的 option代码贴入输入框中，点击确认。

点击 "运行" 按钮即可预览 echarts 图表。

下一步

此时您已经将 echarts 示例代码集成到了自定义组件中，但是现在图表的数据是静态数据，还没有将数据集的数据真正灌入到自定义组件中，下一步您需要参考自定义组件API，将 Quick BI 的数据格式转化为 echarts 的数据格式，综合案例请参见完整示例：开发一个echarts图表。