var myChart = echarts.init(document.querySelector('.map .geo')) var option; var data1 = [ // { name: '点1', value: [114.31, 30.52], size: 20, text: '武汉市江汉区三个街道
张三,男,56岁
血糖9' }, // { name: '点2', value: [114.25, 30.44], size: 20, text: '武汉市江汉区二个街道
李四,男,46岁
血压180/120' }, // { name: '点3', value: [114.22, 30.62], size: 20, text: '武汉市江汉区一个街道
王丫,女,36岁
体温37.1' }, ]; var data2 = [ { name: '点4', value: [114.32, 30.46], size: 10, text: '武汉市江汉区三个街道
张三,男,56岁
血糖9' }, { name: '点5', value: [114.34, 30.54], size: 10, text: '武汉市江汉区二个街道
李四,男,46岁
血压180/120' }, { name: '点6', value: [114.37, 30.58], size: 10, text: '武汉市江汉区一个街道
王丫,女,36岁
体温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);