echarts2的官方API里是带有字符云的,但到了echarts3就被从官网上移除了,想要使用的话可以从github上下载:

下载地址:https://github.com/ecomfe/echarts-wordcloud

使用方法:

1.依次引入echarts.min.js和echarts-wordcloud.min.js(文件位置:下载的压缩包下dist/echarts-wordcloud.min.js);
<script src="echarts.min.js"></script>
<script src="echarts-wordcloud.min.js"></script>

2.自己翻译的简易说明(供参考)

width---字符云画布宽度

height---字符云画布宽度

maskImage---剪影图像,白色区域将被排除在绘图文本之外,形状选项将继续应用为云的形状。

如:

var maskImage = new Image();
//var world_option = world_cloud(eval('(' + '${cloud}' + ')'),maskImage);
var world_option = world_cloud(data,maskImage);
maskImage.onload = function () {
world_option.series[0].maskImage
worldChart.setOption(world_option);
}
maskImage.src = 'img/ren1.png';

gridSize---字符之间的间距(int)

sizeRange---字符的范围(array)
rotationRange---字符倾斜的角度(array)
 
3.实例:
var chart = echarts.init(document.getElementById('main'));

chart.setOption({
...
series: [{
type: 'wordCloud', // The shape of the "cloud" to draw. Can be any polar equation represented as a
// callback function, or a keyword present. Available presents are circle (default),
// cardioid (apple or heart shape curve, the most known polar equation), diamond (
// alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star. shape: 'circle', // A silhouette image which the white area will be excluded from drawing texts.
// The shape option will continue to apply as the shape of the cloud to grow. maskImage: maskImage, // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
// Default to be put in the center and has 75% x 80% size. left: 'center',
top: 'center',
width: '70%',
height: '80%',
right: null,
bottom: null, // Text size range which the value in data will be mapped to.
// Default to have minimum 12px and maximum 60px size. sizeRange: [12, 60], // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45 rotationRange: [-90, 90],
rotationStep: 45, // size of the grid in pixels for marking the availability of the canvas
// the larger the grid size, the bigger the gap between words. gridSize: 8, // set to true to allow word being draw partly outside of the canvas.
// Allow word bigger than the size of the canvas to be drawn
drawOutOfBound: false, // Global text style
textStyle: {
normal: {
fontFamily: 'sans-serif',
fontWeight: 'bold',
// Color can be a callback function or a color string
color: function () {
// Random color
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
}, // Data is an array. Each array item must have name and value property.
data: [{
name: 'Farrah Abraham',
value: 366,
// Style of single text
textStyle: {
normal: {},
emphasis: {}
}
}]
}]
});

在echarts3中使用字符云的更多相关文章

  1. vue怎么引入echats并使用 (柱状图 字符云)

    安装 npm install echarts --save 下面看一下如何简单的使用: 在main.js中引入(全局引入) // 引入echarts import echarts from 'echa ...

  2. Linux 的简单命令以及在idea中配置码云

    Linux 的简单命令: ls(list)功能:列出目录内容 cd(change directory)功能:切换目录 touch 1.txt 在当前目录创建一个文件1.txt clear:清除屏幕 p ...

  3. WEB开发中的字符集和编码

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  4. 解决MVC中JSON字符长度超出限制的异常

    解决MVC中JSON字符长度超出限制的异常 解决方法如下: <configuration> <system.web.extensions> <scripting> ...

  5. echarts之字符云tooltip显示混乱问题的解决办法

    echarts字符云中tooltip显示混乱主要表现为一下两点: 1.字体与其显示框内容不对应鼠标识别错误 解决思路: 就是option里的数据要对value降序排序(这一点很关键,是必须的一步) 把 ...

  6. MeshLab中进行点云配准

    MeshLab是一个开源.可移植和可扩展的三维几何处理系统,主要用于交互处理和非结构化编辑三维三角形网格.它支持多种文件格式: import:PLY, STL, OFF, OBJ, 3DS, COLL ...

  7. div中的字符换行

    div中的字符换行 转载自:http://blog.sina.com.cn/s/blog_6a79bc480100tizi.html   1.强制不换行,同时以省略号结尾. <div style ...

  8. 在OneThink(ThinkPHP3.2.3)中整合阿里云OSS的PHP-SDK2.0.4,实现Web端直传,服务端签名直传并设置上传回调的实现流程

    在OneThink(ThinkPHP3.2.3)中整合阿里云OSS的PHP-SDK2.0.4,实现本地文件上传流程 by shuijingwan · 2016/01/13 1.SDK安装 github ...

  9. .NET Framework 中的字符编码

    字符是可用多种不同方式表示的抽象实体. 字符编码是一种为受支持字符集中的每个字符进行配对的系统,配对时使用的是表示该字符的某些值. 例如,摩尔斯电码是一种为罗马字母表中的每个字符进行配对的字符编码,配 ...

随机推荐

  1. [置顶] bootstrap自定义样式-bootstrap侧边导航栏的实现

    前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...

  2. AntData.ORM框架 之 读写分离

    环境准备 准备2台机器配置好Master Slaver模式 我是用vmware 2台虚拟机配置的.有需要请联系. Master:192.168.11.130 Slaver:192.168.11.133 ...

  3. ArcGIS 网络分析[1.3] 在个人地理数据库中创建网络数据集/并简单试验最佳路径

    上篇使用shp文件创建网络数据集,然而在ArcGIS 9中就支持地理数据库了,数据库的管理更为科学强大. 本篇就使用个人地理数据库进行建立网络数据集,线数据仍然可以是1.1中的线数据,但是我做了一些修 ...

  4. 1-MySQL数据库(android连接MySQL数据库)

    很好的链接 http://www.cnblogs.com/best/p/6517755.html  一个小时学会MySQL数据库 http://www.cnblogs.com/klguang/p/47 ...

  5. ElasticSearch 学习记录之ES高亮搜索

    高亮搜索 ES 通过在查询的时候可以在查询之后的字段数据加上html 标签字段,使文档在在web 界面上显示的时候是由颜色或者字体格式的 GET /product/_search { "si ...

  6. 【转】nginx提示:500 Internal Server Error错误的解决方法

    本文转自:http://www.jb51.net/article/35675.htm 现在越来越多的站点开始用 Nginx ,("engine x") 是一个高性能的 HTTP 和 ...

  7. 解决360随身wifi每天首连频繁断线

    经本人试过几个星期是可以的,需要的话加微新备注:solq123987654

  8. thinkinginjava学习笔记10_容器

    Java中并没有像Perl.Python.Ruby那样对容器有直接的支持,但是可以依靠容器类来完成相同的工作: 泛型 使用一个ArrayList对象可以保存一系列的对象,如: ArrayList ap ...

  9. vue实现登录后跳转到之前的页面

    在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的 ...

  10. java基础知识整理

    java基础入门知识(转载请注明出处.) 1.JVM.JRE和JDK的区别. (1)JVM(Java Virtual Machine):java虚拟机,用于保证java跨平台的特性,java语言是跨平 ...