js词云文件

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);

 

posted @ 2022-05-30 10:53  从入门到入土  阅读(227)  评论(0编辑  收藏  举报