JavaScript自定义图表，是一个支持完全自定义图表样式的组件，能够帮助您实现定制化的可视化效果。本文将举例介绍自定义图表的简单画法。

注意：此功能仅私有部署版本和SaaS旗舰版本支持。

案例1：在代码编辑区编写JavaScript代码，生成自定义图表

（1）在画布上添加一个JavaScript自定义图表控件；

（2）在代码编辑区编写JavaScript代码，生成自定义图表。这里以echarts为例，可直接在下方代码编辑框中输入echarts配置项完成图表绘制，输入如下代码生成基础的折线图：

点击[应用]，代码运行无误，生成自定义图表：

（3）代码中可以直接引用echarts变量，来调用echarts Api，也可对图表实例myChart变量来进行图表事件监听等操作。以echarts的柱状图为例，输入如下代码：

点击[应用]，代码运行无误，生成自定义图表：

（4）由于代码定义了图表标题，因此可将系统默认标题修改为不显示，拖拽调整图表的大小，即可得到一个好看的echarts图表：

案例2：拖入字段，引用字段生成的dataSet数据集

本产品的dataSet的默认数据格式为二维数组，以上述字段为例，dataSet值应为：[["东北", 1000], ["西北", 2000],...]

可在代码编辑区输入：console.log(dataSet)，然后在浏览器控制台查看该数据集的完整数据。

用户可自由处理dataSet数据，并在配置项中引用：

如无需对原始数据进行处理，可以直接在代码中用单独的数据集dataSet来声明数据，自由指定数据到视觉的映射：

dataset: { source: dataSet },

点击[应用]，代码运行无误，生成自定义图表：

案例3：边框样式的调整

您可以通过拖拽改变图表大小，也可在样式面板对标题及整个图表的背景、边框、圆角等作调整。

若代码运行有误，通过按 Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux），打开 Console 面板，查看错误详情。代码编辑器默认底部吸附，点击红框按钮，可切换至自由移动的编辑框。若echarts实例中使用了jQuery请求内部数据或加载内部资源导致代码报错时，需要您自行处理数据请求以及跨域问题。

将经纬度数据、想要展示的度量值，和地理坐标对应的城市名称维度拖入数据面板，然后利用外部请求获取地理位置信息，加上刚刚引入的数据，通过echarts gl绘制如下3D地图：

具体代码如下：