air-bubble-cloud/air-bubble-cloud.umd.min.js

气泡词云，通过传入数据，自动生成动态移动的气泡词云

(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["air-bubble-cloud"]=t(require("vue")):e["air-bubble-cloud"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={203:function(t){t.exports=e}},o={};function n(e){var r=o[e];if(void 0!==r)return r.exports;var i=o[e]={exports:{}};return t[e](i,i.exports,n),i.exports}!function(){n.d=function(e,t){for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})}}(),function(){n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){n.p=""}();var r={};return function(){if(n.r(r),n.d(r,{default:function(){return m}}),"undefined"!==typeof window){var e=window.document.currentScript,t=e&&e.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);t&&(n.p=t[1])}var o=n(203);const i={name:"AirBubbleCloud",props:{data:{type:Array,default:()=>[{name:"工程车",value:120,textStyle:{color:"#fff",background:"rgb(8,68,69)"}},{name:"推土车",value:100,textStyle:{color:"#6100fe",backgroundImage:"linear-gradient(to left bottom, #000, #fff)"}},{name:"杰克琼斯",value:82,textStyle:{color:"#fff",backgroundImage:"radial-gradient(rgb(8,68,69),#fff)"}},{name:"项目方",value:60},{name:"交付中心",value:5},{name:"交付中心",value:5},{name:"交付中心",value:5},{name:"交付中心",value:5},{name:"交付中心",value:5},{name:"交付中心",value:5}]},baseSize:{type:Number,default:100},baseFont:{type:Number,default:20},boxWidth:{type:Number,default:300},boxHeight:{type:Number,default:200}},data(){return{timer:null}},mounted(){this.circleMove()},beforeDestroy(){this.data.forEach(((e,t)=>{this.circleMove(t,"in")}))},methods:{getRandomColor(){return`rgb(${parseInt(256*Math.random())},${parseInt(256*Math.random())},${parseInt(256*Math.random())})`},getItemSize(e,t){const o=this.data[0]&&this.data[0].value;if(0===o)return{"font-size":0,width:0,height:0};if(0===t)return{"font-size":this.baseFont+"px",width:this.baseSize+"px",height:this.baseSize+"px"};const n=e.value*this.baseSize/o;let r=n,i=n*this.baseFont/this.baseSize;return n<=40&&(r=40,i=11),{"font-size":i+"px",width:r+"px",height:r+"px"}},circleMove(e=-1,t){const o=document.querySelectorAll(".air-circle");if("in"!==t)if("out"!==t)o.forEach(((e,t)=>{let o=Math.random()*this.boxHeight,n=Math.random()*this.boxWidth;e.style.top=o+"px",e.style.left=n+"px",e.co=t%4,e.step=Math.random()+.2,this.setTimer(e,t,o,n)}));else{const t=o[e],n=t.offsetLeft,r=t.offsetTop;this.setTimer(o[e],e,r,n)}else clearInterval(o[e].timer)},setTimer(e,t,o,n){e.timer=setInterval((()=>{const t=e.co,r=e.step;0===t?(o+=r,n-=r,(o>=this.boxHeight||n<=0)&&(e.co=1)):1===t?(o-=r,n+=r,(o<=0||n>=this.boxWidth)&&(e.co=0)):2===t?(o+=r,n+=r,(o>=this.boxHeight||n>=this.boxWidth)&&(e.co=3)):(o-=r,n-=r,(o<=0||n<0)&&(e.co=2)),e.style.top=o+"px",e.style.left=n+"px"}),30)},handleClick(e,t){this.$emit("click",e,t)}},render(e,t){const o=arguments[0];return o("div",{attrs:{id:"airBubbleCloud"},class:"air-bubble-cloud"},[this.data.map(((e,t)=>o("div",{class:"air-circle",key:t,style:{...this.getItemSize(e,t),"z-index":999-t,background:e.textStyle&&e.textStyle.background||this.getRandomColor(),"background-image":e.textStyle&&e.textStyle.backgroundImage||"",color:e.textStyle&&e.textStyle.color||"#fff"},on:{mouseover:()=>this.circleMove(t,"in"),mouseleave:()=>this.circleMove(t,"out"),click:()=>this.handleClick(e,t)}},[e.name])))])}},a=()=>{(0,o.useCssVars)(((e,t)=>({"6eb2cd2e":e.boxWidth+"px","29e21144":e.boxHeight+"px","732097e0":e.baseSize+"px","80205ca4":e.baseFont+"px"})))},s=i.setup;i.setup=s?(e,t)=>(a(),s(e,t)):a;var l,u,c=i,d=c;function f(e,t,o,n,r,i,a,s){var l,u="function"===typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=o,u._compiled=!0),n&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),a?(l=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},u._ssrRegister=l):r&&(l=s?function(){r.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:r),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(e,t){return l.call(t),c(e,t)}}else{var d=u.beforeCreate;u.beforeCreate=d?[].concat(d,l):[l]}return{exports:e,options:u}}var p=f(d,l,u,!1,null,null,null),h=p.exports,b={install:e=>{e.component("AirBubbleCloud",h)}},m=b}(),r}()}));
//# sourceMappingURL=air-bubble-cloud.umd.min.js.map