百度Ecahrts词云一步到位+点击跳转事件

一、获取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;
                    }
                }
            }

效果展示：