在echarts3中使用字符云
时间:2022-05-04
本文章向大家介绍在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)
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: {}
}
}]
}]
});
- 国内研究人员首次Wifi重大漏洞利用实现 | Krack攻击测试套件打包
- 想成为优秀程序员必知的要点
- Attribute(特性),怎么用才更好?
- 如何使用Airgeddon搭建基于软件的WIFI干扰器
- 还在写SQL的同志,去喝杯咖啡吧!
- 使用XSD编写具有智能提示的XML文件(以SQL-MAP脚本为实例)
- 一个利用CVE-2017-11292的APT样本技术分析(一)
- Attribute(特性),怎么用才更好? —— 字段编号被误解了
- PDF.NET的SQL日志 ASP.net 路径问题 详解
- 【自然框架】稳定版beta1——源码下载,Demo说明
- TOP语句放到表值函数外,效率异常低下的原因分析
- 常见.NET功能代码汇总 (3) 33,彻底关闭Excel进程
- Vue.js 入门指南之“前传”(含sublime text 3 配置) 1,下载安装Node.js2,配置Vue环境3,Vue初探4,配置sublime Text
- JavaScript的“原型甘露”
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例