npm install echarts-wordcloud

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud/dist/echarts-wordcloud.min.js"></script>

import * as echarts from 'echarts';
import 'echarts-wordcloud';

const chart = echarts.init(document.getElementById('main'));

const option = {
  series: [{
    type: 'wordCloud',
    shape: 'circle',
    data: [
      { name: 'ECharts', value: 10000 },
      { name: 'Data', value: 8000 },
      { name: 'Visualization', value: 6000 },
      { name: 'Chart', value: 5000 },
      { name: 'JavaScript', value: 4000 },
      { name: 'Apache', value: 3000 }
    ]
  }]
};

chart.setOption(option);

series: [{
  type: 'wordCloud',
  shape: 'circle', // 'circle', 'cardioid', 'diamond', 'square', 'triangle'
  // Or use a custom shape
  maskImage: imageElement
}]

series: [{
  type: 'wordCloud',
  sizeRange: [12, 60],
  rotationRange: [-90, 90],
  rotationStep: 45,
  gridSize: 8,
  drawOutOfBound: false
}]

series: [{
  type: 'wordCloud',
  textStyle: {
    fontFamily: 'sans-serif',
    fontWeight: 'bold',
    color: function () {
      return 'rgb(' + [
        Math.round(Math.random() * 160),
        Math.round(Math.random() * 160),
        Math.round(Math.random() * 160)
      ].join(',') + ')';
    }
  },
  emphasis: {
    textStyle: {
      shadowBlur: 10,
      shadowColor: '#333'
    }
  }
}]

const option = {
  series: [{
    type: 'wordCloud',
    data: data,
    textStyle: {
      color: function(params) {
        // Color based on value
        const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666'];
        return colors[Math.floor(Math.random() * colors.length)];
      }
    }
  }]
};

const maskImage = new Image();
maskImage.src = 'path/to/mask-image.png';

maskImage.onload = function() {
  const option = {
    series: [{
      type: 'wordCloud',
      maskImage: maskImage,
      data: data
    }]
  };
  chart.setOption(option);
};

const option = {
  series: [{
    type: 'wordCloud',
    data: data,
    emphasis: {
      focus: 'self',
      textStyle: {
        textShadowBlur: 10,
        textShadowColor: '#333'
      }
    }
  }]
};

chart.on('click', function(params) {
  console.log('Clicked word:', params.name, 'Value:', params.value);
});

const option = {
  series: [{
    type: 'wordCloud',
    
    // Shape of the word cloud
    shape: 'circle',
    
    // Keep words inside shape
    keepAspect: false,
    
    // Positioning
    left: 'center',
    top: 'center',
    width: '70%',
    height: '80%',
    
    // Size range of words
    sizeRange: [12, 60],
    
    // Rotation settings
    rotationRange: [-90, 90],
    rotationStep: 45,
    
    // Layout grid size
    gridSize: 8,
    
    // Whether to draw out of bound
    drawOutOfBound: false,
    
    // Layout animation
    layoutAnimation: true,
    
    // Text style
    textStyle: {
      fontFamily: 'sans-serif',
      fontWeight: 'bold',
      color: function () {
        return 'rgb(' + [
          Math.round(Math.random() * 160),
          Math.round(Math.random() * 160),
          Math.round(Math.random() * 160)
        ].join(',') + ')';
      }
    },
    
    // Emphasis style
    emphasis: {
      focus: 'self',
      textStyle: {
        textShadowBlur: 10,
        textShadowColor: '#333'
      }
    },
    
    // Data
    data: [
      { name: 'Word1', value: 1000 },
      { name: 'Word2', value: 900 },
      // ...
    ]
  }]
};