echarts-wordcloud中配置项

### ECharts WordCloud 配置项详解 ECharts 提供了丰富的 `wordCloud` 图表配置选项，用于实现词云图的展示功能。以下是关于 `echarts-wordcloud` 插件的主要配置参数及其作用： #### 基本配置项 1. **series.type**: 设置图表类型为 `'wordCloud'`[^4]。 ```javascript series: [{ type: 'wordCloud' }] ``` 2. **series.data**: 定义词云中的单词列表，每个单词是一个对象，包含名称 (`name`) 和权重值 (`value`)。 ```javascript data: [ { name: '关键词A', value: 10 }, { name: '关键词B', value: 8 }, { name: '关键词C', value: 6 } ] ``` 3. **shape**: 控制词云的整体形状，默认为圆形（circle），可选值包括 `'circle'`, `'cardioid'`, `'diamond'`, `'triangle-forward'`, `'triangle'`, `'pentagon'`, `'star'` 等。 ```javascript shape: 'cardioid' ``` 4. **sizeRange**: 定义字体大小范围，接受一个数组 `[minSize, maxSize]` 表示最小和最大字号。 ```javascript sizeRange: [12, 60] ``` 5. **rotationRange**: 字体旋转角度范围，单位为弧度，通常设置为 `[-Math.PI / 2, Math.PI / 2]` 或其他自定义区间。 ```javascript rotationRange: [-Math.PI / 2, Math.PI / 2] ``` 6. **textStyle.normal.color**: 单词的颜色可以由函数动态生成，也可以通过固定颜色列表指定。 ```javascript textStyle: { color: function () { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; } } ``` 7. **gridSize**: 控制单词之间的间距，默认值为 `8`，数值越大则单词间距离越远。 ```javascript gridSize: 16 ``` 8. **left**, **top**, **right**, **bottom**: 调整词云相对于容器的位置偏移量，支持百分比或具体像素值。 ```javascript left: 'center', top: 'center' ``` 9. **maskImage**: 使用图片作为遮罩层来控制词云分布区域，需提供一张透明背景的 PNG 图片路径。 ```javascript maskImage: new Image(), ``` #### 示例代码 以下是一份完整的 `echarts-wordcloud` 配置实例： ```javascript option = { series: [{ type: 'wordCloud', shape: 'circle', left: 'center', top: 'center', width: '70%', height: '80%', sizeRange: [12, 60], rotationRange: [-Math.PI / 2, Math.PI / 2], gridSize: 16, drawOutOfBound: false, textStyle: { normal: { color: function () { return 'hsl(' + Math.round(Math.random() * 360) + ', 50%, 50%)'; } } }, data: [ { name: 'Python', value: 100 }, { name: 'JavaScript', value: 80 }, { name: 'Java', value: 70 }, { name: 'C++', value: 60 }, { name: 'Go', value: 50 } ] }] }; ``` --- ### 结合项目实践 根据引用内容，在 Vue 项目的 `js/charts/wordcloud.js` 文件中引入并初始化上述配置[^2]。同时，如果采用 Vite 构建工具，则可以通过插件优化依赖加载效率[^3]。 ---