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

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

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

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    yAxis: {
        type: 'value'
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
};

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

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

option = {
    title : {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    tooltip : {
        trigger: 'axis'
    legend: {
        data:['蒸发量','降水量']
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
    calculable : true,
    xAxis : [
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    yAxis : [
            type : 'value'
    series : [
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markPoint : {
                data : [
                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
myChart.on('click', {seriesIndex: 1}, function() {
    myChart.setOption({
        series: [{}, {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgb(55, 158, 168)'
            }, {
                offset: 1,
                color: 'rgb(55, 70, 131)'
});

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

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

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

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

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

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