echarts字符云（词云图）

最新推荐文章于 2024-06-17 17:23:35 发布

骚年008

最新推荐文章于 2024-06-17 17:23:35 发布

阅读量8.3k

点赞数 4

分类专栏：前端文章标签：字符云词云图个性标签

本文链接：https://blog.csdn.net/qq_36245035/article/details/90901074

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果图示
下载字符云js链接
字符云API详解

<html>
    <head>
        <meta charset="utf-8">
        //    echarts CDN
        <script src='https://cdn.bootcss.com/echarts/3.7.0/echarts.simple.js'></script>
        //    下载wordcloud.js文件
        //    https://github.com/ecomfe/echarts-wordcloud
        <script src='./echarts/Wordcloud/echarts-wordcloud.js'></script>
    </head>
    <body>
        <style>
            html, body{
                width: 100%;
                height: 100%;
                margin: 0;
            }
            #main{
                width: 600px;
                height: 500px;
                background: rgba(70, 120, 200, 0.2)
            }
        </style>
        <div id='main'></div>
        <script>
            var chart = echarts.init(document.getElementById('main'));

            var option = {
                tooltip: {},
                series: [ {
                    type: 'wordCloud',
                    gridSize: 2,
                    sizeRange: [12, 50],
                    rotationRange: [-90, 90],
                    shape: 'pentagon',
                    width: 600,
                    height: 400, 
                    drawOutOfBound: true,
                    textStyle: {
                        normal: {
                            color: function () {
                                return 'rgb(' + [
                                    Math.round(Math.random() * 255),
                                    Math.round(Math.random() * 255),
                                    Math.round(Math.random() * 255)
                                ].join(',') + ')';
                            },
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    //数据自己加
                    data: [
                        {
                            name: 'Sam S Club',
                            value: 10000,
                            // textStyle: {
                            //     normal: {
                            //         color: 'black'
                            //     },
                            //     emphasis: {
                            //         color: 'red'
                            //     }
                            // }
                        },
                        {
                            name: 'Macys',
                            value: 6181
                        },
                        {
                            name: 'Amy Schumer',
                            value: 4386
                        },
                    ]
                } ]
            };

            chart.setOption(option);

            window.onresize = chart.resize;
        </script>
    </body>
</html>

骚年008

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
echarts字符云（词云图）

效果图示下载字符云js链接字符云API详解 <html> <head> <meta charset="utf-8"> // echarts CDN <script src='https://cdn.bootcss.com/echarts/3.7.0/echarts.s...
复制链接

扫一扫

专栏目录