应广大用户要求，Yonghong Desktop在新版本中推出了一个全新的组件-自定义绘图组件，通过该组件，用户可以通过调用第三方图标库来完成自己想要的效果。本文以此为基础，介绍自定义绘图组件的使用解析。
01
应用场景和基本要求
自定义绘图组件，是一个支持完全自定义图表样式的组件，帮助用户实现定制化的可视化效果。
基本要求如下：
图表
数据
自定义绘图
0个或多个数据列
02
使用方式
了解过基本的概念和要求，下面就该进行实战操作了。自定义绘图组件支持用户自定义编写JS代码来实现图表绘制，系统内置了Echarts、AntV_G2Plot、AntV_G6，您可以直接调用代码库。
A
新建自定义绘图组件
从右侧【组件】拖拽自定义绘图组件到画布中，如下图：
B
给组件绑定数据
从数据列表中拖拽产品种类、产品名称2个数据列到数据绑定区：
C
自定义JS代码
绑定完数据后，我们需要给组件自定义JS代码，以定义图表绘制规则，点击数据绑定区的“自定义JS代码”，在弹窗中进行配置：
自定义JS代码配置：
【chart库】默认可以选择Echarts、AntV_G2Plot、AntV_G6，选择以后，在绘制时会直接调用对应代码库绘制图表。
【代码格式】选择完chart库后，需要选择JS代码格式，Echarts仅支持option格式，AntV_G2Plot、AntV_G6为完整代码，为保证正常绘图，代码格式与所选格式需保持一致。
【JS】在编辑区内输入JS代码，请参考下面的格式。选择Echarts库时，代码格式为option部分，如下图：
注意
请不要定义chartDom，import部分，产品已经定义了DOMid为$container，可能会都导致无法绘制到报告画布中，错误代码格式如下：
正确写法：
选择AntV_G2Plot需要输入完整代码，可以参考官网文档说明，格式如下：
选择AntV_G6需要输入完整代码，可以参考官网文档说明，格式如下：
【Data】绑定的数据列会展示在Data区域，并按照绑定的顺序依次定义为column1、column2......，可以直接在代码中引用，例如绑定了市场级别、产品种类2列数据，如下图：
【执行】输入完JS代码之后，点击代码编辑区右上角的“执行”按钮，会在右侧预览区域绘制图表，若代码存在错误会给出提示。
D
使用绑定的数据绘图
我们可以在代码中直接引用绑定的Data。
Echart库引用方法：修改data部分为data:options.column1，例如我们绑定了产品种类、利润两列，要用来绘制基础柱状图，代码如下：
AntV_G2Plot、AntV_G6库数据引用方法：修改data部分为data:options.data，对应轴绑定为'column1'、'column2'......，如下图：
注意
为了保证图表正常在报告画布中，保存时会自动替换DOMid为变量$container，代码编辑时这'container'为$container两种写法都支持，保存后如下：
完成了上述操作之后，咱们就有了一份完成的自定义的绘图，如下图：
