一、获取Echarts 组件
Echarts官网 -->
当然，调用Echarts需要js文件，一般人找不到（例如我），去csdn的话没有积分（难受)
所有提供GitHub下载地址：
下载Echarts的组件：
版本是5.0以上：https://github.com/apache/echarts
echars.js 等文件在压缩包的dist目录下方
下载词云:
词云2.0版本： https://github.com/ecomfe/echarts-wordcloud
词云1.2版本：https://github.com/ecomfe/echarts-wordcloud/tree/1.1.2
echarts-wordcloud.js同上在dist目录下
注意：
echarts在使用echarts-wordcloud时，会有一个版本问题：
echarts5版本以下的需要下载echarts-wordcloud1.0版本
echarts5及以上的下载echarts-wordcloud2.0版本
Tips:GitHub 加速器 帮你快速链接GitHub DevSidecar https://gitee.com/docmirror/dev-sidecar
二、实现词云
注意: echart5.0及其以上和及其以下有些大的变动，需要引起注意。在词云当中就会遇到。
在我的以下示例当中应用的是5.0以上版本
在TextStyle 属性下有所不同，详见 --> 【Bug解决】echarts词云图设置随机颜色失效
其他不同请自行体会（嘿嘿，我目前也不会）
引入js文件
<script src="js/echarts.js"></script>
<script src="js/echarts-wordcloud.js"></script>
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>词云图</title>
<script src="js/echarts.js"></script>
<script src="js/echarts-wordcloud.js"></script>
</head>
<body>
<div id="main" border:1px style="width: 800px;height: 600px;"></div>
<script>
var mycharts = echarts.init(document.getElementById("main"));
var ecConfig = echarts.config;
mycharts.on('click', eConsole);
function eConsole(param) {
if(typeof param.seriesIndex != 'undefined') {
switch(param.name) { //简单的switch，大家应该能够明白怎么设置
case "肿瘤":
window.location.href = "https://jbk.39.net/bw/zhongliuke/";
// window.open("https://jbk.39.net/bw/zhongliuke/", "_blank");//在新页面打开
break;
default:
break;
}
}
}
//用来存储数据
var jsonlist = [];
jsonlist.push({
"name": "癫痫病",
"value": 1446
}, {
"name": "白癜风",
"value": 928
}, {
"name": "无痛**",
"value": 906
}, {
"name": "早泄",
"value": 825
}, {
"name": "不孕不育",
"value": 514
}, {
"name": "尖锐湿疣",
"value": 486
}, {
"name": "肿瘤",
"value": 5999
}, {
"name": "植发",
"value": 489
}, {
"name": "乙肝",
"value": 468
}, {
"name": "偏头痛",
"value": 654
}, {
"name": "烟雾病",
"value": 654
}, {
"name": "支气管炎",
"value": 732
}, {
"name": "风湿病",
"value": 1437
}, {
"name": "骨科",
"value": 422
}, {
"name": "小儿脑瘫",
"value": 981
}, {
"name": "糖尿病",
"value": 331
}, {
"name": "血管瘤",
"value": 313
}, {
"name": "股骨头坏死",
"value": 307
}, {
"name": "中耳炎",
"value": 654
}, {
"name": "高血压",
"value": 621
}, {
"name": "艾滋病",
"value": 438
}, {
"name": "手足口病",
"value": 957
}, {
"name": "前列腺炎",
"value": 927
}, {
"name": "宫颈糜烂",
"value": 908
}, {
"name": "肺结核",
"value": 693
}, {
"name": "宫颈癌",
"value": 611
}, {
"name": "肾虚",
"value": 512
}, {
"name": "痔疮",
"value": 382
}, {
"name": "宫外孕",
"value": 312
}, {
"name": "荨麻疹",
"value": 600
}, {
"name": "胃癌",
"value": 654
}, {
"name": "湿疹",
"value": 621
}, {
"name": "劲椎病",
"value": 321
}, {
"name": "霉菌性阴道炎",
"value": 1331
}, {
"name": "早泄",
"value": 941
}, {
"name": "子宫肌瘤",
"value": 585
}, {
"name": "梅毒",
"value": 473
}, {
"name": "口臭",
"value": 358
}, {
"name": "白血病",
"value": 246
}, {
"name": "腰椎间盘突出",
"value": 207
});
var option = {
title: {
text: '高频疾病',
x: 'center',
},
tooltip: {},
series: [{
type: 'wordCloud',
gridSize: 6,//字符间距
sizeRange: [14, 60], //字体大小
shape: 'pentagon', //形状
width: 800,
height: 600,
grid: {
top: "5px",
left: "5px",
right: "5px",
bottom: "5px",
backgroundColor: '#fff',
width: "auto", //图例宽度
height: "100%", //图例高度
},
drawOutOfBound: false,
textStyle: {
color: function() {
return 'rgb(' + [Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
]
.join(',') + ')';
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: jsonlist
}]
};
mycharts.setOption(option);
</script>
</body>
</html>
点击事件实现主要是这几行代码：
var ecConfig = echarts.config;
mycharts.on('click', eConsole);
function eConsole(param) {
if(typeof param.seriesIndex != 'undefined') {
switch(param.name) { //简单的switch，大家应该能够明白怎么设置
case "肿瘤":
window.location.href = "https://jbk.39.net/bw/zhongliuke/";
// window.open("https://jbk.39.net/bw/zhongliuke/", "_blank");//在新页面打开
break;
default:
break;
}
}
}
效果展示：
点击之后 肿瘤 之后跳转到目的地址
参考资料：
echart字符云之添加点击事件
echarts实现词云效果，可点击其中某个字符
echarts实现词云图表，及参数配置详解
【Bug解决】echarts词云图设置随机颜色失效
echarts实现词云
echarts 简单词云制作，自定义图案词云echarts-wordcloud.js
