84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
1.问题 项目中需要用到字符云 我在项目中导入的是echarts3 echarts3中没有wordCloud 的api 同时 下载的echarts3中也没有wordCloud.js 只有2中有wordCloud.js 不知道在echarts3中怎么使用echarts2中的wordCloud 主要是echarts2跟3还是有很大区别的 首先 导入方式不一样 其次 api很多东西都不一样 再者 我不能两个echarts都导入吧2.报错
3.希望 希望可以在这方面有经验的大神可以给个解决方法 谢过
学习是最好的投资!
自己已解决 引入外部文件 jqcloud
jqcloud
/*! * jQCloud Plugin for jQuery * * Version 1.0.4 * * Copyright 2011, Luca Ongaro * Licensed under the MIT license. * * Date: 2013-05-09 18:54:22 +0200 */ (function( $ ) { "use strict"; $.fn.jQCloud = function(word_array, options) { // Reference to the container element var $this = this; // Namespace word ids to avoid collisions between multiple clouds var cloud_namespace = $this.attr('id') || Math.floor((Math.random()*1000000)).toString(36); // Default options value var default_options = { width: $this.width(), height: $this.height(), center: { x: ((options && options.width) ? options.width : $this.width()) / 2.0, y: ((options && options.height) ? options.height : $this.height()) / 2.0 }, delayedMode: word_array.length > 50, shape: false, // It defaults to elliptic shape encodeURI: true, removeOverflowing: true, isSelfColor:false,//是否自定义样式 isSelfRotate:false//是否自定义角度 }; options = $.extend(default_options, options || {}); // Add the "jqcloud" class to the container for easy CSS styling, set container width/height $this.addClass("jqcloud").width(options.width).height(options.height); // Container's CSS position cannot be 'static' if ($this.css("position") === "static") { $this.css("position", "relative"); } var drawWordCloud = function() { // Helper function to test if an element overlaps others var hitTest = function(elem, other_elems) { // Pairwise overlap detection var overlapping = function(a, b) { if (Math.abs(2.0*a.offsetLeft + a.offsetWidth - 2.0*b.offsetLeft - b.offsetWidth) < a.offsetWidth + b.offsetWidth) { if (Math.abs(2.0*a.offsetTop + a.offsetHeight - 2.0*b.offsetTop - b.offsetHeight) < a.offsetHeight + b.offsetHeight) { return true; } } return false; }; var i = 0; // Check elements for overlap one by one, stop and return false as soon as an overlap is found for(i = 0; i < other_elems.length; i++) { if (overlapping(elem, other_elems[i])) { return true; } } return false; }; // Make sure every weight is a number before sorting for (var i = 0; i < word_array.length; i++) { word_array[i].weight = parseFloat(word_array[i].weight, 10); } // Sort word_array from the word with the highest weight to the one with the lowest word_array.sort(function(a, b) { if (a.weight < b.weight) {return 1;} else if (a.weight > b.weight) {return -1;} else {return 0;} }); var step = (options.shape === "rectangular") ? 18.0 : 2.0, already_placed_words = [], aspect_ratio = options.width / options.height; // Function to draw a word, by moving it in spiral until it finds a suitable empty place. This will be iterated on each word. var drawOneWord = function(index, word) { // Define the ID attribute of the span that will wrap the word, and the associated jQuery selector string var word_id = cloud_namespace + "_word_" + index, word_selector = "#" + word_id, angle = 6.28 * Math.random(), radius = 0.0, // Only used if option.shape == 'rectangular' steps_in_direction = 0.0, quarter_turns = 0.0, weight = 5, custom_class = "", inner_html = "", word_span; // Extend word html options with defaults word.html = $.extend(word.html, {id: word_id}); // If custom class was specified, put them into a variable and remove it from html attrs, to avoid overwriting classes set by jQCloud if (word.html && word.html["class"]) { custom_class = word.html["class"]; delete word.html["class"]; } // Check if min(weight) > max(weight) otherwise use default if (word_array[0].weight > word_array[word_array.length - 1].weight) { // Linearly map the original weight to a discrete scale from 1 to 10 weight = Math.round((word.weight - word_array[word_array.length - 1].weight) / (word_array[0].weight - word_array[word_array.length - 1].weight) * 9.0) + 1; } word_span = $('<span>').attr(word.html).addClass('w' + weight + " " + custom_class); // Append link if word.url attribute was set if (word.link) { // If link is a string, then use it as the link href if (typeof word.link === "string") { word.link = {href: word.link}; } // Extend link html options with defaults if ( options.encodeURI ) { word.link = $.extend(word.link, { href: encodeURI(word.link.href).replace(/'/g, "%27") }); } inner_html = $('<a>').attr(word.link).text(word.text); } else { inner_html = word.text; } word_span.append(inner_html); // Bind handlers to words if (!!word.handlers) { for (var prop in word.handlers) { if (word.handlers.hasOwnProperty(prop) && typeof word.handlers[prop] === 'function') { $(word_span).bind(prop, word.handlers[prop]); } } } $this.append(word_span); var width = word_span.width(), height = word_span.height(), left = options.center.x - width / 2.0, top = options.center.y - height / 2.0; // Save a reference to the style property, for better performance var word_style = word_span[0].style; word_style.position = "absolute"; word_style.left = left + "px"; word_style.top = top + "px"; word_style.transform= ""; word_style.color= ""; while(hitTest(word_span[0], already_placed_words)) { // option shape is 'rectangular' so move the word in a rectangular spiral if (options.shape === "rectangular") { steps_in_direction++; if (steps_in_direction * step > (1 + Math.floor(quarter_turns / 2.0)) * step * ((quarter_turns % 4 % 2) === 0 ? 1 : aspect_ratio)) { steps_in_direction = 0.0; quarter_turns++; } switch(quarter_turns % 4) { case 1: left += step * aspect_ratio + Math.random() * 2.0; break; case 2: top -= step + Math.random() * 2.0; break; case 3: left -= step * aspect_ratio + Math.random() * 2.0; break; case 0: top += step + Math.random() * 2.0; break; } } else { // Default settings: elliptic spiral shape radius += step; angle += (index % 2 === 0 ? 1 : -1)*step; left = options.center.x - (width / 2.0) + (radius*Math.cos(angle)) * aspect_ratio; top = options.center.y + radius*Math.sin(angle) - (height / 2.0); } word_style.left = left + "px"; word_style.top = top + "px"; //判断是否随机角度 if(default_options.isSelfRotate==true){ word_style.transform="rotate("+parseInt(Math.random()*40-10)+"deg)";//随机角度 } //判断是否自定义样式 if(default_options.isSelfColor==true){ word_style.color='rgb(' + [ Math.round(Math.random() * 248), 174, 63 ].join(',') + ')';//随机颜色--橘色系 } } // Don't render word if part of it would be outside the container if (options.removeOverflowing && (left < 0 || top < 0 || (left + width) > options.width || (top + height) > options.height)) { word_span.remove() return; } already_placed_words.push(word_span[0]); // Invoke callback if existing if ($.isFunction(word.afterWordRender)) { word.afterWordRender.call(word_span); } }; var drawOneWordDelayed = function(index) { index = index || 0; if (!$this.is(':visible')) { // if not visible then do not attempt to draw setTimeout(function(){drawOneWordDelayed(index);},10); return; } if (index < word_array.length) { drawOneWord(index, word_array[index]); setTimeout(function(){drawOneWordDelayed(index + 1);}, 10); } else { if ($.isFunction(options.afterCloudRender)) { options.afterCloudRender.call($this); } } }; // Iterate drawOneWord on every word. The way the iteration is done depends on the drawing mode (delayedMode is true or false) if (options.delayedMode){ drawOneWordDelayed(); } else { $.each(word_array, drawOneWord); if ($.isFunction(options.afterCloudRender)) { options.afterCloudRender.call($this); } } }; // Delay execution so that the browser can render the page before the computatively intensive word cloud drawing setTimeout(function(){drawWordCloud();}, 10); return $this; }; })(jQuery);
自己已解决 引入外部文件
jqcloud