html特供实现气泡图

添加的绝对定位-谨慎使用参考  生成小球函数 文章

<template><div id=wrap><!-- <div class=bg></div> --></div>
</template><script>
export default{
data(){return{//获得wrapDivwrapDiv: null,//定义数组存储所有的小球balls: [],title:[	电源	,	停电	,	多户	,	服务	,	供电	,	电费	,	业务	,	解答	,	报修	,	咨询	  ]// title:[	供电	, 	服务	,	咨询	,	电源	]}
},
created(){this.$nextTick(function () {this.wrapDiv = document.getElementById(wrap);this.init()})
},
methods:{init(){();// for (var i = 0; i < this.balls.length; i) {//   //将所有的小球传到函数中,来实现对小球的移动//   (this.balls[i]);// }},// randomum(m, n) {//   return Math.floor(Math.random() * (n - m  1)  m);// },/*** 生成一个随机颜，并返回rgb字符串值*/// randomColor() {//   var r = this.randomum(100, 255);//   var g = this.randomum(100, 255);//   var b = this.randomum(100, 255);//   return rgb(  r  ,  g  ,  b  );// },// randomWidth() {//   var r = this.randomum(74, 128);//   return r;// },//生成小球函数createBalls() {for (var i = 0; i < length; i) {var ball = (p);//随机小球起始的X坐标和小球的Y坐标// ball.x = this.randomum(100, 600);// ball.y = this.randomum(100, 00);//随机小球的移动速度// ball.speed = this.randomum(2, 5);// ball.speed = 0.4;// // //随机小球移动的方向// if (Math.random() - 0.5 > 0) {//   ball.xflag = true;// } else {//   ball.xflag = false;// }// if (Math.random() - 0.5 > 0) {//   ball.yflag = true;// } else {//   ball.yflag = false;// }//随机小球的背景颜// let rgbys =   this.randomColor();// ball.style.backgroundColor = this.randomColor();// cole.log(fuwuwwwww)// cole.log([i])if([i]==	服务	) {let   widthx =128;let   fontSize =9;let   fontColor = 	#01F4FF	;cole.log(fuwuwwwww);ball.style.boxShadow =  	inset 0px 0px 16px 2px 	 	rgba(1,244,255,1)	;ball.style.width= widthxpx;ball.style.height= widthxpx;ball.style.fontSize =  fontSizepx;ball.style.fontFamily =  PingFang SC-Regular, PingFang SC;ball.style.fontWeight =  400;ball. = fontColor;ball. =  150  px;ball.style.left =  70  px;ball.innerHTML = [i];}if([i]==	供电	) {let   widthx =86;let   fontSize =27;let   fontColor = 	#CB85FF	;cole.log(fuwuwwwww);ball.style.boxShadow =  	inset 0px 0px 16px 2px 	 	rgba(161,99,255,1)	;ball.style.width= widthxpx;ball.style.height= widthxpx;ball.style.fontSize =  fontSizepx;ball.style.fontFamily =  PingFang SC-Regular, PingFang SC;ball.style.fontWeight =  400;ball. = fontColor;ball. =  180  px;ball.style.left =  20  px;ball.innerHTML = [i];}if([i]==	业务	) {let   widthx =86;let   fontSize =27;let   fontColor = 	#CB85FF	;cole.log(fuwuwwwww);ball.style.boxShadow =  	inset 0px 0px 16px 2px 	 	rgba(161,99,255,1)	;ball.style.width= widthxpx;ball.style.height= widthxpx;ball.style.fontSize =  fontSizepx;ball.style.fontFamily =  PingFang SC-Regular, PingFang SC;ball.style.fontWeight =  400;ball. = fontColor;ball. =  180  px;ball.style.left =  610  px;ball.innerHTML = [i];}if([i]==	咨询	) {let   widthx =74;let   fontSize =2;let   fontColor = 	#4696FF	;cole.log(fuwuwwwww);ball.style.boxShadow =  	inset 0px 0px 16px 2px 	 	rgba(28,88,255,1)	;ball.style.width= widthxpx;ball.style.height= widthxpx;ball.style.fontSize =  fontSizepx;ball.style.fontFamily =  PingFang SC-Regular, PingFang SC;ball.style.fontWeight =  400;ball. = fontColor;ball. =  200  px;ball.style.left =  520  px;ball.innerHTML = [i];}if([i]==	电源	) {let   widthx =74;let   fontSize =2;let   fontColor = 	#4696FF	;cole.log(fuwuwwwww);ball.style.boxShadow =  	inset 0px 0px 16px 2px 	 	rgba(28,88,255,1)	;ball.style.width= widthxpx;ball.style.height= widthxpx;ball.style.fontSize =  fontSizepx;ball.style.fontFamily =  PingFang SC-Regular, PingFang SC;ball.style.fontWeight =  400;ball. = fontColor;ball. =  70  px;ball.style.left =  90  px;ball.innerHTML = [i];}if([i]==	停电	) {let   widthx =101;let   fontSize =1;let   fontColor = 	#E0E62D	;cole.log(fuwuwwwww);ball.style.boxShadow =  	inset 0px 0px 16px 2px 	 	rgba(226,255,2,1)	;ball.style.width= widthxpx;ball.style.height= widthxpx;ball.style.fontSize =  fontSizepx;ball.style.fontFamily =  PingFang SC-Regular, PingFang SC;ball.style.fontWeight =  400;ball. = fontColor;ball. =  60  px;ball.style.left =  250  px;ball.innerHTML = [i];}if([i]==	多户	) {let   widthx =101;let   fontSize =1;let   fontColor = 	#01F4FF	;cole.log(fuwuwwwww);ball.style.boxShadow =  	inset 0px 0px 16px 2px 	 	 rgba(1,244,255,1)	;ball.style.width= widthxpx;ball.style.height= widthxpx;ball.style.fontSize =  fontSizepx;ball.style.fontFamily =  PingFang SC-Regular, PingFang SC;ball.style.fontWeight =  400;ball. = fontColor;ball. =  60  px;ball.style.left =  500  px;ball.innerHTML = [i];}if([i]==	供电	) {let   widthx =86;let   fontSize =1;let   fontColor = 	#CB85FF	;cole.log(fuwuwwwww);ball.style.boxShadow =  	inset 0px 0px 16px 2px 	 	rgba(161,99,255,1)	;ball.style.width= widthxpx;ball.style.height= widthxpx;ball.style.fontSize =  fontSizepx;ball.style.fontFamily =  PingFang SC-Regular, PingFang SC;ball.style.fontWeight =  400;ball. = fontColor;ball. =  180  px;ball.style.left =  280  px;ball.innerHTML = [i];}if([i]==	电费	) {let   widthx =74;let   fontSize =2;let   fontColor = 	#01F4FF	;cole.log(fuwuwwwww);ball.style.boxShadow =  	inset 0px 0px 16px 2px 	 	rgba(1,244,255,1)	;ball.style.width= widthxpx;ball.style.height= widthxpx;ball.style.fontSize =  fontSizepx;ball.style.fontFamily =  PingFang SC-Regular, PingFang SC;ball.style.fontWeight =  400;ball. = fontColor;ball. =  150  px;ball.style.left =  170  px;ball.innerHTML = [i];}if([i]==	解答	) {let   widthx =74;let   fontSize =2;let   fontColor = 	#4696FF	;cole.log(fuwuwwwww);ball.style.boxShadow =  	inset 0px 0px 16px 2px 	 	rgba(45,101,255,1)	;ball.style.width= widthxpx;ball.style.height= widthxpx;ball.style.fontSize =  fontSizepx;ball.style.fontFamily =  PingFang SC-Regular, PingFang SC;ball.style.fontWeight =  400;ball. = fontColor;ball. =  260  px;ball.style.left =  240  px;ball.innerHTML = [i];}if([i]==	报修	) {let   widthx =86;let   fontSize =27;let   fontColor = 	#E0E62D	;cole.log(fuwuwwwww);ball.style.boxShadow =  	inset 0px 0px 16px 2px 	 	rgba(226,255,2,1)	;ball.style.width= widthxpx;ball.style.height= widthxpx;ball.style.fontSize =  fontSizepx;ball.style.fontFamily =  PingFang SC-Regular, PingFang SC;ball.style.fontWeight =  400;ball. = fontColor;ball. =  00  px;ball.style.left =  400  px;ball.innerHTML = [i];}// if([i]==	服务	) {//   let   widthx =74;//   let   fontSize =2;//   let   fontColor = 	#01F4FF	;//   cole.log(fuwuwwwww);//   ball.style.boxShadow =  	inset 0px 0px 16px 2px 	 	 rgba(1,244,255,1)	;//   ball.style.width= widthxpx;//   ball.style.height= widthxpx;//   ball.style.fontSize =  fontSizepx;//   ball.style.fontFamily =  PingFang SC-Regular, PingFang SC;//   ball.style.fontWeight =  400;//   ball. = fontColor;//   ball. =  50  px;//   ball.style.left =  90  px;//   ball.innerHTML = [i];// }// ball.innerHTML = i  1;//将小球插入当wrapDiv中this.wrapDiv.appendChild(ball);//将所有的小球存储到数组中this.balls.push(ball);}},moveBalls(ballObj) {// var _this = this// setInterval(function() {ballObj. = ballObj.y  px;ballObj.style.left = ballObj.x  px;//判断小球的标志量，对小球作出相应操作if (ballObj.yflag) {//小球向下移动 下边界ballObj.y = ballObj.speed;if (ballObj.y >= 48 - ) {ballObj.y = 48 - ;ballObj.yflag = false;}} else {//小球向上移动ballObj.y -= ballObj.speed;if (ballObj.y <= 0) {ballObj.y = 0;ballObj.yflag = true;}}if (ballObj.xflag) {//小球向右移动 右边界ballObj.x = ballObj.speed;if (ballObj.x >= 850 - ) {ballObj.x = 850 - ;ballObj.xflag = false;}} else {//小球向左移动ballObj.x -= ballObj.speed;if (ballObj.x <= 0) {ballObj.x = 0;ballObj.xflag = true;}}// }, 20);},
}
}
</script><!-- <style type=text/css> -->
<style lang=scss scoped>#wrap {width: 869px;height:  calc(58px - var(--sub-title-width));/* background: red; *//* display: flex; *//* width: 400px;height: 400px; *///  border: 1px solid red; /* border: 1px solid red; *//*小球设置相对定位*/position: relative;/* margin: 0 auto; *//* display: flex;align-items: center;justify-content: center; */display: flex;// flex-direction: row;align-items: center;justify-content: center;//   .bg {//   width: 100%;//   height: 90%;//     background: url(	~@/assets/image/leftPage/ServiceQuality/dashuju.png	)//         center bottom no-repeat; //         // background: red;// }}
p {/* width: 100px;height: 100px; *//* color: white; */display: flex;align-items: center;justify-content: center;/* border-radius: 50%; *//* font-size: 45px; */text-align: center;top: 0;left: 0;position: absolute;/* padding: 5px 0; */
}
</style>