07-词云、树图、矩形树图、关系图
1. 词云worldcloud
1. 案例1
参考链接：https://www.isqqw.com/echartsdetail?id=20718
报错：Component series.wordCloud not exists. Load it first.
原因：是echarts版本的问题，worldcloud只支持3.0版本，官网上都是4.0版本。
解决：下载echarts-wordcloud.min.js并引入。
下载链接：
<script src="https://www.guanacossj.com/static/js/echarts-wordcloud.min.js"></script>
<script src="https://www.guanacossj.com/static/echarts-3/echarts.js"></script>
版权声明：本文为CSDN博主「渣渣林」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_48736958/article/details/114281746
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>词云图</title>
</head>
<body>
<script src="js/echarts.js"></script>
<script src="js/echarts-wordcloud.min.js"></script>
<div id="box" style="height: 600px;width: 1200px"></div>
<script>
var myChart = echarts.init(document.getElementById('box'));
let datas = [{
name: "雨伞",
value: 30
},
{
name: "晴天",
value: 28
},
{
name: "电话",
value: 24
},
{
name: "手机",
value: 23
},
{
name: "下雨",
value: 22
},
{
name: "暴雨",
value: 21
},
{
name: "多云",
value: 20
},
{
name: "雨衣",
value: 29
},
{
name: "屋檐",
value: 28
},
{
name: "大风",
value: 27
},
{
name: "台风",
value: 26
},
{
name: "下雪",
value: 25
},
{
name: "打雷",
value: 24
},
{
name: "小雨",
value: 30
},
{
name: "中雨",
value: 18
},
{
name: "大雨",
value: 14
},
{
name: "雷阵雨",
value: 13
},
{
name: "下雪",
value: 12
},
{
name: "小雪",
value: 11
},
{
name: "中雪",
value: 10
},
{
name: "大雪",
value: 9
},
{
name: "暴雪",
value: 8
},
{
name: "东风",
value: 7
},
{
name: "南风",
value: 6
},
{
name: "西北风",
value: 5
},
{
name: "北风",
value: 4
},
{
name: "闪电",
value: 3
}
];
var option = {
tooltip: {
show: true,
position: 'top',
textStyle: {
fontSize: 30
}
},
series: [{
type: "wordCloud",
// 网格大小，各项之间间距
gridSize: 60,
// 形状 circle 圆，cardioid 心， diamond 菱形，
// triangle-forward 、triangle 三角，star五角星
shape: 'circle',
// 字体大小范围
sizeRange: [20, 70],
// 文字旋转角度范围
rotationRange: [0, 0],
// 旋转步值
// rotationStep: 90,
// 自定义图形
// maskImage: maskImage,
left: 'center',
top: 'center',
right: null,
bottom: null,
// 画布宽
width: '90%',
// 画布高
height: '80%',
// 是否渲染超出画布的文字
drawOutOfBound: false,
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 200 + 55),
Math.round(Math.random() * 200 + 55),
Math.round(Math.random() * 200 + 55)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#2ac'
}
},
data: datas
}]
};
myChart.setOption(option);
</script>
</body>
</html>
运行结果：
2. 案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="js/echarts.js"></script>
<script src="js/echarts-wordcloud.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
let datas = [
{ value: '3793', name: '宝玉' },
{ value: '1297', name: '贾母' },
{ value: '1142', name: '凤姐' },
{ value: '1061', name: '王夫人' },
{ value: '978', name: '老太太' },
{ value: '688', name: '贾琏' },
{ value: '620', name: '黛玉' },
{ value: '602', name: '平儿' },
{ value: '597', name: '宝钗' },
{ value: '587', name: '袭人' }
];
option = {
tooltip: {
show: true,
position: 'top',
textStyle: {
fontSize: 30
}
},
series: [{
type: "wordCloud",
// 网格大小，各项之间间距
gridSize: 60,
// 形状 circle 圆，cardioid 心， diamond 菱形，
// triangle-forward 、triangle 三角，star五角星
shape: 'circle',
// 字体大小范围
sizeRange: [20, 70],
// 文字旋转角度范围
rotationRange: [0, 0],
// 旋转步值
// rotationStep: 90,
// 自定义图形
// maskImage: maskImage,
left: 'center',
top: 'center',
right: null,
bottom: null,
// 画布宽
width: '90%',
// 画布高
height: '80%',
// 是否渲染超出画布的文字
drawOutOfBound: false,
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 200 + 55),
Math.round(Math.random() * 200 + 55),
Math.round(Math.random() * 200 + 55)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#2ac'
}
},
data: datas
}]
};
myChart.setOption(option);
</script>
</body>
</html>
运行结果：
2. 在柱状图的柱子中间显示数值
注意：是在series的label中。
series: [
{
name: '2011年',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230],
// 修改第一组柱子为圆角的
itemStyle: {
barBorderRadius: 20
},
// 修改柱子间的距离
barCategoryGap: 80,
// 修改柱子的宽度
barWidth: 10,
// label可以显示图形上的文本标签 如：在柱状图上显示62%
//显示柱子内的文字
label: {
show: true,
// 在柱子内部显示inside
position: "inside",
//文字的显示形式 {c}会自动地解析为 数据 data里面的数据
formatter: "{c}%"
}
},
{
name: '2012年',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
3. 树图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var data = { //节点数据信息
"name": "某某大学",
"children": [
{
"name": "地理与信息工程学院",
"children": [
{
"name": "地理信息系统"
},
{
"name": "测绘工程",
"value": 3322
}
]
},
{
"name": "计算机与信息工程学院",
"children": [
{ "name": "物联网工程", "value": 8833 },
{ "name": "网络工程", "value": 1732 },
{ "name": "计算机科学与技术", "value": 3623 }
]
},
{
"name": "经管学院",
"children": [
{ "name": "财务管理", "value": 4116 }
]
}
]
};
option = {
tooltip: {
trigger: 'item',
},
legend: {
top: '2%',//图例距离上部百分比
left: '3%',//图例距离左端百分比
data: [{
name: 'tree1',
icon: 'rectangle'//图例的图标形状为矩形
}],
},
series: [
{
type: 'tree',//树图类型
name: 'tree1',//树的名称
data: [data],//树的数据来源于之前定义的data
top: '5%',//树距离上部的百分比距离
left: '7%',//树距离左部的百分比距离
bottom: '2%',//树距离底部的百分比距离
right: '20%',//树距离右部的百分比距离
symbolSize: 20,//节点的大小
label: {
position: 'top',//非叶子节点的标签在上部
align: 'left'//左对齐
},
leaves: {
label: {
position: 'right',//叶子节点的标签在节点右边
align: 'left'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
运行结果：
4. 矩形树图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
series: [{
type: 'treemap',
data: [{
name: 'A',
value: 10,
children: [{
name: 'A1',
value: 4
}, {
name: 'A2',
value: 6,
children: [{
name: 'A21',
value: 2
},{
name: 'A22',
value: 4 ,
children: [{
name: 'A221',
value: 3
},{
name: 'A222',
value: 1
}]
}]
}]
}, {
name: 'B',
value: 20,
children: [{
name: 'B1',
value: 20,
children: [{
name: 'B11',
value: 12
},{
name: 'B12',
value: 8
}]
}]
}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
运行结果：
5. 关系图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '关系图',
top: '12%',
left: 'center'
},
label: {
normal: {
show: true
}
},
legend: {
x: "right",
show: true,
top: '20%',
data: ["男性", "女性"]
},
series: [
{
type: 'graph',//关系图
layout: 'force',//力导向图的布局
symbolSize: 50,//节点大小
focusNodeAdjacency: true,//鼠标悬停在节点上时，会隐藏和当前节点非直接连接的节点
categories: [{ //节点类别
name: '男性',
itemStyle: {
normal: {
color: "#009800",
}
}
}, {
name: '女性',
itemStyle: {
normal: {
color: "#4592FF",
}
}
}],
label: { //节点名称
normal: {
show: true,
textStyle: {
fontSize: 20 //节点名称显示大小
},
}
},
force: {
repulsion: 1000 //节点之间的排斥力
},
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 10
},
formatter: "{c}"
}
},
data: [{
name: 'A',//节点名称
category: 0,//节点类型
draggable: true,//节点是否可拖动
}, {
name: 'B',
category: 1,
draggable: true,
}, {
name: 'C',
category: 0,
draggable: true,
}, {
name: 'D',
category: 1,
draggable: true,
}, {
name: 'E',
category: 0,
draggable: true,
}, {
name: 'F',
category: 1,
draggable: true,
}, {
name: 'G',
category: 1,
draggable: true,
},{
name: 'H',
category: 1,
draggable: true,
}],
links: [{
source: 0,//关系的起点
target: 1,//关系的终点
value: '夫妻'//关系类型
},{
source: 0,
target: 3,
value: '父子'
}, {
source: 0,
target: 5,
value: '朋友'
}, {
source: 4,
target: 5,
value: '同事'
}, {
source: 2,
target: 7,
value: '夫妻'
}, {
source: 1,
target: 7,
value: '朋友'
}, {
source: 1,
target: 4,
value: '朋友'
}, {
source: 1,
target: 6,
value: '朋友'
}
],
lineStyle: { //关系连接线的样式设置
normal: {
opacity: 0.9,//关系连接线的不透明度为0.9
width: 3,//关系连接线的宽度
curveness: 0//关系连接线的弯曲程度
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
运行结果：
浙公网安备 33010602011771号