首页使用echarts 写一个词云图

使用echarts 写一个词云图

时间: 2023-08-19 08:33:02 浏览: 100

好的，以下是一个基本的Echarts词云图的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>词云图示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>  <script src="https://cdn.bootcdn.net/ajax/libs/echarts-wordcloud/2.1.0/echarts-wordcloud.min.js"></script> </head> <body> <div id="wordcloud" style="width: 600px;height:400px;"></div> <script> // 初始化echarts实例 var myChart = echarts.init(document.getElementById('wordcloud')); // 配置词云图 var option = { tooltip: {}, series: [{ type: 'wordCloud', gridSize: 10, sizeRange: [12, 50], rotationRange: [-90, 90], shape: 'pentagon', textStyle: { normal: { color: function() { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; } } }, data: [ { name: 'Java', value: 10000 }, { name: 'Python', value: 6181 }, { name: 'PHP', value: 4386 }, { name: 'JavaScript', value: 4055 }, { name: 'C++', value: 2467 }, { name: 'C#', value: 2244 }, { name: 'SQL', value: 1898 }, { name: 'Swift', value: 1484 }, { name: 'Objective-C', value: 1112 }, { name: 'Ruby', value: 965 }, { name: 'HTML', value: 847 }, { name: 'CSS', value: 582 }, { name: 'TypeScript', value: 555 }, { name: 'Go', value: 550 } ] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 以上代码演示了如何使用Echarts和echarts-wordcloud插件创建一个简单的词云图，并展示了一些示例数据。您可以将数据替换为自己的数据，并根据需要修改其他配置项以自定义您的词云图。

阅读全文