首页echarts词云通过调整GridSize让词条均匀分布的示例

echarts词云通过调整GridSize让词条均匀分布的示例

时间: 2023-07-12 16:51:42 浏览: 159

下面是一个使用ECharts词云并通过调整GridSize让词条均匀分布的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts词云示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script> var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: {}, series: [{ type: 'wordCloud', gridSize: 10, // 调整GridSize参数 sizeRange: [12, 50], rotationRange: [-90, 90], shape: 'circle', textStyle: { normal: { color: function () { return 'rgb(' + [ Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255) ].join(',') + ')'; } } }, data: [{ name: 'Javascript', value: 10000 }, { name: 'Java', value: 6181 }, { name: 'Python', value: 4386 }, { name: 'PHP', value: 4055 }, { name: 'C++', value: 2467 }, { name: 'C#', value: 2244 }, { name: 'HTML', value: 1898 }, { name: 'CSS', value: 1484 }, { name: 'TypeScript', value: 1112 }, { name: 'Ruby', value: 965 }, { name: 'C', value: 847 }, { name: 'Go', value: 582 }, { name: 'Swift', value: 555 }, { name: 'Objective-C', value: 550 }, { name: 'R', value: 462 }, { name: 'Kotlin', value: 366 }, { name: 'Scala', value: 360 }, { name: 'Lua', value: 282 }, { name: 'SQL', value: 273 }] }] }; myChart.setOption(option); </script> </body> </html> ``` 在上面的代码中，我们设置了GridSize参数为10，这样词条就会均匀分布在词云中。你可以根据实际情况调整GridSize的值，观察词条的分布效果。

阅读全文