echarts有涟漪效果的世界地图

项目要求实现一个带涟漪效果的世界地图。
设计要求哪个区域有值，哪个区域就高亮，颜色不要求，全部设成同一种就行。
我参考了echats官网的样例，官网样例是这样的：

附官网地址：
https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-map
其实和我想要的效果已经很接近了，再改成世界地图，有数值的国家高亮就ok了。

任务：
1.改成世界地图
2.假设只有中国有数据，则中国地区出现涟漪圆点，并且国家颜色变黑

我改造的结果如下：

option = {
    backgroundColor: '#404a59',
    tooltip : {
        trigger: 'item'
    },
    geo: {
        map: 'world',
        roam: true,// 是否开启鼠标缩放和平移漫游
        zoom: 1.2,// 将地图放大1.2倍
        label: {
            show: false
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        emphasis: {
            label: {
                show: false
            },
            itemStyle: {
                areaColor: '#2a333d'
            }
        },
        // 有值的区域设置成相同的areaColor，用visualMap不太好操控，所以我用了regions。
        // 国家记得首字母大写，否则不起效
        regions: [{
         name: 'China',
         itemStyle: {
           areaColor: '#111'
        }
     }]
    },
    series : [
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',// 指定使用地理坐标系
            data: [{name:'China',value:[104.195397,35.86166,100]}],
            // 用来指定value数组中的第三个数字才是value值
            encode: {
                value: 2
            },
            //设置圆圈大小
            symbolSize: 4,
            //设置涟漪大小等
            rippleEffect: {
                brushType: 'stroke',
                scale:5
            },
            hoverAnimation: true,
            itemStyle: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
            },
            zlevel: 1
        }
    ]
};

最终效果图