echarts实现标签云文字云效果代码

代码语言:html

所属分类:其他

代码描述:echarts实现标签云文字云效果代码

代码标签: 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