1. 概述

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

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

2. 基本用法

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

（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数据，并在配置项中引用：

// 向右侧数据面板中拖入字段，可在代码中引用dataSet字段获取二维数组数据
var data1 = dataSet.map(function(d) {return d[0];});
var data2 = dataSet.map(function(d) {return d[1];});
option = {
    xAxis: {
        type: 'category',
        data: data1
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'line',
        data: data2
    }]
};

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

dataset: { source: dataSet },

// 向右侧数据面板中拖入字段，可在代码中引用dataSet字段获取二维数组数据
option = {
    dataset: {
        source: dataSet
    },
    xAxis: {
        type: 'category',
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'line'
    }]
};

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

案例3：边框样式的调整

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

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

3. echarts图表控件的实际应用：3D地图

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

具体代码如下：

var barDataSet = dataSet.map(function (dataItem) {
    return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
});
var maxValue = Math.max(...barDataSet.map(d => d[2]));
fetch('https://ydcdn.nosdn.127.net/echarts/assets/map/json/china.json').then(e => e.json()).then(chinaJson => {
    echarts.registerMap('china', chinaJson);
    myChart.setOption({
        backgroundColor: '#cdcfd5',
        geo3D: {
            map: 'china',
            shading: 'lambert',
            label: {
                show: true,
                textStyle: {
                    color: '#000', //地图初始化区域字体颜色
                    fontSize: 12,
                    opacity: 1,
                    backgroundColor: 'rgba(0,0,0,0)'
                },
            },
            light: {
                main: {
                    intensity: 5,
                    shadow: true,
                    shadowQuality: 'high',
                    alpha: 30
                },
                ambient: {
                    intensity: 0.5
                },
            },
            viewControl: {
                distance: 80,
                center: [0, -10, 0],
                panMouseButton: 'left',
                rotateMouseButton: 'right'
            },
            groundPlane: {
                show: true,
                color: '#999'
            },
            postEffect: {
                enable: true,
                bloom: {
                    enable: false
                },
                SSAO: {
                    radius: 1,
                    intensity: 1,
                    enable: true
                },
                depthOfField: {
                    enable: false,
                    focalRange: 10,
                    blurRadius: 10,
                    fstop: 1
                }
            },
            temporalSuperSampling: {
                enable: true
            },
            itemStyle: {
                color: '#fff',
                borderWidth: 1,
                borderColor: '#ccc',
            },

            regionHeight: 2
        },
        visualMap: {
            max: maxValue,
            calculable: true,
            realtime: false,
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            outOfRange: {
                colorAlpha: 0
            }
        },
        series: [{
            type: 'bar3D',
            coordinateSystem: 'geo3D',
            shading: 'lambert',
            data: barDataSet,
            barSize: 0.5,
            minHeight: 0.2,
            silent: false,
            itemStyle: {
                color: 'orange'
            },
            emphasis: {
                label: {
                    show: true,
                    formatter: p => dataSet[p.dataIndex][3] + ': ' + p.data[2]
                }
            }
        }]
    });

})