wdkl_screen/js/mymap.js

var myChart = echarts.init($('.map .geo')[0])
var option;

var data1 = [
    // { name: '点1', value: [114.31, 30.52], size: 20, text: '武汉市江汉区三个街道<br/>张三，男，56岁<br/>血糖9' },
    // { name: '点2', value: [114.25, 30.44], size: 20, text: '武汉市江汉区二个街道<br/>李四，男，46岁<br/>血压180/120' },
    // { name: '点3', value: [114.22, 30.62], size: 20, text: '武汉市江汉区一个街道<br/>王丫，女，36岁<br/>体温37.1' },
];
var data2 = [
    { name: '点4', value: [114.32, 30.46], size: 10, text: '武汉市江汉区三个街道<br/>张三，男，56岁<br/>血糖9' },
    { name: '点5', value: [114.34, 30.54], size: 10, text: '武汉市江汉区二个街道<br/>李四，男，46岁<br/>血压180/120' },
    { name: '点6', value: [114.37, 30.58], size: 10, text: '武汉市江汉区一个街道<br/>王丫，女，36岁<br/>体温37.1' }
];

option = {
    backgroundColor: 'transparent',
    title: {
        text: '用户地图一览',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            //console.log(params);
            return params.data.text
        }
    },
    bmap: {
        center: [114.25, 30.34],    //地图中心点
        zoom: 11,       //默认缩放倍数
        roam: true,    //禁止放大缩小
        mapStyle: {
            styleJson: [
                {
                    featureType: 'water',
                    elementType: 'all',
                    stylers: {
                        color: '#044161'
                    }
                },
                {
                    featureType: 'land',
                    elementType: 'all',
                    stylers: {
                        color: '#004981'
                    }
                },
                {
                    featureType: 'boundary',
                    elementType: 'geometry',
                    stylers: {
                        color: '#064f85'
                    }
                },
                {
                    featureType: 'railway',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                },
                {
                    featureType: 'highway',
                    elementType: 'geometry',
                    stylers: {
                        color: '#004981'
                    }
                },
                {
                    featureType: 'highway',
                    elementType: 'geometry.fill',
                    stylers: {
                        color: '#005b96',
                        lightness: 1
                    }
                },
                {
                    featureType: 'highway',
                    elementType: 'labels',
                    stylers: {
                        visibility: 'off'
                    }
                },
                {
                    featureType: 'arterial',
                    elementType: 'geometry',
                    stylers: {
                        color: '#004981'
                    }
                },
                {
                    featureType: 'arterial',
                    elementType: 'geometry.fill',
                    stylers: {
                        color: '#00508b'
                    }
                },
                {
                    featureType: 'poi',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                },
                {
                    featureType: 'green',
                    elementType: 'all',
                    stylers: {
                        color: '#056197',
                        visibility: 'off'
                    }
                },
                {
                    featureType: 'subway',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                },
                {
                    featureType: 'manmade',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                },
                {
                    featureType: 'local',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                },
                {
                    featureType: 'arterial',
                    elementType: 'labels',
                    stylers: {
                        visibility: 'off'
                    }
                },
                {
                    featureType: 'boundary',
                    elementType: 'geometry.fill',
                    stylers: {
                        color: '#029fd4'
                    }
                },
                {
                    featureType: 'building',
                    elementType: 'all',
                    stylers: {
                        color: '#1a5787'
                    }
                },
                {
                    featureType: 'label',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                }
            ]
        }
    },
    series: [
        {
            name: '体征告警',
            type: 'effectScatter',  //气泡动态效果
            coordinateSystem: 'bmap', // 地图选择项bmap为百度地图
            data: data1,
            symbolSize: function (val1, val2) {
                // console.log(val1,val2)
                return val2.data.size;
            },  //标记大小
            showEffectOn: 'render', // 配置何时显示特效。 render 绘制完成后显示特效。emphasis 高亮（hover）的时候显示特效。
            rippleEffect: {
                brushType: 'stroke', // 波纹的绘制方式 stroke 和 fill
                number: 3,  // 波纹的数量
                scale: 5, // 波纹放大的倍数
                color: '#8FD1C3'
            },
            hoverAnimation: true,
            label: {
                formatter: '{b}',
                position: 'right',
                show: true
            },
            itemStyle: {
                color: '#f37b1d',
                shadowBlur: 10,
                shadowColor: '#333'
            },
            zlevel: 1
        },
        {
            name: '正常体征',
            type: 'scatter',  //气泡静态效果
            coordinateSystem: 'bmap',
            data: data2,
            symbolSize: function (val1, val2) {
                return val2.data.size;
            },  //标记的大小
            label: {
                formatter: '{b}',
                position: 'right'
            },
            itemStyle: {
                color: '#ddb926'
            },
            emphasis: { // 高亮的图形和标签样式
                label: {
                    show: true
                }
            }
        }
    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);

    var index = 0; //播放所在下标
    var mTime = setInterval(function () {
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index
        });
        index++;
        if (index > data1.length) {
            index = 0;
        }
    }, 2000);   //2秒循环
}

window.addEventListener('resize', myChart.resize);