在echarts3中使用字符云
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)
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中使用字符云的更多相关文章
- vue怎么引入echats并使用 (柱状图 字符云)
安装 npm install echarts --save 下面看一下如何简单的使用: 在main.js中引入(全局引入) // 引入echarts import echarts from 'echa ...
- Linux 的简单命令以及在idea中配置码云
Linux 的简单命令: ls(list)功能:列出目录内容 cd(change directory)功能:切换目录 touch 1.txt 在当前目录创建一个文件1.txt clear:清除屏幕 p ...
- WEB开发中的字符集和编码
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 解决MVC中JSON字符长度超出限制的异常
解决MVC中JSON字符长度超出限制的异常 解决方法如下: <configuration> <system.web.extensions> <scripting> ...
- echarts之字符云tooltip显示混乱问题的解决办法
echarts字符云中tooltip显示混乱主要表现为一下两点: 1.字体与其显示框内容不对应鼠标识别错误 解决思路: 就是option里的数据要对value降序排序(这一点很关键,是必须的一步) 把 ...
- MeshLab中进行点云配准
MeshLab是一个开源.可移植和可扩展的三维几何处理系统,主要用于交互处理和非结构化编辑三维三角形网格.它支持多种文件格式: import:PLY, STL, OFF, OBJ, 3DS, COLL ...
- div中的字符换行
div中的字符换行 转载自:http://blog.sina.com.cn/s/blog_6a79bc480100tizi.html 1.强制不换行,同时以省略号结尾. <div style ...
- 在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 ...
- .NET Framework 中的字符编码
字符是可用多种不同方式表示的抽象实体. 字符编码是一种为受支持字符集中的每个字符进行配对的系统,配对时使用的是表示该字符的某些值. 例如,摩尔斯电码是一种为罗马字母表中的每个字符进行配对的字符编码,配 ...
随机推荐
- PipeHttp 测试工具使用
以下简单介绍下参数工具的使用 GitHub地址: https://github.com/lulianqi/PipeHttp/ (工程地址) https://github.com/lulia ...
- [C#]使用Redis来存储键值对(Key-Value Pair)
本文为原创文章.源代码为原创代码,如转载/复制,请在网页/代码处明显位置标明原文名称.作者及网址,谢谢! 开发工具:VS2017 语言:C# DotNet版本:.Net FrameWork 4.5及以 ...
- IT服务(运维)管理实施的几个要点--第一章 IT服务质量的标准
子曰"干的最好就是个60分,稍有纰漏就是不及格" 谈一个事情,最先要谈的就是统一标准,又或者这个标准已经约定俗成,广泛认可,所以就可以略过.对于IT服务质量来说,确实有一个统一的标 ...
- linux 文件权限的基础知识
由于自己总是记不住linux里权限的一些知识,因此简单总结如下: 查看文件权限 // 列出所有文件 ls -al // 最前面的一串10个字母的字符串 // 可能像 drwxrwxr-x // 第一位 ...
- python 字符串中的%s与format
你可以选择字符串拼接,你也可以选择使用%s或者是format,下面简单介绍一下它们的使用方法: # 在字符串后面跟%,然后后面加上要被替换的值 print('I like %s' % 'apples' ...
- Python:监控ASM剩余空间
#!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = 'Jipu FANG' version = 0.1 import cx_Oracle ...
- 初识QT
前言:这是写给纯小白看的文章,大神可以自行绕道. QT的优势(摘自360百科): Qt支持下列操作系统: Microsoft Windows 95/98, Microsoft Windows NT, ...
- [数据清洗]- Pandas 清洗“脏”数据(三)
预览数据 这次我们使用 Artworks.csv ,我们选取 100 行数据来完成本次内容.具体步骤: 导入 Pandas 读取 csv 数据到 DataFrame(要确保数据已经下载到指定路径) D ...
- 安装两个JDK后配置环境变量没用?
在实际开发中,由于项目的需要,可能JDK的版本是不同的.比如我们前一个项目所需JDK版本是1.6的,项目完成后,下一个项目JDK版本又是需要1.7的,为了防止由于切换项目我们需要频繁的安装卸载JDK, ...
- K:java中的hashCode和equals方法
hashCode和equals方法是Object类的相关方法,而所有的类都是直接或间接的继承于Object类而存在的,为此,所有的类中都存在着hashCode和equals.通过翻看Object类 ...