如何利用自定义系列custom和geo实现类似bmap中的在地图上绘制任意自定义多边形的效果echarts custom配置项内容和展示

如题，在实现时拖动地图到某一个位置才能显示自定义多边形

      function renderItem(params, api) {
    var coords = [
        [116.7, 39.53],
        [103.73, 36.03],
        [112.91, 27.87],
        [120.65, 28.01],
        [119.57, 39.95]
    ];
    var points = [];
    for (var i = 0; i < coords.length; i++) {
        points.push(api.coord(coords[i]));
    }
    var color = api.visual('color');

    return {
        type: 'polygon',
        shape: {
            points: echarts.graphic.clipPointsByRect(points, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            })
        },
        style: api.style({
            fill: color,
            stroke: echarts.color.lift(color)
        })
    };
}

// 指定图表的配置项和数据
option = {
    title: {
        text: 'ECharts World Map'
    },
    geo: {
        map: 'world',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        type: 'custom',
        coordinateSystem: 'geo',
        renderItem: renderItem,
        itemStyle: {
            normal: {
                opacity: 0.5
            }
        },
        animation: false,
        silent: false,
        data: [0],
        z: 10
    }]
};