tagcanvas.min.js 文字云+动画效果

引入 tagcanvas.min.js

<template>
	<div>
	
		<div class="bodyblock" style="height: 300px;">
            <canvas width="540" height="300" id="myCanvas"></canvas>
            <div id="tags">            
                <a style="display: none;" href="" v-for="item in wordArr" :style="{'font-size':item.value+'px'}">{{item.name}}</a>

            </div>
		</div>
	</div>
</template>
<script type="text/javascript">
    import "./static/wordCloud/tagcanvas.min.js"
	export default{
		name:'',
		data(){
			return{
				zoomNum: window.screen.width / 1920, //1440x900		
                wordArr:[
                    {
                        "name": "建议取消",
                        "value": 100
                    },
                    {
                        "name": "路面恢复",
                        "value": 22
                    },
                    
                ],
                colorList:['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c','#e47300']
			}		
		},
		mounted: function(){
			var i, et = document.getElementById('tags').childNodes;
            for (i in et) {
                et[i].nodeName == 'A' && et[i].addEventListener('click', function (e) {
                    e.preventDefault();
                });
            }

            TagCanvas.Start('myCanvas', 'tags', {
                textColour: '#00FCFF',
                outlineColour: 'transparent',
                reverse: true,
                weight:true,
                weightMode:"colour",
                depth: 2,
                dragControl: true,
                minSpeed:0.008, //鼠标离开画布时的最小旋转速度
                decel:0.95, //鼠标离开画布时的减速率
                maxSpeed: 0.01,
                initial: [-0.2, 0],
                weightGradient:{0:'#2084D9', 0.22:'#17BB51',0.33:'#F9BD3D',0.44:'#8B70F5', 0.55:'#F9BD3D', 0.66:'#8B70F5', 0.77:'#F9BD3D', 0.88:'#00FCFF',1:'#2084D9'}
            });
		}
	}
</script>