echarts——词云

最新推荐文章于 2024-06-12 11:13:48 发布

贝塔贝卡贝

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量156

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Kiruthika/article/details/130892631

版权

在这里插入图片描述
echarts-wordcloud 地址: https://github.com/kiruthika-yue/echarts

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echart/echarts.min.js"></script>
    <script src="./echart/echarts-wordcloud.min.js"></script>
    <style>
        #main {
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>

    <div id="main">

    </div>

    <script>
        var chart = echarts.init(document.getElementById('main'));
        const data = [
            { value: 11, name: '小双' },
            { value: 12, name: '闪妞' },
            { value: 15, name: '瑶瑶' },
            { value: 13, name: '笑笑' },
            { value: 16, name: '娜娜' },
        ]
        var option = {
            tooltip: {},
            series: [{
                type: 'wordCloud',
                gridSize: 2,
                sizeRange: [12, 50],
                rotationRange: [-90, 90],
                shape: 'pentagon',
                width: 600,
                height: 400,
                drawOutOfBound: true,
                textStyle: {
                    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
            }]
        };

        chart.setOption(option);

        window.onresize = chart.resize;

    </script>
</body>

</html>