充换电设施分布echarts effectScatter配置项内容和展示

      var colorList = [
    '#5AB1EF', '#2EC7C9', '#B6A2DE', "#FFB980", '#ED868C', "#FF0000", "#C23531"
];

var labels = ["0-5", ">10"];

var points = {
    "0-5": [
        [121.377751, 31.301185, 1],
        [121.5361, 31.278975, 1],
        [121.443523, 31.260158, 1],
        [121.336745, 31.269358, 1],
        [121.277751, 31.301185, 1]
    ],
    ">10": [
        [121.23022, 31.268655, 1],
        [121.373487, 31.30151, 1],
        [121.461285, 31.278847, 1],
        [121.358435, 31.143837, 1],
        [121.551868, 31.276324, 1]
    ]
}

var series = labels.map((i, j) => {
    var name = i;
    var data = points[name];
    var color = colorList[j];
    return {
        name: name,
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        data: data,
        showEffectOn: 'render',
        rippleEffect: {
            brushType: 'stroke'
        },
        itemStyle: {
            normal: {
                color: color
            }
        }
    }
})



var option = {

    bmap: {
        center: [121.431007, 31.238762],
        zoom: 12,
        roam: true,
        enableMapClick: false,
        mapStyle: {
            styleJson: [{
                "featureType": "all",
                "elementType": "all",
                "stylers": {
                    "lightness": 47,
                    "saturation": -100
                }
            }, {
                "featureType": "highway",
                "elementType": "geometry.fill",
                "stylers": {
                    "color": "#ffffff"
                }
            }, {
                "featureType": "poi",
                "elementType": "labels.icon",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "road",
                "elementType": "labels",
                "stylers": {
                    "visibility": "off"
                }
            }]
        }
    },
    title: {
        text: "充换电设施分布",
        left: 'center',
        top: 5,
        backgroundColor: "rgba(255,255,255,0.8)",
        textStyle: {
            color: "#2B98DC",
            fontWeight: "bold"
        }
    },
    legend: {
        orient: 'vertical',
        bottom: '50',
        left: "10",
        backgroundColor: "rgba(255,255,255,0.8)",
        data: labels.reverse(),
        formatter: function(name) {
            return '充电站数 ' + name;
        }
    },
    series: series

}

var options = [option];

myChart.setOption(option);
myChart.on('click', function (params) {
    //window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
    alert(params);
});


setTimeout(init, 0)


function init() {
    initMap();
}

function getMap() {
    return myChart.getModel().getComponent('bmap').getBMap();
}

function initMap() {
    var top_left_navigation = new BMap.NavigationControl({
        type: BMAP_NAVIGATION_CONTROL_SMALL
    });
    var map = getMap();

    //map.centerAndZoom("苏州", 13);
    map.addControl(top_left_navigation);
    map.disableDoubleClickZoom();
    return map;
}