web数据可视化(Echarts版)4-14编程语言词云图(代码仅供参考)

白日梦想家☜

已于 2023-05-22 15:27:29 修改

阅读量827

点赞数 1

分类专栏： HTML 文章标签： echarts 前端信息可视化

于 2023-05-20 22:52:26 首次发布

本文链接：https://blog.csdn.net/m0_63471474/article/details/130786963

版权

HTML 专栏收录该内容

40 篇文章 11 订阅

订阅专栏

echarts.js文件下载地址:Apache 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="js/echarts.js"></script>
    <script src="js/echarts-wordcloud.min.js"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main" style="width: 700px; height: 500px"></div>
    <script type="text/javascript">
    //基于准备好的DOM，初始化ECharts图表
    var myChart = echarts.init(document.getElementById("main"));
    //指定图表的配置项和数据
    var option = {   //指定图表的配置项和数据
        backgroundColor: 'rgba(128,128,128,0.1)',   //rgba设置透明度为0.1
        title: {   //配置标题组件
            text: '全球编程语言的TIOBE排名',
            x: 'center', y: 15,
            textStyle: {
                color: 'green', fontSize: 22,
            }
        },
        tooltip: { show: true },  //配置提示框组件
        series: [{   //数据系列及其配置
            name: '全球编程语言的TIOBE排名',  //设置名称
            type: 'wordCloud',   //设置图表类型为词云图
            sizeRange: [15, 100],  //设置数据大小范围
            size: ['80%', '80%'],   //设置显示的词云图的大小
            textRotation: [0, 45, 90, 135, -45, -90],   //设置文字倾斜角度
            textPadding: 3,  //设置文字之间的间距
            autoSize: { enable: true, minSize: 5 },   //设置文字的自动大小
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 255),
                            Math.round(Math.random() * 255),
                            Math.round(Math.random() * 255)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 26,
                    color: '#333',
                    shadowColor: '#ccc',
                    fontSize: 20
                }
            },
            data: [  //设置具体的数据
                { name: 'Java', value: 16884 }, { name: 'C', value: 16180 },
                { name: 'Python', value: 9089 }, { name: 'C++', value: 6229 },
                { name: "C#", value: 3860 }, { name: "VB.NET", value: 3745 },
                { name: 'Ruby', value: 1318 }, { name: 'Assembly', value: 1307 },
                { name: 'R', value: 1261 }, { name: 'Delphi', value: 1046 },
                { name: 'VB', value: 1234 }, { name: 'Go', value: 1100 },
                { name: 'Delphi', value: 1046 }, { name: 'SAS', value: 915 },
                { name: 'Perl', value: 1023 }, { name: 'Matlab', value: 924 },
                { name: 'PL/SQL', value: 822 }, { name: 'D', value: 814 },
                { name: 'Scheme', value: 193 }, { name: 'COBEL', value: 447 },
                { name: 'Scratch', value: 524 }, { name: 'Dart', value: 448 },
                { name: 'ABAP', value: 447 }, { name: 'Scala', value: 442 },
                { name: 'Fortran', value: 439 }, { name: 'LiveCode', value: 169 },
                { name: 'Lisp', value: 409 }, { name: 'F#', value: 391 },
                { name: 'Rust', value: 356 }, { name: 'Kotlin', value: 319 },
                { name: 'Ada', value: 316 }, { name: 'Logo', value: 261 },
                { name: 'SQL', value: 1935 }, { name: 'RPG', value: 274 },
                { name: 'PHP', value: 1909 }, { name: 'LabVIEW', value: 243 },
                { name: 'Haskell', value: 209 }, { name: 'Bash', value: 196 },
                { name: 'ActionScript', value: 182 }, { name: 'Transaact-SQL', value: 569 },
                { name: 'PowerShell', value: 178 }, { name: 'VBScript', value: 203 },
                { name: 'JavaScript', value: 2076 }, { name: 'TypeScript', value: 304 },
                { name: 'Objective-C', value: 1501 }, { name: 'Prolog', value: 261 },
                { name: 'Groovy', value: 1394 }, { name: 'Swift', value: 1362 },
                { name: 'Crystal', value: 168 }, { name: 'Lua', value: 379 },
                { name: 'Julia', value: 224 }
            ]   //data结束
        }]   //series 结束
    };   //option结束
    myChart.setOption(option);
</script>
</body>
</html>