昔有朝歌夜弦之高楼，上有倾城倾国之舞袖。
我的github: 李大玄
我的私人博客: 李大玄
我的npm开源库: 李大玄
我的简书: 李大玄
我的CSDN: 李大玄
我的掘金: 李大玄
哔哩哔哩: 李大玄
在这里插入图片描述
首先咱们需要一个插件这个插件是jQuery的插件
官方文档英文的[Facepalm]
css 就不忘初心贴了 太多了 懒得找
代码是这样的 HTML
div class="cy data-flow">
<div class="data-flow-content" data-title="客流标签词云">
<!-- 客流标签词云 -->
<div id="canvas-ifrshb" class="Rotation">
<canvas id="canvas-yrieay">
<p>Anything in here will be replaced on browsers that support the canvas element</p>
</canvas>
</div>
<div style="display: none" class="data-flow-label" id="tags">
<ul></ul>
</div>
</div>
</div>
JS
const update = function () {
if (!$('#canvas-yrieay').tagcanvas({
textFont: 'Impact,"Arial Black",sans-serif',
textColour: '#fff',
outlineColour: '#0743EC',
reverse: true,
textHeight: 16,
shape: "sphere",
depth: 0.8,
decel: 0.99,
padding: 0,
wheelZoom: true,
dragControl: false,
fadeIn: 0,
freezeActive: false,
outlineMethod: "outline",
outlineOffset: "5",
outlineRadius: "0",
outlineThickness: "2",
maxSpeed: 0.05,
initial: [0.1, -0.2], // 配置旋转速度
}, 'tags')) {
$('#canvas-yrieay').hide();
}
};
const getHtml = function (result: Array) {
$('#canvas-yrieay').attr('width', $('#canvas-ifrshb').width());
$('#canvas-yrieay').attr('height', $('#canvas-ifrshb').height() - 10);
const $label = $('.data-flow-label ul', '#app');
const html = getLabels(result);
$label.html('');
$label.prepend(html);
update();
};
