南京江北新区街道下钻数据(更新中)echarts effectScatter配置项内容和展示

使用百度地图插件,在地图上显示街道中的数据。 百度地图的数据在脚本中,请自行下载。

配置项如下
      // !!!!!!!!百度地图的插件在脚本中!!!!!!!!

var geoCoordMap = {
    长芦街道: [118.791113, 32.247213],
    葛塘街道: [118.755419, 32.248077],
    大厂街道: [118.751156, 32.222373],
    盘城街道: [118.722429, 32.215786],
    沿江街道: [118.725344, 32.172766],
    泰山街道: [118.724802, 32.142327],
    顶山街道: [118.691899, 32.116769],
    江浦街道: [118.644439, 32.066636],
};
var data = [
    {
        name: '长芦街道',
        value: 3,
    },
    {
        name: '葛塘街道',
        value: 6,
    },
    {
        name: '大厂街道',
        value: 20,
    },
    {
        name: '盘城街道',
        value: 3,
    },
    {
        name: '沿江街道',
        value: 12,
    },
    {
        name: '泰山街道',
        value: 19,
    },
    {
        name: '顶山街道',
        value: 7,
    },
    {
        name: '江浦街道',
        value: 2,
    },
];
var max = 1000,
    min = 0; // todo
var maxSize4Pin = 100,
    minSize4Pin = 0;

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
            });
        }
    }
    return res;
};

option = {
    animation: false,
    bmap: {
        center: [118.761656, 32.142491],
        zoom: 12,
        roam: true,
        zlevel: 1,
    },
    tooltip: {
        trigger: 'axis',
    },
    series: [
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: convertData(data),
            symbolSize: 30,
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke',
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true,
                    areaColor: '#065279',
                    fontFamily: 'TRENDS',
                    fontSize: 16,
                    padding: [0, 0, 0, 4],
                },
            },
            itemStyle: {
                normal: {
                    color: '#d55150',
                    shadowBlur: 10,
                    shadowColor: '#d55150',
                },
            },
            zlevel: 2,
        },
    ],
};
myChart.setOption(option);

var counts = option.series[0].data.length; //获取所有闪动圆环数量
var dataIndex = 0;
//让圆环的提示框自动触发轮播显示
function autoHoverTip() {
    for (var i = 0; i < counts; i++) {
        (function (i) {
            ts = setTimeout(function () {
                myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 1,
                    dataIndex: i,
                });
            }, 5000 * i);
        })(i);
    }
}

setTimeout(function () {
    autoHoverTip();
    tv = setInterval(autoHoverTip, counts * 1000);
}, 500);

    
截图如下