echarts热搜图

您好！要绘制 ECharts 的热搜图，您可以按照以下步骤进行操作：

1. 引入 ECharts 库：在 HTML 文件中引入 ECharts 的 JavaScript 文件，可以通过 CDN 引入或者将文件下载到本地。

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

2. 创建一个具有一定宽高的 DOM 容器，用于显示图表。

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

3. 初始化 ECharts 实例，并获取容器对象。

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

4. 准备数据。热搜图通常使用类似词云的数据结构，每个热搜词条拥有一个权重值，权重越高表示该词条的热度越高。

5. 配置图表选项。根据需要设置图表的样式、布局、标题等。

var option = {
  series: [{
    type: 'wordCloud',
    shape: 'circle',  // 可以设置形状为 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon', 'star' 等
    gridSize: 2,  // 单位像素，控制词间距离
    sizeRange: [12, 50],  // 单位像素，控制词的大小范围
    rotationRange: [-90, 90],  // 控制词的旋转角度范围
    textStyle: {
      normal: {
        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(',') + ')';
        }
      }
    },
    data: [
      // 这里填写您的热搜数据，格式为 { name: '热搜词', value: 权重值 }
      // 例如：{ name: 'ECharts', value: 100 }
    ]
  }]
};

6. 使用配置项设置图表，并显示图表。

myChart.setOption(option);

这样，您就可以在网页上看到绘制好的热搜图了。请注意，以上代码只是简单示例，您需要根据实际情况进行适当的修改和调整。希望能对您有所帮助！