@echarts-x/custom-word-cloud

wordCloud is a custom series for Apache ECharts. It's typically used to display text data where the size of each word indicates its frequency or importance.

Source Code

Usage

Browser Environment

For browser usage, use the auto-registration version that automatically installs the custom series when loaded:

<script src="./node_modules/echarts/dist/echarts.js"></script>
<script src="./node_modules/@echarts-x/custom-word-cloud/dist/word-cloud.auto.js"></script>
<script>
  // No need to call echarts.use(), automatically registered
  const chart = echarts.init(...);
  const option = {
    series: [{
      type: 'custom',
      renderItem: 'wordCloud',
      // ...
    }]
  }
  chart.setOption(option);
</script>

See examples for more details.

UMD (Universal Module Definition)

For environments that need manual registration or when using AMD/CommonJS loaders:

// CommonJS
const echarts = require('echarts');
const wordCloudInstaller = require('@echarts-x/custom-word-cloud');
echarts.use(wordCloudInstaller);
const chart = echarts.init(...);

const option = {
  series: [{
    type: 'custom',
    renderItem: 'wordCloud',
    // ...
  }]
}
chart.setOption(option);

See examples for more details.

ESM (ES Modules)

For modern module bundlers or native ES module environments:

npm install @echarts-x/custom-word-cloud

import * as echarts from 'echarts';
import wordCloudCustomSeriesInstaller from '@echarts-x/custom-word-cloud';

echarts.use(wordCloudCustomSeriesInstaller);
const chart = echarts.init(...);

const option = {
  series: [{
    type: 'custom',
    renderItem: 'wordCloud',
    // ...
  }]
}
chart.setOption(option);

See examples for more details.

API

series.data

The data of the series is an array of arrays. Each sub-array represents a word and its weight.

const data = [
  ['Visual Studio Code', 1000],
  ['ECharts', 800],
  ['TypeScript', 600],
  // ...
];

series.itemPayload

The itemPayload is an object that contains the following properties: