佛山热门出行站点echarts scatter配置项内容和展示

用散点图结合百度地图展现佛山热门公交站点，数据纯属虚构

      var uploadedDataURL = "/asset/get/s/data-1479372708751-SJpo1lsbl.txt";

function convertData(sourceData) {
    return [].concat.apply([], $.map(sourceData, function(stop, index) {
        return {
            name: stop.stopName,
            value: [stop.jingdu, stop.weidu, Math.random() * 100, Math.random() * 100]
        };
    }));
}

var option = {
    bmap: {
        roam: true,
        mapStyle: {
            'styleJson': [{
                'featureType': 'water',
                'elementType': 'all',
                'stylers': {
                    'color': '#031628'
                }
            }, {
                'featureType': 'land',
                'elementType': 'geometry',
                'stylers': {
                    'color': '#000102'
                }
            }, {
                'featureType': 'highway',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'arterial',
                'elementType': 'geometry.fill',
                'stylers': {
                    'color': '#000000'
                }
            }, {
                'featureType': 'arterial',
                'elementType': 'geometry.stroke',
                'stylers': {
                    'color': '#0b3d51'
                }
            }, {
                'featureType': 'local',
                'elementType': 'geometry',
                'stylers': {
                    'color': '#000000'
                }
            }, {
                'featureType': 'railway',
                'elementType': 'geometry.fill',
                'stylers': {
                    'color': '#000000'
                }
            }, {
                'featureType': 'railway',
                'elementType': 'geometry.stroke',
                'stylers': {
                    'color': '#08304b'
                }
            }, {
                'featureType': 'subway',
                'elementType': 'geometry',
                'stylers': {
                    'lightness': -70
                }
            }, {
                'featureType': 'building',
                'elementType': 'geometry.fill',
                'stylers': {
                    'color': '#000000'
                }
            }, {
                'featureType': 'all',
                'elementType': 'labels.text.fill',
                'stylers': {
                    'color': '#857f7f'
                }
            }, {
                'featureType': 'all',
                'elementType': 'labels.text.stroke',
                'stylers': {
                    'color': '#000000'
                }
            }, {
                'featureType': 'building',
                'elementType': 'geometry',
                'stylers': {
                    'color': '#022338'
                }
            }, {
                'featureType': 'green',
                'elementType': 'geometry',
                'stylers': {
                    'color': '#062032'
                }
            }, {
                'featureType': 'boundary',
                'elementType': 'all',
                'stylers': {
                    'color': '#465b6c'
                }
            }, {
                'featureType': 'manmade',
                'elementType': 'all',
                'stylers': {
                    'color': '#022338'
                }
            }, {
                'featureType': 'label',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }]
        }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        selectedMode: 'single',
        orient: 'vertical',
        y: 'bottom',
        x: 'right',
        data: ['热门出行站点', '热门换乘站点'],
        textStyle: {
            color: '#fff'
        }
    },
    /*visualMap: [{
        left: 'right',
        top: '10%',
        dimension: 2,
        min: 0,
        max: 100,
        itemWidth: 30,
        itemHeight: 120,
        calculable: true,
        precision: 0.1,
        inRange: {
            symbolSize: [3, 10]
        },
        outOfRange: {
            symbolSize: [3, 10],
            color: ['rgba(255,255,255,.2)']
        }
    }],*/
    series: [{
        name: '热门出行站点',
        type: 'scatter',
        coordinateSystem: 'bmap',
        symbolSize: function(val) {
            return val[2] / 10;
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#a6c84c'
            }
        }
    }, {
        name: '热门出行站点',
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        symbolSize: function(val) {
            return val[2] / 5;
        },
        showEffectOn: 'render',
        rippleEffect: {
            brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#9FC33D',
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        zlevel: 1
    }, {
        name: '热门换乘站点',
        type: 'scatter',
        coordinateSystem: 'bmap',
        symbolSize: function(val) {
            return val[3] / 10;
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#ffa022'
            }
        }
    }, {
        name: '热门换乘站点',
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        symbolSize: function(val) {
            return val[3] / 5;
        },
        showEffectOn: 'render',
        rippleEffect: {
            brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#FF960D',
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        zlevel: 1
    }]
};

$.getJSON(uploadedDataURL, function(rawData) {
    var data = convertData(rawData);
    option.series[0].data = data;
    option.series[1].data = data.sort(function(a, b) {
        return b.value[2] - a.value[2];
    }).slice(0, 10);
    option.series[2].data = data;
    option.series[3].data = data.sort(function(a, b) {
        return b.value[3] - a.value[3];
    }).slice(0, 10);
    myChart.setOption(option);
    // console.log(option);
    //获取echart中使用的bmap实例
    var map = myChart.getModel().getComponent('bmap').getBMap();
    map.disableDoubleClickZoom();
    map.centerAndZoom("佛山", 13);

});