js词云文件

2022-05-30 11:01:31 阅读：129 来源： 互联网

标签：文件 name value js shape 词云 90 Math

let cloudData = [
    {
        name: 'Authentication',
        value: 10000
    },
    {
        name: 'Streaming of segmented content',
        value: 6181
    },
    {
        name: 'Amy Schumer',
        value: 4386
    },
    {
        name: 'Jurassic World',
        value: 4055
    },
    {
        name: 'Charter Communications',
        value: 2467
    },
    {
        name: 'Chick Fil A',
        value: 2244
    },
    {
        name: 'Planet Fitness',
        value: 1898
    },
    {
        name: 'Pitch Perfect',
        value: 1484
    },
    {
        name: 'Express',
        value: 1112
    },
    {
        name: 'Home',
        value: 965
    },
    {
        name: 'Johnny Depp',
        value: 847
    },
    {
        name: 'Lena Dunham',
        value: 582
    },
    {
        name: 'Lewis Hamilton',
        value: 555
    },
    {
        name: 'KXAN',
        value: 550
    },
    {
        name: 'Mary Ellen Mark',
        value: 462
    },
    {
        name: 'Farrah Abraham',
        value: 366
    },
    {
        name: 'Rita Ora',
        value: 360
    },
    {
        name: 'Serena Williams',
        value: 282
    },
    {
        name: 'NCAA baseball tournament',
        value: 273
    },
    {
        name: 'Point Break',
        value: 265
    }
] 


// 基于准备好的dom，初始化echarts实例
var chart = echarts.init(document.getElementById('wordCloud'));
var option = {
    title: {
        // text: '企业一专利热词'
    },
    tooltip: {},
    series: [{
        type: 'wordCloud',
        /*
       绘制词云的形状, 值为回调函数 或 关键字, 默认 circle
       关键字:
       circle  圆形
       cardioid 心形
       diamond  菱形 正方形
       triangle-forward, triangle  三角形  
       pentagon 五边形
       star 星形
       */
        shape: 'circle',

        // The shape option will continue to apply as the shape of the cloud to grow.
        //词云轮廓图，支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串, 不包含白色区域; 可选选项
        // shape选项将随着云的形状增长而继续应用。
        //maskImage: maskImage,

        // 词云整个图表放置的位置 和 尺寸大小
        left: 'center',
        top: 'center',
        width: '100%',
        height: '100%',
        right: null,
        bottom: null,

        //词云文本大小范围,  默认为最小12像素，最大60像素。
        sizeRange: [12, 60],

        // 词云文字旋转范围和步长。 文本将通过旋转在[-90，90]范围内随机旋转步骤45
        // 如果都设置为 0 , 则是水平显示
        rotationRange: [-90, 90],
        rotationStep: 45,

        // 词云文本之间的距离, 距离越大，单词之间的间距越大, 单位像素
        gridSize: 8,

        //设置为true可以使单词部分在画布之外绘制, 允许绘制大于画布大小的单词
        drawOutOfBound: false,
        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: cloudData // 词云数据

    }]
}

option && chart.setOption(option);

标签：文件,name,value,js,shape,词云,90,Math
来源： https://www.cnblogs.com/myqinyh/p/16326048.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js词云文件