echarts实现标签云文字云效果代码
代码语言:html
所属分类:其他
代码描述:echarts实现标签云文字云效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html, body, #main {
width: 100%;
height: 100%;
margin: 0;
</style>
</head>
<body>
<div id='main'></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-4.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-wordcloud2.min.js"></script>
<script >
var chart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {},
series: [{
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
rotationRange: [-90, 90],
// The shape of the "cloud" to draw. Can be any polar equation represented as a
// callback function, or a keyword present. Available presents are circle (default),
// cardioid (apple or heart shape curve, the most known polar equation), diamond (
// alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
// Shapes: pentagon, star, random-light, random-dark, circle, cardioid, diamond, triangle-forward, triangle, triangle-upright, apple, heart shape curve
shape: 'apple',
width: 600,
height: 400,
drawOutOfBound: true,
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)].
join(',') + ')';
} },
emphasis: {
shadowBlur: 10,
shadowColor: '#333' } },
data: [
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0