はじめに
EChartsは強力なJavaScript可視化ライブラリであり、echarts-wordcloudプラグインを利用することで、テキストデータから印象的なワードクラウドを生成できます。本記事では、EChartsをベースにしたワードクラウドの構築手順と、SVGマスクを活用した任意の形状へのカスタマイズ方法について解説します。
パッケージのインストール
まず、必要なモジュールをnpmでインストールします。ECharts本体に加え、ワードクラウド専用の拡張モジュールも必要です。
npm install echarts@5.3.3<br>npm install echarts-wordcloud@2.0.0基本的なコンポーネント構成
Vue.js環境を前提として、テンプレート内に描画領域を用意します。
<template><br> <div id="wordcloud-container" style="width: 800px; height: 500px;"></div><br></template>データ定義と初期化
表示対象となる単語とその重み（頻度など）を配列形式で定義します。ここでは産業分野ごとのサンプルデータを使用しています。
data() {<br> return {<br> wordData: [<br> { name: '電子技術', value: 7800 },<br> { name: '医療研究', value: 1750 },<br> { name: '物流', value: 1280 },<br> { name: '金融', value: 980 },<br> // ... 他の項目<br> ],<br> chartInstance: null<br> }<br>},<br>mounted() {<br> this.renderWordCloud();<br>}ワードクラウドのオプション設定
setOptionメソッドを通じて、グラフの外観や動作を詳細に指定します。
renderWordCloud() {<br> const container = document.getElementById('wordcloud-container');<br> this.chartInstance = this.$echarts.init(container);<br><br> // カスタムシェイプ用のマスク画像（Base64エンコードされたPNG）<br> const shapeMask = new Image();<br> shapeMask.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAY...';<br><br> const option = {<br> tooltip: { show: true },<br> series: [{<br> type: 'wordCloud',<br> gridSize: 10,<br> sizeRange: [12, 60],<br> rotationRange: [-30, 30],<br> rotationStep: 45,<br> shape: 'circle', // デフォルト形状<br> // maskImage: shapeMask, // 矢印型などのカスタム形状を適用する場合<br> left: 'center',<br> top: 'center',<br> width: '100%',<br> height: '100%',<br> drawOutOfBound: false,<br> textStyle: {<br> fontFamily: 'Helvetica, Arial, sans-serif',<br> color: () => {<br> return `rgb(${<br> Math.round(Math.random() * 180)}, ${<br> Math.round(Math.random() * 180)}, ${<br> Math.round(Math.random() * 180)})`;<br> }<br> },<br> emphasis: {<br> focus: 'self',<br> textStyle: { fontSize: 24 }<br> },<br> data: this.wordData<br> }]<br> };<br><br> this.chartInstance.setOption(option);<br><br> // クリックイベントのバインド<br> this.chartInstance.on('click', params => {<br> console.log(`Clicked on: ${params.name} (Weight: ${params.value})`);<br> });<br><br> // ホバーイベントの監視<br> this.chartInstance.on('mouseover', params => {<br> console.log(`Hovered over: ${params.name}`);<br> });<br>}カスタム形状の適用
maskImageプロパティに画像オブジェクトを設定することで、星形、ロゴ、アイコンなど任意の輪郭内にワードクラウドを配置できます。SVGをPNGに変換し、Base64形式で埋め込むのが一般的です。iconfont.cnなどのアイコンライブラリから素材を取得可能です。
スタイルとレイアウト調整
- gridSize: 語間の最小スペースを制御
- sizeRange: 最小・最大フォントサイズ
- rotationRange: 単語の傾き範囲
- shape: 基本形状（円、ダイヤモンド、五角形など）
これらの値を調整することで、読みやすさとビジュアル効果のバランスを最適化できます。
イベントハンドリング
ユーザーインタラクションに対応するため、クリックやマウスオーバーイベントを登録できます。例えば、特定の単語クリック時に詳細情報をポップアップ表示するといった拡張が可能です。