效果
ECharts 詞云圖（WordCloud）教學詳解
詞云圖是一種通過關鍵詞的大小、顏色等視覺差異來展示文本數據中詞頻或權重的圖表。它直觀、形象，是數據分析和內容展示中的利器。
本文將帶你從零開始，學習如何用 ECharts 的 WordCloud 插件繪制詞云圖，涵蓋基礎配置、樣式定制和多樣化示例。
一、準備工作
使用詞云圖需要引入：
- ECharts 核心庫：負責圖表繪制基礎
- echarts-wordcloud 插件：提供詞云圖功能
示例：
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2/dist/echarts-wordcloud.min.js"></script>
確保插件加載順序正確，先加載 ECharts，再加載詞云插件。
二、基本配置講解
核心是 series 配置：
series: [{type: 'wordCloud', // 必填，指定詞云圖類型shape: 'circle', // 詞云形狀，常用有circle, rectangle等data: [ // 詞頻數據數組，每項包含name和value{ name: 'ECharts', value: 10000 },{ name: '詞云', value: 8000 },// ...],textStyle: { // 文字樣式配置fontFamily: 'sans-serif',color: () => `rgb(${[0,0,0].map(() => Math.round(Math.random()*160)).join(',')})`}
}]
type固定為'wordCloud'，告訴 ECharts 使用詞云圖渲染。shape控制詞云輪廓形狀，常用circle、rectangle，也可以是star、diamond等。data數組中的value決定對應詞的字體大小，值越大字體越大。textStyle.color支持傳入函數，隨機顏色讓詞云更豐富多彩。
三、進階樣式
你可以通過以下配置讓詞云更具美感和表現力：
- 旋轉角度范圍
rotationRange: [-90, 90] // 詞語旋轉角度區間，支持負數
讓詞語隨機旋轉，增強動感。
- 字體和粗細
textStyle: {fontFamily: 'Courier New',fontWeight: 'bold',color: '#ff5722'
}
更換字體，調整文字粗細及顏色。
- 布局密度
gridSize: 10
控制詞語間隔，值越小詞云越緊密。
四、多樣示例展示
示例 1：基礎圓形詞云，隨機顏色
series: [{type: 'wordCloud',shape: 'circle',data: commonWords,textStyle: {color: () => `rgb(${[0,0,0].map(() => Math.round(Math.random()*160)).join(',')})`}
}]
示例 2：圓形 + 旋轉角度 + 自定義字體
series: [{type: 'wordCloud',shape: 'circle',rotationRange: [-90, 90],textStyle: {fontFamily: 'Courier New',fontWeight: 'bold',color: '#ff5722'},data: commonWords
}]
示例 3：矩形布局 + 單色
series: [{type: 'wordCloud',shape: 'rectangle',gridSize: 10,textStyle: {fontFamily: 'Arial',color: '#2196f3'},data: commonWords
}]
五、實用建議
- 詞云圖適合展示關鍵詞頻率、熱點分析、內容聚焦。
- 可以結合后端接口動態加載詞頻數據。
- 通過點擊事件，支持交互式高亮或跳轉。
六、總結
ECharts 的 WordCloud 插件簡單易用，靈活多樣，通過調整 series 里的一些關鍵參數，就能創造出豐富美觀的詞云圖。掌握上述基礎與進階配置，能滿足大多數詞云可視化需求。
源碼
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>ECharts WordCloud 詞云圖示例</title><style>body {font-family: Arial, sans-serif;background-color: #f9f9f9;padding: 20px;}h2, p {text-align: center;}.section {max-width: 1200px;margin: 0 auto 40px;padding: 20px;background-color: #fff;border-radius: 10px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);}.chart-container {display: flex;flex-wrap: wrap;justify-content: center;gap: 30px;}.chart-box {width: 400px;height: 400px;}.desc {font-size: 14px;color: #555;margin-bottom: 10px;}</style>
</head>
<body><h2>🌈 ECharts WordCloud 詞云圖多樣化示例</h2>
<p>以下展示多個詞云圖實例，涵蓋不同樣式與用途，幫助你靈活掌握詞云圖的配置技巧。</p><div class="section"><div class="desc"><strong>示例 1：基礎詞云</strong> - 使用圓形排布，顏色隨機</div><div class="chart-container"><div class="chart-box" id="wordcloud1"></div></div>
</div><div class="section"><div class="desc"><strong>示例 2：自定義字體和旋轉角度</strong> - 調整文字方向與字體風格</div><div class="chart-container"><div class="chart-box" id="wordcloud2"></div></div>
</div><div class="section"><div class="desc"><strong>示例 3：矩形布局 + 單色風格</strong> - 更加正式的展示效果</div><div class="chart-container"><div class="chart-box" id="wordcloud3"></div></div>
</div><!-- ECharts 核心庫 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- WordCloud 插件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2/dist/echarts-wordcloud.min.js"></script><script>const commonWords = [{ name: 'ECharts', value: 10000 },{ name: '詞云', value: 8000 },{ name: '圖表', value: 6000 },{ name: '可視化', value: 5000 },{ name: 'JavaScript', value: 4000 },{ name: '前端', value: 3000 },{ name: '數據', value: 2000 },{ name: '配置', value: 1800 },{ name: '顏色', value: 1500 },{ name: '插件', value: 1200 },];// 示例 1echarts.init(document.getElementById('wordcloud1')).setOption({series: [{type: 'wordCloud',shape: 'circle',textStyle: {fontFamily: 'sans-serif',color: () => `rgb(${[0,0,0].map(() => Math.round(Math.random()*160)).join(',')})`},data: commonWords}]});// 示例 2echarts.init(document.getElementById('wordcloud2')).setOption({series: [{type: 'wordCloud',shape: 'circle',rotationRange: [-90, 90],textStyle: {fontFamily: 'Courier New',fontWeight: 'bold',color: '#ff5722'},data: commonWords}]});// 示例 3echarts.init(document.getElementById('wordcloud3')).setOption({series: [{type: 'wordCloud',shape: 'rectangle',gridSize: 10,textStyle: {fontFamily: 'Arial',color: '#2196f3'},data: commonWords}]});
</script></body>
</html>
)
)
