<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.min.js"></script> <script src="echarts.min.js"></script> <script src="echarts-wordcloud.min.js"></script> </head> <body> <div id="wordcloud_echarts" style="height:90%;"></div> <script> var myChart = echarts.init(document.getElementById('wordcloud_echarts')); var keywords = [{"name":"男神","value":2.64}, {"name":"好身材","value":4.03}, {"name":"校草","value":24.95}, {"name":"酷","value":4.04}, {"name":"時尚","value":5.27}, {"name":"陽光活力","value":5.80}, {"name":"初戀","value":3.09}, {"name":"英俊瀟灑","value":24.71}, {"name":"霸氣","value":6.33}, {"name":"靦腆","value":2.55}, {"name":"蠢萌","value":3.88}, {"name":"青春","value":8.04}, {"name":"網紅","value":5.87}, {"name":"萌","value":6.97}, {"name":"認真","value":2.53}, {"name":"古典","value":2.49}, {"name":"溫柔","value":3.91}, {"name":"有個性","value":3.25}, {"name":"可愛","value":9.93}, {"name":"幽默詼諧","value":3.65}] var option = { series: [{ type: 'wordCloud', sizeRange: [15, 80], rotationRange: [0, 0], rotationStep: 45, gridSize: 8, shape: 'pentagon', width: '100%', height: '100%', textStyle: { normal: { color: function () { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; } } }, data: keywords }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); window.addEventListener("resize", function() { myChart.resize(); }); </script> </body> </html>