echarts-wordcloud绘制词云图之空串问题。

ゞ浴缸里的玫瑰 2022-09-29 12:54 786阅读 0赞

最近在使用echarts-wordcloud绘制词云图，在开发环境中表现算是正常，但部署到生产环境上来看，发现云图并非预期，按实际的业务场景，这些关键词至少都是有密度区分的，不应该会展示为这样。

![Center][]

仔细看了下返回JSON字串是这样的，后来想想应该是第一个空串有关，而且这个空串的出现权重非常大。

[ { "name": "", "value": "6282" }, { "name": "企业管理咨询", "value": "198" }, { "name": "物业管理", "value": "180" }, { "name": "商务信息咨询", "value": "174" }, { "name": "企业形象策划", "value": "147" }, { "name": "会议服务", "value": "123" }, { "name": "展览展示服务", "value": "119" }, { "name": "市场营销策划", "value": "106" }, { "name": "批发和零售业", "value": "105" }, { "name": "货物进出口", "value": "94" }, { "name": "会务服务", "value": "92" }, { "name": "房屋租赁", "value": "87" }, { "name": "国内贸易", "value": "86" }, { "name": "企业营销策划", "value": "76" }, { "name": "投资管理", "value": "76" }, { "name": "汽车租赁", "value": "74" }, { "name": "货物及技术进出口", "value": "72" }, { "name": "日用百货", "value": "70" }, { "name": "货物进出口、技术进出口", "value": "68" }, { "name": "开展经营活动", "value": "68" }, { "name": "软件开发", "value": "67" }, { "name": "五金交电", "value": "66" }, { "name": "房地产开发", "value": "63" }, { "name": "经济信息咨询", "value": "62" }, { "name": "普通货运", "value": "62" }, { "name": "投资咨询", "value": "61" }, { "name": "商务咨询", "value": "55" }, { "name": "设计、制作、代理、发布广告", "value": "55" }, { "name": "会议及展览服务", "value": "52" }, { "name": "礼仪服务", "value": "52" }, { "name": "电子产品", "value": "49" }, { "name": "经济贸易咨询", "value": "49" }, { "name": "计算机系统集成", "value": "48" }, { "name": "技术推广服务", "value": "48" }, { "name": "酒店管理", "value": "45" }, { "name": "房地产开发经营", "value": "44" }, { "name": "技术进出口", "value": "44" }, { "name": "从事货物及技术的进出口业务", "value": "41" }, { "name": "机械设备租赁", "value": "41" }, { "name": "企业管理", "value": "41" }, { "name": "园林绿化工程", "value": "41" }, { "name": "市场调查", "value": "40" }, { "name": "资产管理", "value": "39" }, { "name": "仓储服务", "value": "37" }, { "name": "汽车销售", "value": "37" }, { "name": "实业投资", "value": "37" }, { "name": "在有效期限内经营", "value": "37" }, { "name": "摄影服务", "value": "35" }, { "name": "承办展览展示活动", "value": "34" }, { "name": "国内一般贸易", "value": "34" }, { "name": "承办展览展示", "value": "33" }, { "name": "组织文化艺术交流活动（不含演出）", "value": "32" }, { "name": "翻译服务", "value": "31" }, { "name": "房地产经纪", "value": "31" }, { "name": "计算机系统服务", "value": "31" }, { "name": "建筑劳务分包", "value": "31" }, { "name": "餐饮服务", "value": "30" }, { "name": "餐饮管理", "value": "30" }, { "name": "货运代理", "value": "30" }, { "name": "票务代理", "value": "30" } ];

为了进一步确认这个问题，本着专研的精神，我下了echarts-wordcloud的开发源码，是webpack进行打包的，webpack打包配置参见源码中的webpack.config.js，源码目录如下：

![Center 1][]

作为echarts的插件，如果你想自己修改下源码并编译打包，还是需要下载echart的开发，这里我使用了npm进行下载操作，或者去github上clone再解压。

![Center 2][]

否则，你直接webpack打包就会出现这种错

![Center 3][]

当然了，我上面说的这些只是供希望自己重新编译打包echarts-wordcloud做的一些准备工作，你也可以直接进行调试。下面说我们调试的结果，可以看到

data是ECharts中的List，这个定义在echarts\\src\\data目录下。

var data = seriesModel.getData();

![Center 4][]

valueExtent是我们传递的JSON字串中value的上下限。

![Center 5][]

![Center 6][]

计算之后，空串的权重变成了最大的60，就是echarts-wordcloud配置参数的sizeRange，关于option配置的各个参数说明，可参考源码中的README.md

![Center 7][]

![Center 8][]

修改下过滤下返回的JSON字串，词云效果图与预期相符。

![Center 9][]

当然了，你也可以修改echarts-wordCloud或者echarts的源码，然后再打包，就像下面这样。

![Center 10][]

[Center]: /images/20220708/c5bcfee82816401eb32faa5566033f69.png
[Center 1]: /images/20220708/2a1f29ebbf614930abc241c79c79fedc.png
[Center 2]: /images/20220708/825ca86f00e44efca52e3813caac7411.png
[Center 3]: /images/20220708/3283369a70f14741aa3adf2ec091f213.png
[Center 4]: /images/20220708/51107aa618c54f9ab898ed52d7d3b099.png
[Center 5]: /images/20220708/d84e931f771447208048393c59203618.png
[Center 6]: /images/20220708/b1c552787f034ba6ae27a7835c585c23.png
[Center 7]: /images/20220708/13ec5bf669d449be8a0e53310f74bd0e.png
[Center 8]: /images/20220708/5366c4e1308d47fcb7c55d64a21fbe12.png
[Center 9]: /images/20220708/f129efb128264e8f85f4295df643fcce.png
[Center 10]: /images/20220708/aa956a36fa1f40d18fd700ca5b264b53.png