echarts-wordcloud使用举例

ECharts-WordCloud 是 Apache ECharts（incubating）的一个扩展，用于绘制词云图。下面我给出一个简单的使用示例：

1. 引入 echarts 和 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>

2. 创建一个容器

<div id="wordcloud" style="width: 600px;height:400px;"></div>

3. 初始化 ECharts 实例

var myChart = echarts.init(document.getElementById('wordcloud'));

4. 配置词云图选项

var option = {
  series: [{
    type: 'wordCloud',
    gridSize: 20,
    sizeRange: [12, 50],
    rotationRange: [-90, 90],
    shape: 'pentagon',
    width: 600,
    height: 400,
    textStyle: {
      normal: {
        color: function() {
          return 'rgb(' + [
            Math.round(Math.random() * 255),
            Math.round(Math.random() * 255),
            Math.round(Math.random() * 255)
          ].join(',') + ')';
        }
      }
    },
    data: [
      {
        name: 'JavaScript',
        value: 10000,
      },
      {
        name: 'Java',
        value: 6181,
      },
      {
        name: 'Python',
        value: 4386,
      },
      {
        name: 'PHP',
        value: 4055,
      },
      {
        name: 'Ruby',
        value: 2467,
      },
      {
        name: 'C++',
        value: 2244,
      },
      {
        name: 'C#',
        value: 1898,
      },
      {
        name: 'HTML',
        value: 1484,
      },
      {
        name: 'CSS',
        value: 1112,
      },
      {
        name: 'TypeScript',
        value: 965,
      },
      {
        name: 'Swift',
        value: 847,
      },
      {
        name: 'Objective-C',
        value: 582,
      },
      {
        name: 'SQL',
        value: 555,
      },
      {
        name: 'Go',
        value: 550,
      },
      {
        name: 'Kotlin',
        value: 462,
      },
      {
        name: 'Perl',
        value: 367,
      }
    ]
  }]
};

5. 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

这样就可以在页面上展示一个简单的词云图了。