云图 jQCloud

Posted 2020-10-27 caolingyi

var data = [
		[\'北京\', 8, 111],
		[\'台湾\', 1, 111]
];

var string_ = "";

function SplitKeyWord() {
    for (var i = 0; i < data.length; i++) {
        var string_f = data[i][0];
        var string_n = data[i][1];
        string_ += "{text: \'" + string_f + "\', weight: \'" + string_n + "\',html: {\'class\': \'span_list\',onmouseover:\'on_mouseover(this,event)\',onmouseout:\'on_mouseout()\',onclick:\'ClickGJC(this)\'}},";
    }
}
function on_mouseover(e, ev) {
    var txt = $(e).html();
    ev = ev || event;

    ey = ev.clientY + 320;
    //alert(ey);
    $.each(data, function (i, item) {
        if (txt == item[0]) {
            var html = item[0] + "<br />点击数<br />" + item[1] + "<br />" + item[1];
            $("#my_favorite_latin_words").after("<div class=\'append_div\' style=\'display:none;left:" + ev.clientX + "px; top:" + ey + "px; \'>" + html + "</div>");
            return;
        }

    });
}
function ShowKeyWords() {
    data = keywordsdata;
    SplitKeyWord();
    var string_list = string_;
    var word_list = eval("[" + string_list + "]");
    $("#my_favorite_latin_words").jQCloud(word_list);
}


function on_mouseout() {
    $(".append_div").remove();
}

　jqcloud-1.0.4.js

<div id="my_favorite_latin_words" style="width: 330px; margin: 0px auto; height: 330px;"></div>

　　

 $.ajax({
            type: \'POST\',
            url: "/Home/SearchYuntu",
            data: {
                //tempdata: $(".list_sea").text()
            },
            success: function (data) {
                var jsonData = JSON.parse(data)
                if (jsonData != null) {
                    if (jsonData.length > 0) {
                        for (var i = 0; i < jsonData.length; i++) {
                            keywordsdata.push(new Array(jsonData[i].ID, jsonData[i].UsingCount, jsonData[i].DisplayIndex));
                        }
                    }
                }
                ShowKeyWords();

            }
        });