引入 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>