Echarts词云图的使用&Echarts词云图为指定词设置超链接（跳转）
详解echarts词云图的使用，以及echarts词云图词条点击跳转的实现
前言
最近在做一个项目，了解了echarts统计图标等功能的强大和美观。 我还使用了Echarts的扩展词云图。 我在学习和使用的过程中也遇到了很多问题。 我想在这里分享一下您的经验html词云图模板网站，希望对您有所帮助。 你的。
1.Echarts词云图下载及配置
虽然配置没啥问题，但是这里给大家提供了Echarts的官网地址。 Echarts官网
下载Echarts词云图相关文件，具体步骤如下：
1.首先点击此处展开下载
2.这里可以看到Echarts词云图（人物云）【感谢这里的贡献者】，点击
3.点击后会跳转到GitHub，下载即可
这里我想说一下，Echarts上没有词云图的相关文档。 这里下载的是提供商自己的案例和模板。 要使用echarts词云图，简单来说，不仅仅是使用echarts。 需要将echarts-wordcloud.min.js放到自己的js文件目录下【这两个js文件我已经上传到我的资源里了，有需要的可以自行下载】
二、使用Echarts词云图 1、代码结构
代码结构如下（示例）：
参考js文件部分
<script type="text/javascript" src="./echarts.js"></script>
<script type="text/javascript" src="./echarts-wordcloud.min.js"></script>
主要部分（具体属性可百度获取）
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
...
series: [{
type: 'wordCloud',
//要绘制的“云”的形状。可以是任何表示为
//回调函数的极坐标方程，也可以是存在的关键字。可用的表示是圆（默认），
//心形（苹果或心脏形状曲线，最著名的极坐标方程），菱形（正方形的//别名），三角形形，三角形，三角形直立，五边形，和星形的别名。
shape: 'circle',
//其中白色区域将从绘制文本被排除甲轮廓图像
//该shape选项将随着云的形状的增长而继续应用
maskImage: maskImage,
//跟随左/上/下/宽/高/右/下的位置来定位单词cloud
//默认设置在中间尺寸为75％x 80％。
left: 'center',
top: 'center',
width: '70%',
height: '80%',
right: null,
bottom: null,
//数据值将映射到的文本大小范围。
//默认为最小12像素，最大60像素。
sizeRange: [12, 60],
//文字旋转范围和程度步骤。文本将随机在范围[-90，90]通过rotationStep 45旋转
rotationRange: [-90, 90],
rotationStep: 45,
//在像素网格的尺寸用于标记画布的可用性
//网格大小越大，单词之间的间隔越大。
gridSize: 8,
//设置为true以允许部分在画布外部绘制单词。
//允许绘制
drawOutOfBound: false,
//全局文本样式
textStyle: {
normal: {
fontFamily: 'sans-serif',
fontWeight: 'bold',
//颜色可以作为回调函数或颜色字符串
color: function () {
//随机
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
//数据是一个数组。每个数组项必须具有name和value属性。
data: [{
name: 'Farrah Abraham',
value: 366,
//单个文本的样式
textStyle: {
normal: {},
emphasis: {}
}
}]
}]
});
提示：对于保存词云图的div，一定要设置足够大的尺寸，即宽度和高度都要写。
2.设置词云图中指定字符的超链接动作
具体代码如下（示例）：
为了更好的理解html词云图模板网站，我先展示一下我的词云图设置的单词和句子。
{"value": 7412498, "name": "微信红包"},
{"value": 6344322, "name": "谷歌华为"},
{"value": 6098739, "name": "男子跳楼"},
{"value": 5623715, "name": "江苏校园"},
{"value": 5151726, "name": "新浪新闻"},
比如我希望当鼠标点击新浪新闻时能够跳转到新浪新闻首页。 我需要先粘贴代码。
var ecConfig = echarts.config;
myChart.on('click', eConsole);
function eConsole(param) {
if (typeof param.seriesIndex != 'undefined') {
switch (param.name) {//简单的switch，大家应该能够明白怎么设置
case "新浪新闻":
window.location.href = "http://www.sina.com";
// window.open("http://www.sina.com", "_blank");//在新页面打开
break;
default:
break;
}
}
疗效如下：
总结
综上所述，以上是关于Echarts词云图的使用配置，以及如何设置Echarts词云图的指定字符跳转（超链接）。 希望对您有帮助，也欢迎您与我交流。 一起来学习0.0吧！
发表评论