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

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



仔细看了下返回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，源码目录如下：



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



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



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

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

var data = seriesModel.getData();

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





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





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



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