你要的目录
- 树形图
- 关系图
- 词云图
树形图
树形图（Tree Diagram）是用来表示一个概率空间。树形图可以表示独立事件（例如多次掷硬币）和条件概率（例如不放回的抽卡）。
PS：树形图的数据由name和children形成的。children内包含分支。
参数含义
tooltip. triggerOn = ‘mousemove|click’
string提示框触发的条件，可选：
'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'
verticalAlign
string
文字垂直对齐方式，默认自动。
可选：
'top''middle''bottom'
series-tree. expandAndCollapse = true
boolean子树折叠和展开的交互，默认打开 。由于绘图区域是有限的，而通常一个树图的节点可能会比较多，这样就会出现节点之间相互遮盖的问题。为了避免这一问题，可以将暂时无关的子树折叠收起，等到需要时再将其展开。如上面径向布局树图示例，节点中心用蓝色填充的就是折叠收起的子树，可以点击将其展开。
series-tree.data. animationDuration = 1000
number Function初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果。
series-tree.data. animationDurationUpdate = 300
number Function数据更新动画的时长。
支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/static/js/echarts.min.js"></script>
<!-- cdn -->
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> -->
</head>
<body>
<div id="tree" style="width: 900px; height: 400px;"></div>
<script>
var tree_chart = echarts.init(document.getElementById("tree"));
var data = {
"name": "flare",
"children": [{
"name": "analytics",
"children": [{
"name": "cluster",
"children": [{
"name": "AgglomerativeCluster",
"value": 3938
}, {
"name": "CommunityStructure",
"value": 3812
}, {
"name": "HierarchicalCluster",
"value": 6714
}, {
"name": "MergeEdge",
"value": 743
}]
}, {
"name": "graph",
"children": [{
"name": "BetweennessCentrality",
"value": 3534
}, {
"name": "LinkDistance",
"value": 5731
}, {
"name": "MaxFlowMinCut",
"value": 7840
}, {
"name": "ShortestPaths",
"value": 5914
}, {
"name": "SpanningTree",
"value": 3416
}]
}, {
"name": "optimization",
"children": [{
"name": "AspectRatioBanker",
"value": 7074
}]
}],
"collapsed": true
}, {
"name": "animate",
"children": [{
"name": "Easing",
"value": 17010
}, {
"name": "FunctionSequence",
"value": 5842
}, {
"name": "interpolate",
"children": [{
"name": "ArrayInterpolator",
"value": 1983
}, {
"name": "ColorInterpolator",
"value": 2047
}, {
"name": "DateInterpolator",
"value": 1375
}, {
"name": "Interpolator",
"value": 8746
}, {
"name": "MatrixInterpolator",
"value": 2202
}, {
"name": "NumberInterpolator",
"value": 1382
}, {
"name": "ObjectInterpolator",
"value": 1629
}, {
"name": "PointInterpolator",
"value": 1675
}, {
"name": "RectangleInterpolator",
"value": 2042
}]
}, {
"name": "ISchedulable",
"value": 1041
}, {
"name": "Parallel",
"value": 5176
}, {
"name": "Pause",
"value": 449
}, {
"name": "Scheduler",
"value": 5593
}, {
"name": "Sequence",
"value": 5534
}, {
"name": "Transition",
"value": 9201
}, {
"name": "Transitioner",
"value": 19975
}, {
"name": "TransitionEvent",
"value": 1116
}, {
"name": "Tween",
"value": 6006
}]
}]
};
var tree_option = {
tooltip:{
trigger: 'item',
triggerOn: 'mousemove',
},
series:[
{
type:'tree',
data:[data],
top:'1%',
left:'15%',
bottom:'1%',
right:'7%',
symbolSize: 7,
orient: 'RL',
label: {
position: 'right',
verticalAlign:'middle',
align:'left',
},
leaves:{
label:{
position: 'left',
verticalAlign: 'middle',
align:'right',
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750,
}
]
};
tree_chart.setOption(tree_option);
</script>
</body>
</html>如图所示：
关系图
参数含义
series-graph. animationEasingUpdate = cubicOut
string数据更新动画的缓动效果。
series-graph. layout = ‘none’
string图的布局。
可选：
-
'none'不采用任何布局，使用节点中提供的 x， y 作为节点的位置。 -
'circular'采用环形布局 -
'force'采用力引导布局
series-graph. edgeSymbol = [‘none’, ‘none’]
Array string边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：
edgeSymbol: ['circle', 'arrow']
series-graph. edgeSymbolSize = 10
Array number边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
series-graph.lineStyle. curveness
number边的曲度，支持从 0 到 1 的值，值越大曲度越大。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/static/js/echarts.min.js"></script>
<!-- cdn -->
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> -->
</head>
<body>
<div id="graph" style="width: 600px; height: 400px;"></div>
<script>
var graph_chart = echarts.init(document.getElementById('graph'));
var graph_option = {
title:{
text:'graph入门'
},
tooltip:{},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series:[
{
type:'graph',
layout:'none',
symbolSize: 50,
roam: true,
lable:{
show:true
},
edgeSymbol:['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel:{
fontSize: 20
},
data: [{
name: '节点1',
x: 300,
y: 300
}, {
name: '节点2',
x: 800,
y: 300
}, {
name: '节点3',
x: 550,
y: 100
}, {
name: '节点4',
x: 550,
y: 500
}],
links: [{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
show: true
},
lineStyle: {
width: 5,
curveness: 0.2
}
}, {
source: 1,
target: 0,
label: {
show: true
},
lineStyle: {
curveness: 0.2
}
}, {
source: '节点1',
target: '节点3'
}, {
source: '节点2',
target: '节点3'
}, {
source: '节点2',
target: '节点4'
}, {
source: '节点1',
target: '节点4'
}],
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
]
};
graph_chart.setOption(graph_option);
</script>
</body>
</html>如图所示：
词云图
“词云”这个概念由美国西北大学新闻学副教授、新媒体专业主任里奇·戈登（Rich Gordon）于近日提出。戈登做过编辑、记者，曾担任迈阿密先驱报（Miami Herald）新媒体版的主任。他一直很关注网络内容发布的最新形式——即那些只有互联网可以采用而报纸、广播、电视等其它媒体都望尘莫及的传播方式。通常，这些最新的、最适合网络的传播方式，也是最好的传播方式。 因此，“词云”就是通过形成“关键词云层”或“关键词渲染”，对网络文本中出现频率较高的“关键词”的视觉上的突出。
参数含义
drawOutOfBound
boolean
设置为true，以允许部分在画布外部绘制单词。
允许绘制大于画布大小的单词
代码如下（数据纯属虚构）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/static/js/echarts.min.js"></script>
<!-- cdn -->
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> -->
<script src="/static/js/echarts-wordcloud.min.js"></script>
</head>
<body>
<div id="wordcloud" style="width: 600px; height: 400px;"></div>
<script>
var wordcloud_chart = echarts.init(document.getElementById('wordcloud'));
var wordcloud_option = {
series:[
{
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
shape: 'pentagon',
width: 600,
height: 400,
drawOutOfBound: true,
textStyle: {
normal: {
color: function() {
return 'rgb(' + [
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
Math.round(Math.random() * 255)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
// 数据纯属虚构
data:[
{
name:'学校',
value: 10000,
},
{
name:'学生',
value: 9800,
},
{
name:'老师',
value: 7000,
},{
name:'人民日报',
value: 100,
},
{
name:'体侧',
value: 4100,
},
{
name:'开学',
value: 11000,
},
{
name:'返校',
value: 8430,
},
{
name:'疫情',
value: 2345,
},
{
name:'教室',
value: 234,
},
{
name:'上课',
value: 3456,
},
{
name:'网课',
value: 6789,
},
{
name:'中暑',
value: 1233,
},
{
name:'感受',
value: 2300,
},
{
name:'家长',
value: 3444,
},
{
name:'宿舍',
value: 2666,
},
{
name:'回去',
value: 1566,
},
{
name:'隔离',
value: 7786,
},
{
name:'考虑',
value: 4576,
},
{
name:'意义',
value: 1266,
}
]
}
]
};
wordcloud_chart.setOption(wordcloud_option);
</script>
</body>
</html>如图所示：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
