简介针对前端数据可视化场景这份词云图开发资源整理了完整的可运行示例与配置参数说明适合需要快速掌握词云图实现的前端开发者及数据分析师。压缩包内共6个文件包含3个JavaScript脚本、1个HTML页面、1份使用说明文档和1张效果示例图整体仅233KB轻量且结构紧凑直接打开HTML即可查看效果。脚本已集成词云图所需的常用依赖免去单独引入的繁琐资源已有11883人学习下载适合作为实际项目的基础模板。内容从基础环境引入到词云图数据组织、初始化与配置重点详解形状、字体大小范围、旋转角度、文字颜色等核心参数并附带高级应用思路便于在新闻分析、社区话题挖掘等场景灵活复用。资源内附使用说明文档对示例结构、参数含义和常见问题做了梳理整体循序渐进帮助刚接触词云图的开发者高效上手。1. echarts 词云图不是内置图表demo 先跑通才是关键把一堆用户反馈倒进画布高频词自动呈现大小错落的视觉层级这是词云图比柱状图更直观的地方。但 echarts 官方包并不包含词云图必须借助 echarts-wordcloud 扩展所以很多人第一次做前端 echarts 词云图时卡在安装、注册和系列类型上。一个能直接打开运行的 demo比反复看文档更解决问题配置参数则是把 demo 改成可用产品的最后一段距离。下面先给一个最小可运行 demo再逐个拆解 wordCloud 系列的布局、文本、高亮参数最后把数据清洗、点击事件和性能调优串起来。适合前端开发、数据可视化初学者也适合在准备前端面试时把 echarts 词云图的原理与配置讲完整。2. echarts 词云图 demo 的最小可运行页面与数据格式2.1 安装与引入先搞清楚 echarts-wordcloud 是怎么挂载的echarts-wordcloud 不是一个独立的图表库它是在 echarts 的扩展机制上开发的插件。引入之后它会向 echarts 注册一个名为wordCloud的系列类型所以在写配置时只需要把series[0].type设置为wordCloud。如果跳过这个扩展echarts 主包遇到wordCloud会直接抛错Series wordCloud is not used。为了不卡在第一步这里给出两种最常见的引入方式。在 npm 工程里echarts-wordcloud 作为 echarts 的扩展包存在安装 echarts 和它两个包就够了。对于 Vue 或 React 项目推荐在入口文件里统一引入并挂到全局而不是每个组件都注册一遍。如果只是本地调试一个独立 demo用 CDN 方式更快关键是先加载 echarts 主包再加载 echarts-wordcloud顺序反了会出现扩展注册不到全局 echarts 对象上的问题。npm install echarts echarts-wordcloudimport * as echarts from echarts; import echarts-wordcloud;上述命令先把两个依赖装进 package.json然后在代码里import echarts-wordcloud。这个扩展包内部会读取全局的 echarts 构造函数并在其上注册wordCloud系列。所以页面里只要出现一次扩展引用后续所有chart.setOption都能识别type: wordCloud。用 CDN 加载echarts.min.js后再加载echarts-wordcloud.min.js效果和 npm 引入一致只是把依赖粒度放到了 script 标签层级。2.2 一个可以直接保存运行的完整 HTML demo下面这个 HTML 文件可以保存成wordcloud-demo.html双击打开就能看到词云图。数据是前端开发相关的词频示例把它替换成自己的业务词就可以。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / titleecharts 词云图完整 demo/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script script srchttps://cdn.jsdelivr.net/npm/echarts-wordcloud2/dist/echarts-wordcloud.min.js/script /head body div idword-cloud stylewidth: 800px; height: 600px/div script const words [ { name: 前端, value: 98 }, { name: JavaScript, value: 86 }, { name: TypeScript, value: 72 }, { name: Vue, value: 66 }, { name: React, value: 63 }, { name: CSS, value: 52 }, { name: ECharts, value: 48 }, { name: 性能优化, value: 42 }, { name: 工程化, value: 37 }, { name: 组件化, value: 31 }, { name: 数据可视化, value: 28 }, { name: 浏览器, value: 25 }, { name: 网络协议, value: 22 }, { name: 构建工具, value: 18 }, { name: 调试, value: 15 } ]; const chart echarts.init(document.getElementById(word-cloud)); chart.setOption({ tooltip: { formatter: (params) ${params.name}br/词频${params.value} }, series: [{ type: wordCloud, shape: circle, left: center, top: center, width: 80%, height: 80%, sizeRange: [14, 60], rotationRange: [-90, 90], rotationStep: 45, gridSize: 8, drawOutOfBound: false, textStyle: { fontFamily: Arial, Microsoft YaHei, sans-serif, fontWeight: bold, color: () { const r Math.round(Math.random() * 160); const g Math.round(Math.random() * 160); const b Math.round(Math.random() * 160); return rgb(${r},${g},${b}); } }, emphasis: { textStyle: { color: #ff6600 } }, data: words }] }); /script /body /html容器#word-cloud建议给固定宽高因为 echarts.init 在容器没有宽高时会拿到 0图表的 canvas 不会被绘制。数据数组中每一项的结构是{ name, value }name是展示的词value控制字号权重。series.type写成wordCloud才能触发扩展里的布局算法。left/top/width/height四个值一起配合让绘图区比容器四周留出边距避免字号最大的词顶到边缘。textStyle里的fontFamily对中文词很重要单独写sans-serif也能显示但指定中文字体可以避免个别平台渲染出奇怪的字形。tooltip 里给一个箭头函数可以直接读到params.name和params.value。词云图没有 x/y 轴tooltip 默认回调的params就是当前词条对应的 data 项。这比用value回调再拼字符串更直观。2.3 数据格式与渲染流程wordCloud 系列的数据格式和 echarts 饼图非常接近数组里的对象必须有name和value也可以用itemStyle单独覆盖某个词的颜色、字体。它不接受[value, name]这样的元组形式也不会自动做分词。字段类型是否必填说明namestring是要展示的关键词支持中英文valuenumber是权重值越大字号越大itemStyle.colorstring否覆盖该词颜色itemStyleobject否该词独立样式优先级高于系列级 textStyle当setOption执行后echarts 会先把 series 配置传给 echarts-wordcloud 的布局器。布局器把所有词条按value从大到小排序从区域中心开始尝试放置每放一个词就与已放置的词做矩形碰撞检测直到没有重叠或达到最大尝试次数。所以数据量越大、gridSize越小计算耗时越长。理解这个渲染流程后面调参数时就不会只盯着视觉还会想到布局性能。3. echarts 词云图 wordCloud 系列配置参数详解从 gridSize 到 rotationStep3.1 布局参数决定词云密度和边界词云图的画面效果主要由布局参数决定而不是字体。第一次跑完 demo 后通常会遇到三个问题所有词挤在左上角、词与词粘在一起、边缘词被切掉分别对应sizeRange、gridSize、drawOutOfBound三个参数。sizeRange: [min, max]控制最小和最大字号单位是 px。value 最大值映射到 max最小值映射到 min。若数据里最大词频和最小词频相差很大建议先做归一化否则长尾词的字体几乎看不见。若所有 value 都接近画布上的字会显得大小拉不开可以把 range 跨度拉大比如[12, 80]。gridSize是布局时移动的步长也是词与词之间最小间隙。默认值是 8数值小会让布局更紧凑但碰撞检测次数会显著上升数值大则词间距变大图表更稀疏。drawOutOfBound默认 false绘制时会把超出边界的词裁掉。如果设成 true接近边缘的词可能只显示一半建议保持 false。参数默认值典型范围调参方向sizeRange[12, 60][10, 80]词频差异大时调大 min/max 跨度gridSize84 ~ 20太密或太疏时调整drawOutOfBoundfalsetrue/false边缘单词被截断就检查此项width / height75%70% ~ 100%留边距或铺满画布需要特别注意的是这些参数修改后词云布局会完全重排。如果只是想微调优先改gridSize它不影响字号映射只影响间距。left、top支持center和百分比width、height建议用百分比这样在chart.resize()后能跟随容器缩放。3.2 旋转与字体参数让中文词云不歪七扭八rotationRange和rotationStep是一对配合使用的参数。rotationRange只会从rotationStep的倍数中取角度例如[-90, 90]配45候选角度是 -90、-45、0、45、90。若设置[0, 0]所有词横排。中文词云更适合把rotationStep设成 90只有横竖两个方向读起来更整齐英文词云可以保留 45。rotationStep越小候选越多布局器需要多尝试几种角度计算量也会上来。textStyle.fontFamily不要在 CSS 里给 canvas 设置canvas 的字体渲染不继承页面字体必须直接传给词云图。textStyle.fontWeight全局加粗即可如果想突出高权重词可以在data里给对应词条设置更细粒度的样式。color支持函数这是词云图最常见的玩法随机取色时控制一下饱和度和亮度避免和背景混在一起。textStyle: { fontFamily: Microsoft YaHei, fontWeight: bold, color: () { const hue Math.round(Math.random() * 360); return hsl(${hue}, 60%, 45%); } }上面的color函数每次渲染都会执行返回一个基于色相随机生成的颜色。hsl比rgb更容易控制饱和度用60%以上的饱和度能保证词条在白色背景上有足够的对比度。fontFamily写成Microsoft YaHei适配常见 Windows 系统Mac 上会被 fallback 到系统中文字体不会乱码。3.3 通用配置联动tooltip、emphasis、animationwordCloud 系列也支持 echarts 的通用组件。tooltip可以显示词频emphasis控制鼠标悬浮高亮。不过它没有坐标系轴像dataZoom、legend对词云图没有意义。animation默认开启建议保留否则数据量大时切换数据会有明显的跳变感。emphasis.textStyle里可以设置textShadowColor和textShadowBlur比单纯改颜色更容易看出焦点。如果希望点击某个词后固定高亮需要手动重设数据因为dispatchAction的 highlight 在 wordCloud 上的稳定性不如柱状图。emphasis: { textStyle: { color: #ff6600, textShadowColor: rgba(255, 102, 0, 0.4), textShadowBlur: 8 } }, animation: true, animationDuration: 600最后提醒一个和grid相关的坑wordCloud 是独立系列不占grid也不响应xAxis/yAxis。如果你把 series 塞进一个配置了坐标系轴的图表里坐标轴会被画出来但词云图照样不理会。所以词云图页面里通常不配置 xAxis/yAxis直接给 series 指定绘图区域即可。4. echarts 词云图实战调整数据清洗、性能与点击事件4.1 先做文本清洗再做词频统计后端给的数据往往不是干净的name/value列表而是一堆日志或评论文本。这时候需要一个把文本切成词的函数。下面这个函数用正则实现简单切词中文按连续汉字切英文按连续字母数字切再过滤单字、停用词和低频词。function buildWordData(texts, topN 80) { const stopWords new Set([的, 了, 和, 是, 在, 我, 有]); const counter new Map(); texts.forEach(text { const tokens text.match(/[\u4e00-\u9fa5]|[a-zA-Z0-9_]/g) || []; tokens.forEach(token { const word token.toLowerCase(); if (word.length 2 || stopWords.has(word)) return; counter.set(word, (counter.get(word) || 0) 1); }); }); const list Array.from(counter.entries()) .map(([name, value]) ({ name, value })) .sort((a, b) b.value - a.value) .slice(0, topN); const max list[0]?.value || 1; return list.map(item ({ name: item.name, value: Math.max(1, Math.round((item.value / max) * 100)) })); }这个函数有三个可调点stopWords集合会影响高频功能词是否出现topN限制词条数量避免布局器处理几百上千个词最后的归一化把最大词频映射到 100。归一化很有必要比如长尾词 value 是 1最大是 5000不归一化的话sizeRange里最小字号几乎看不见。调参时可以先用归一化后的数据跑再回来改 sizeRange能少很多试错。如果想做到真正的语义分词常见做法是接后端词法分析前端只消费词频。浏览器自带的Intl.Segmenter在中文里能按词道理分词但兼容性还在爬坡生产环境慎用。提示如果params.value在 tooltip 里显示 undefined说明传给 series 的 data 缺了 value 字段。词云图的 value 不能像某些图表一样省略否则字号权重和 tooltip 都会失效。4.2 大数据量下的布局性能与 maskImage词云图的瓶颈在碰撞检测。每个词都要和已放置的词做矩形相交判断复杂度接近 O(n²)词条一多浏览器主线程就会长时间占用。通常用三个手段控制它第一是topN截断页面只展示最重要的 50100 个词第二是调大gridSize比如从 6 改到 10第三是固定容器大小避免频繁触发 resize 重排。词条数量推荐调整词数 300截断到 80gridSize 调大到 10词数 100300sizeRange 拉大rotationStep 设 90词数 50gridSize 调小到 4让布局更密maskImage是 echarts-wordcloud 提供的图形遮罩配置常见做法是准备一张和容器同比例的 PNG把词限制在图片轮廓内。使用它会让布局计算更慢因为每个候选位置都要判断图片 alpha 像素。图片不能带白色背景必须把轮廓区域保留为不透明、其余区域透明否则遮罩会变成整张矩形。传入的 maskImage 必须是已经加载完成的 HTMLImageElementconst img new Image(); img.onload () { chart.setOption({ series: [{ maskImage: img }] }); }; img.src ./cloud-mask.png;注意img.src的路径如果跨域canvas 会被污染后续chart.getDataURL()导出图片时会失败。压缩到 1000px 内再使用因为 mask 越大布局器需要判断的像素点越多主线程阻塞时间成倍增加。4.3 点击事件与高亮交互词云图只有在交互上给出反馈才是一个可交付的模块。最基础的交互是点击词条后跳转或筛选。在 setOption 之后注册 click 事件即可。词云图的params.seriesType是wordCloud数据格式和饼图类似直接用params.name取点击的词。chart.on(click, (params) { if (params.seriesType ! wordCloud) return; const seriesData option.series[0].data; const nextData seriesData.map((word) ({ ...word, itemStyle: word.name params.name ? { color: #ff6600 } : { color: #d9d9d9 } })); chart.setOption({ series: [{ data: nextData }] }); });这里把所有词重设一遍颜色点击的词变橙色其余变灰。虽然会触发整个 series 更新但权重没变词的位置基本会维持原位体感是可接受的。如果只想做 hover 高亮优先使用emphasis不要给每个词绑定 mouseover词云图词条多事件监听过多会加重浏览器负担。在 echarts 数据可视化项目里词云图经常和饼图、地图放在同一个页面做多视图联动面试题也常问三者交互差异。词云图的点击事件更适合做下钻条件比如点击“前端”就把表格和详情列表筛选成前端相关内容。选中状态不要依赖 dispatchAction用修改 data 的方式更可控。5. 词云图交付验证用 finished 事件和 getDataURL 导出图片5.1 通过 finished 事件拿到渲染结果词云图第一次渲染是异步完成的。直接在setOption后面同步调用getDataURL有时会拿到空白图。正确做法是监听finished事件等动画和布局流程全部结束后再导出。let exported false; chart.on(finished, () { if (exported) return; exported true; const url chart.getDataURL({ type: png, pixelRatio: 2, backgroundColor: #ffffff }); document.getElementById(preview).src url; });pixelRatio设为 2 可以让导出图片在 2 倍屏上不模糊。backgroundColor填#ffffff否则透明背景在部分浏览器预览里看起来像黑图。用exported标志位避免后续每次重绘都重新导出因为词云交互触发 setOption 后finished事件还会再次触发。5.2 用两套 sizeRange 做方案评审交付前经常要在横排和带旋转的两套方案里选。常见做法是用chart.setOption覆盖系列参数并开启notMerge: true让图表完全重新走一遍布局。chart.setOption({ series: [{ type: wordCloud, rotationRange: [0, 0], rotationStep: 0, sizeRange: [20, 80], gridSize: 6, data: words }] }, { notMerge: true });注意覆盖时type: wordCloud和data都不能丢notMerge: true会丢弃上一次 option 里所有系列配置。生产环境不要用notMerge做高频更新它会让组件状态全部重建开销比正常 setOption 大不少。最后一个小技巧如果某个词在图上一直消失先不要怀疑 sizeRange把gridSize临时调大到 20 再跑一遍。调大网格后单个词占的格子变少长尾词更容易被放到空隙里。同一个 data 在 gridSize 改大后仍然消失说明是数据侧需要过滤或提升权重如果改大后出现了说明画布太挤再加最小字号或减少词条数量即可。本文还有配套的精品资源点击获取
ECharts词云图从入门到实战：配置参数与性能优化指南
简介针对前端数据可视化场景这份词云图开发资源整理了完整的可运行示例与配置参数说明适合需要快速掌握词云图实现的前端开发者及数据分析师。压缩包内共6个文件包含3个JavaScript脚本、1个HTML页面、1份使用说明文档和1张效果示例图整体仅233KB轻量且结构紧凑直接打开HTML即可查看效果。脚本已集成词云图所需的常用依赖免去单独引入的繁琐资源已有11883人学习下载适合作为实际项目的基础模板。内容从基础环境引入到词云图数据组织、初始化与配置重点详解形状、字体大小范围、旋转角度、文字颜色等核心参数并附带高级应用思路便于在新闻分析、社区话题挖掘等场景灵活复用。资源内附使用说明文档对示例结构、参数含义和常见问题做了梳理整体循序渐进帮助刚接触词云图的开发者高效上手。1. echarts 词云图不是内置图表demo 先跑通才是关键把一堆用户反馈倒进画布高频词自动呈现大小错落的视觉层级这是词云图比柱状图更直观的地方。但 echarts 官方包并不包含词云图必须借助 echarts-wordcloud 扩展所以很多人第一次做前端 echarts 词云图时卡在安装、注册和系列类型上。一个能直接打开运行的 demo比反复看文档更解决问题配置参数则是把 demo 改成可用产品的最后一段距离。下面先给一个最小可运行 demo再逐个拆解 wordCloud 系列的布局、文本、高亮参数最后把数据清洗、点击事件和性能调优串起来。适合前端开发、数据可视化初学者也适合在准备前端面试时把 echarts 词云图的原理与配置讲完整。2. echarts 词云图 demo 的最小可运行页面与数据格式2.1 安装与引入先搞清楚 echarts-wordcloud 是怎么挂载的echarts-wordcloud 不是一个独立的图表库它是在 echarts 的扩展机制上开发的插件。引入之后它会向 echarts 注册一个名为wordCloud的系列类型所以在写配置时只需要把series[0].type设置为wordCloud。如果跳过这个扩展echarts 主包遇到wordCloud会直接抛错Series wordCloud is not used。为了不卡在第一步这里给出两种最常见的引入方式。在 npm 工程里echarts-wordcloud 作为 echarts 的扩展包存在安装 echarts 和它两个包就够了。对于 Vue 或 React 项目推荐在入口文件里统一引入并挂到全局而不是每个组件都注册一遍。如果只是本地调试一个独立 demo用 CDN 方式更快关键是先加载 echarts 主包再加载 echarts-wordcloud顺序反了会出现扩展注册不到全局 echarts 对象上的问题。npm install echarts echarts-wordcloudimport * as echarts from echarts; import echarts-wordcloud;上述命令先把两个依赖装进 package.json然后在代码里import echarts-wordcloud。这个扩展包内部会读取全局的 echarts 构造函数并在其上注册wordCloud系列。所以页面里只要出现一次扩展引用后续所有chart.setOption都能识别type: wordCloud。用 CDN 加载echarts.min.js后再加载echarts-wordcloud.min.js效果和 npm 引入一致只是把依赖粒度放到了 script 标签层级。2.2 一个可以直接保存运行的完整 HTML demo下面这个 HTML 文件可以保存成wordcloud-demo.html双击打开就能看到词云图。数据是前端开发相关的词频示例把它替换成自己的业务词就可以。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / titleecharts 词云图完整 demo/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script script srchttps://cdn.jsdelivr.net/npm/echarts-wordcloud2/dist/echarts-wordcloud.min.js/script /head body div idword-cloud stylewidth: 800px; height: 600px/div script const words [ { name: 前端, value: 98 }, { name: JavaScript, value: 86 }, { name: TypeScript, value: 72 }, { name: Vue, value: 66 }, { name: React, value: 63 }, { name: CSS, value: 52 }, { name: ECharts, value: 48 }, { name: 性能优化, value: 42 }, { name: 工程化, value: 37 }, { name: 组件化, value: 31 }, { name: 数据可视化, value: 28 }, { name: 浏览器, value: 25 }, { name: 网络协议, value: 22 }, { name: 构建工具, value: 18 }, { name: 调试, value: 15 } ]; const chart echarts.init(document.getElementById(word-cloud)); chart.setOption({ tooltip: { formatter: (params) ${params.name}br/词频${params.value} }, series: [{ type: wordCloud, shape: circle, left: center, top: center, width: 80%, height: 80%, sizeRange: [14, 60], rotationRange: [-90, 90], rotationStep: 45, gridSize: 8, drawOutOfBound: false, textStyle: { fontFamily: Arial, Microsoft YaHei, sans-serif, fontWeight: bold, color: () { const r Math.round(Math.random() * 160); const g Math.round(Math.random() * 160); const b Math.round(Math.random() * 160); return rgb(${r},${g},${b}); } }, emphasis: { textStyle: { color: #ff6600 } }, data: words }] }); /script /body /html容器#word-cloud建议给固定宽高因为 echarts.init 在容器没有宽高时会拿到 0图表的 canvas 不会被绘制。数据数组中每一项的结构是{ name, value }name是展示的词value控制字号权重。series.type写成wordCloud才能触发扩展里的布局算法。left/top/width/height四个值一起配合让绘图区比容器四周留出边距避免字号最大的词顶到边缘。textStyle里的fontFamily对中文词很重要单独写sans-serif也能显示但指定中文字体可以避免个别平台渲染出奇怪的字形。tooltip 里给一个箭头函数可以直接读到params.name和params.value。词云图没有 x/y 轴tooltip 默认回调的params就是当前词条对应的 data 项。这比用value回调再拼字符串更直观。2.3 数据格式与渲染流程wordCloud 系列的数据格式和 echarts 饼图非常接近数组里的对象必须有name和value也可以用itemStyle单独覆盖某个词的颜色、字体。它不接受[value, name]这样的元组形式也不会自动做分词。字段类型是否必填说明namestring是要展示的关键词支持中英文valuenumber是权重值越大字号越大itemStyle.colorstring否覆盖该词颜色itemStyleobject否该词独立样式优先级高于系列级 textStyle当setOption执行后echarts 会先把 series 配置传给 echarts-wordcloud 的布局器。布局器把所有词条按value从大到小排序从区域中心开始尝试放置每放一个词就与已放置的词做矩形碰撞检测直到没有重叠或达到最大尝试次数。所以数据量越大、gridSize越小计算耗时越长。理解这个渲染流程后面调参数时就不会只盯着视觉还会想到布局性能。3. echarts 词云图 wordCloud 系列配置参数详解从 gridSize 到 rotationStep3.1 布局参数决定词云密度和边界词云图的画面效果主要由布局参数决定而不是字体。第一次跑完 demo 后通常会遇到三个问题所有词挤在左上角、词与词粘在一起、边缘词被切掉分别对应sizeRange、gridSize、drawOutOfBound三个参数。sizeRange: [min, max]控制最小和最大字号单位是 px。value 最大值映射到 max最小值映射到 min。若数据里最大词频和最小词频相差很大建议先做归一化否则长尾词的字体几乎看不见。若所有 value 都接近画布上的字会显得大小拉不开可以把 range 跨度拉大比如[12, 80]。gridSize是布局时移动的步长也是词与词之间最小间隙。默认值是 8数值小会让布局更紧凑但碰撞检测次数会显著上升数值大则词间距变大图表更稀疏。drawOutOfBound默认 false绘制时会把超出边界的词裁掉。如果设成 true接近边缘的词可能只显示一半建议保持 false。参数默认值典型范围调参方向sizeRange[12, 60][10, 80]词频差异大时调大 min/max 跨度gridSize84 ~ 20太密或太疏时调整drawOutOfBoundfalsetrue/false边缘单词被截断就检查此项width / height75%70% ~ 100%留边距或铺满画布需要特别注意的是这些参数修改后词云布局会完全重排。如果只是想微调优先改gridSize它不影响字号映射只影响间距。left、top支持center和百分比width、height建议用百分比这样在chart.resize()后能跟随容器缩放。3.2 旋转与字体参数让中文词云不歪七扭八rotationRange和rotationStep是一对配合使用的参数。rotationRange只会从rotationStep的倍数中取角度例如[-90, 90]配45候选角度是 -90、-45、0、45、90。若设置[0, 0]所有词横排。中文词云更适合把rotationStep设成 90只有横竖两个方向读起来更整齐英文词云可以保留 45。rotationStep越小候选越多布局器需要多尝试几种角度计算量也会上来。textStyle.fontFamily不要在 CSS 里给 canvas 设置canvas 的字体渲染不继承页面字体必须直接传给词云图。textStyle.fontWeight全局加粗即可如果想突出高权重词可以在data里给对应词条设置更细粒度的样式。color支持函数这是词云图最常见的玩法随机取色时控制一下饱和度和亮度避免和背景混在一起。textStyle: { fontFamily: Microsoft YaHei, fontWeight: bold, color: () { const hue Math.round(Math.random() * 360); return hsl(${hue}, 60%, 45%); } }上面的color函数每次渲染都会执行返回一个基于色相随机生成的颜色。hsl比rgb更容易控制饱和度用60%以上的饱和度能保证词条在白色背景上有足够的对比度。fontFamily写成Microsoft YaHei适配常见 Windows 系统Mac 上会被 fallback 到系统中文字体不会乱码。3.3 通用配置联动tooltip、emphasis、animationwordCloud 系列也支持 echarts 的通用组件。tooltip可以显示词频emphasis控制鼠标悬浮高亮。不过它没有坐标系轴像dataZoom、legend对词云图没有意义。animation默认开启建议保留否则数据量大时切换数据会有明显的跳变感。emphasis.textStyle里可以设置textShadowColor和textShadowBlur比单纯改颜色更容易看出焦点。如果希望点击某个词后固定高亮需要手动重设数据因为dispatchAction的 highlight 在 wordCloud 上的稳定性不如柱状图。emphasis: { textStyle: { color: #ff6600, textShadowColor: rgba(255, 102, 0, 0.4), textShadowBlur: 8 } }, animation: true, animationDuration: 600最后提醒一个和grid相关的坑wordCloud 是独立系列不占grid也不响应xAxis/yAxis。如果你把 series 塞进一个配置了坐标系轴的图表里坐标轴会被画出来但词云图照样不理会。所以词云图页面里通常不配置 xAxis/yAxis直接给 series 指定绘图区域即可。4. echarts 词云图实战调整数据清洗、性能与点击事件4.1 先做文本清洗再做词频统计后端给的数据往往不是干净的name/value列表而是一堆日志或评论文本。这时候需要一个把文本切成词的函数。下面这个函数用正则实现简单切词中文按连续汉字切英文按连续字母数字切再过滤单字、停用词和低频词。function buildWordData(texts, topN 80) { const stopWords new Set([的, 了, 和, 是, 在, 我, 有]); const counter new Map(); texts.forEach(text { const tokens text.match(/[\u4e00-\u9fa5]|[a-zA-Z0-9_]/g) || []; tokens.forEach(token { const word token.toLowerCase(); if (word.length 2 || stopWords.has(word)) return; counter.set(word, (counter.get(word) || 0) 1); }); }); const list Array.from(counter.entries()) .map(([name, value]) ({ name, value })) .sort((a, b) b.value - a.value) .slice(0, topN); const max list[0]?.value || 1; return list.map(item ({ name: item.name, value: Math.max(1, Math.round((item.value / max) * 100)) })); }这个函数有三个可调点stopWords集合会影响高频功能词是否出现topN限制词条数量避免布局器处理几百上千个词最后的归一化把最大词频映射到 100。归一化很有必要比如长尾词 value 是 1最大是 5000不归一化的话sizeRange里最小字号几乎看不见。调参时可以先用归一化后的数据跑再回来改 sizeRange能少很多试错。如果想做到真正的语义分词常见做法是接后端词法分析前端只消费词频。浏览器自带的Intl.Segmenter在中文里能按词道理分词但兼容性还在爬坡生产环境慎用。提示如果params.value在 tooltip 里显示 undefined说明传给 series 的 data 缺了 value 字段。词云图的 value 不能像某些图表一样省略否则字号权重和 tooltip 都会失效。4.2 大数据量下的布局性能与 maskImage词云图的瓶颈在碰撞检测。每个词都要和已放置的词做矩形相交判断复杂度接近 O(n²)词条一多浏览器主线程就会长时间占用。通常用三个手段控制它第一是topN截断页面只展示最重要的 50100 个词第二是调大gridSize比如从 6 改到 10第三是固定容器大小避免频繁触发 resize 重排。词条数量推荐调整词数 300截断到 80gridSize 调大到 10词数 100300sizeRange 拉大rotationStep 设 90词数 50gridSize 调小到 4让布局更密maskImage是 echarts-wordcloud 提供的图形遮罩配置常见做法是准备一张和容器同比例的 PNG把词限制在图片轮廓内。使用它会让布局计算更慢因为每个候选位置都要判断图片 alpha 像素。图片不能带白色背景必须把轮廓区域保留为不透明、其余区域透明否则遮罩会变成整张矩形。传入的 maskImage 必须是已经加载完成的 HTMLImageElementconst img new Image(); img.onload () { chart.setOption({ series: [{ maskImage: img }] }); }; img.src ./cloud-mask.png;注意img.src的路径如果跨域canvas 会被污染后续chart.getDataURL()导出图片时会失败。压缩到 1000px 内再使用因为 mask 越大布局器需要判断的像素点越多主线程阻塞时间成倍增加。4.3 点击事件与高亮交互词云图只有在交互上给出反馈才是一个可交付的模块。最基础的交互是点击词条后跳转或筛选。在 setOption 之后注册 click 事件即可。词云图的params.seriesType是wordCloud数据格式和饼图类似直接用params.name取点击的词。chart.on(click, (params) { if (params.seriesType ! wordCloud) return; const seriesData option.series[0].data; const nextData seriesData.map((word) ({ ...word, itemStyle: word.name params.name ? { color: #ff6600 } : { color: #d9d9d9 } })); chart.setOption({ series: [{ data: nextData }] }); });这里把所有词重设一遍颜色点击的词变橙色其余变灰。虽然会触发整个 series 更新但权重没变词的位置基本会维持原位体感是可接受的。如果只想做 hover 高亮优先使用emphasis不要给每个词绑定 mouseover词云图词条多事件监听过多会加重浏览器负担。在 echarts 数据可视化项目里词云图经常和饼图、地图放在同一个页面做多视图联动面试题也常问三者交互差异。词云图的点击事件更适合做下钻条件比如点击“前端”就把表格和详情列表筛选成前端相关内容。选中状态不要依赖 dispatchAction用修改 data 的方式更可控。5. 词云图交付验证用 finished 事件和 getDataURL 导出图片5.1 通过 finished 事件拿到渲染结果词云图第一次渲染是异步完成的。直接在setOption后面同步调用getDataURL有时会拿到空白图。正确做法是监听finished事件等动画和布局流程全部结束后再导出。let exported false; chart.on(finished, () { if (exported) return; exported true; const url chart.getDataURL({ type: png, pixelRatio: 2, backgroundColor: #ffffff }); document.getElementById(preview).src url; });pixelRatio设为 2 可以让导出图片在 2 倍屏上不模糊。backgroundColor填#ffffff否则透明背景在部分浏览器预览里看起来像黑图。用exported标志位避免后续每次重绘都重新导出因为词云交互触发 setOption 后finished事件还会再次触发。5.2 用两套 sizeRange 做方案评审交付前经常要在横排和带旋转的两套方案里选。常见做法是用chart.setOption覆盖系列参数并开启notMerge: true让图表完全重新走一遍布局。chart.setOption({ series: [{ type: wordCloud, rotationRange: [0, 0], rotationStep: 0, sizeRange: [20, 80], gridSize: 6, data: words }] }, { notMerge: true });注意覆盖时type: wordCloud和data都不能丢notMerge: true会丢弃上一次 option 里所有系列配置。生产环境不要用notMerge做高频更新它会让组件状态全部重建开销比正常 setOption 大不少。最后一个小技巧如果某个词在图上一直消失先不要怀疑 sizeRange把gridSize临时调大到 20 再跑一遍。调大网格后单个词占的格子变少长尾词更容易被放到空隙里。同一个 data 在 gridSize 改大后仍然消失说明是数据侧需要过滤或提升权重如果改大后出现了说明画布太挤再加最小字号或减少词条数量即可。本文还有配套的精品资源点击获取
