echarts词云图设置制定形状
时间: 2023-09-04 21:14:35 浏览: 102
ECharts 词云案例三:2024年阅读关键词-源码-素材.rar
要在 ECharts 中设置指定形状的词云图,需要使用 `shape` 属性,并将其设置为 SVG 路径字符串。可以使用各种绘图工具(如 Adobe Illustrator、Inkscape 等)来创建 SVG 路径,也可以使用在线工具(如 https://yqnn.github.io/svg-path-editor/)来编辑和生成 SVG 路径。
例如,以下代码可以将词云图形状设置为一个笑脸的 SVG 路径:
```javascript
option = {
series: [{
type: 'wordCloud',
shape: 'M42.5,5.6c-4.5,0-8.1,3.7-8.1,8.1c0,4.5,3.7,8.1,8.1,8.1s8.1-3.7,8.1-8.1C50.6,9.3,47,5.6,42.5,5.6 M33,24.8c-1.1-1.4-2.7-2.4-4.5-2.7c-0.3,0-0.6-0.1-0.9-0.1c-0.3,0-0.6,0.1-0.9,0.1c-1.7,0.3-3.2,1.3-4.5,2.7c-1.4,1.1-2.4,2.7-2.7,4.5c-0.3,1.7,0.1,3.4,1.1,4.7c0.8,1,1.9,1.7,3.1,2c0.4,0.1,0.8,0.1,1.2,0.1c0.4,0,0.8-0.1,1.2-0.1c1.2-0.3,2.3-1,3.1-2c1-1.3,1.4-3,1.1-4.7C35.4,27.5,34.4,25.9,33,24.8 M58.3,31.7c-1.1-1.4-2.7-2.4-4.5-2.7c-0.3,0-0.6-0.1-0.9-0.1c-0.3,0-0.6,0.1-0.9,0.1c-1.7,0.3-3.2,1.3-4.5,2.7c-1.4,1.1-2.4,2.7-2.7,4.5c-0.3,1.7,0.1,3.4,1.1,4.7c0.8,1,1.9,1.7,3.1,2c0.4,0.1,0.8,0.1,1.2,0.1c0.4,0,0.8-0.1,1.2-0.1c1.2-0.3,2.3-1,3.1-2c1-1.3,1.4-3,1.1-4.7C60.6,34.4,59.6,32.8,58.3,31.7 M50,60.6c-9.8,0-17.8-8-17.8-17.8c0-9.8,8-17.8,17.8-17.8c9.8,0,17.8,8,17.8,17.8C67.8,52.6,59.8,60.6,50,60.6',
// 其他配置项
// ...
}]
};
```
在上述代码中,`shape` 的值为一个 SVG 路径字符串。该路径描述了一个笑脸的轮廓,包含多个 `M`(移动)、`L`(直线)、`C`(贝塞尔曲线)等命令,用于绘制复杂的形状。你可以复制上述代码并将路径替换为你自己的 SVG 路径。
阅读全文