本文介绍了如何使用ECharts创建动态关系图，包括饼图和节点收缩展开功能，并展示了如何添加点击事件，如点击节点跳转网页。通过5分钟上手教程，详细解释了从下载ECharts到配置图表的步骤，以及解决可能出现的问题。
echarts下载及使用
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
这里我们用echarts来绘制关系图，它长这样。
echarts的使用与配置
1.下载 下载地址：https://echarts.apache.org/zh/download.html
从github上下载，我们需要的是这个文件
这里我们可以挑一个下载，一般来说，压缩版的echart.min.js就够用了。
5分钟上手echarts
先用官网的例子做个演示，顺便检查前期的准备是否就绪。 1.首先，创建一个html文件。我使用的是vs_code编辑器。当然方法多种多样，就看大家各显神通了。 2.引入echarts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>这里需要注意，引用echarts时路径要正确，比如
那么我们引用时就要这么写
<script src="D:echartsecharts项目1echarts.min.js"></script>当然更简单的方法是，将echarts.min.js和html文件放在同一个文件夹里面。 这样就可以直接引用
<script src="echarts.min.js"></script>3.准备一个DOM容器，设置窗口的宽和高（必须有，不然显示不出来）
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>4.初始化一个echarts实例。 完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.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'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>5.双击刚刚写好的html。如果你看到这样的图，那么我们可以开始构建关系图了。
echarts使用过程中可能出现的问题及解决办法
1.运行后web上空白，无显示。 原因：ecahrts.js文件不对 解决办法： 1.http://echarts.baidu.com/build/dist/echarts-all.js 把之前的js换成这个。
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>2.下载正确的文件，我之前遇到的坑，用echarts.simple.js和echarts.all.js就不行，所以我建议大家就用ecahrts.min.js或者echarts.js。
节点的收缩与展开
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关系图</title>
</head>
<body>
<div id="main" style="width: 1200px; height: 700px"></div>
<div id="ss"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(["echarts", "echarts/chart/force"], function(ec) {
var myChart = ec.init(document.getElementById('main'), 'macarons');
var option = {
tooltip: {
show: false
},
series: [{
type: 'force',
name: "Force tree",
itemStyle: {
normal: {
label: {
show: true
},
nodeStyle: {
brushType: 'both',
borderColor: 'rgba(0,215,0,0.4)',
borderWidth: 1
}
}
},
categories: [{
name: 'lol'
}, {
name: '位置'
}, {
name: '英雄'
}, {
name: '技能'
}],
nodes: [{
id: 0,
category: 0,
name: '0',
label: '峡谷之巅',
symbolSize: 60,
ignore: false,
flag: true
}, {
id: 1,
category: 1,
name: '1',
label: '上单',
symbolSize: 40,
ignore: true,
flag: true
}, {
id: 2,
category: 2,
name: '2',
label: '剑姬',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 3,
category: 2,
name: '3',
label: '贾科斯',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 4,
category: 1,
name: '4',
label: '中单',
symbolSize: 40,
ignore: true,
flag: true
}, {
id: 5,
category: 2,
name: '5',
label: '辛德拉',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 6,
category: 2,
name: '6',
label: '阿卡丽',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 7,
category: 2,
name: '7',
label: '发条',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 8,
category: 1,
name: '8',
label: '打野',
symbolSize: 40,
ignore: true,
flag: true
}, {
id: 9,
category: 2,
name: '9',
label: '扎克',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 10,
category: 2,
name: '10',
label: '男枪',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 11,
category: 2,
name: '11',
label: '豹女',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 12,
category: 2,
name: '12',
label: '千珏',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 13,
category: 3,
name: '13',
label: '隼舞',
number: 45,
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 14,
category: 3,
name: '14',
label: '寒影',
number: 52,
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 15,
category: 3,
name: '15',
label: '霞阵',
number: 52,
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 16,
category: 3,
name: '16',
label: '幻樱杀缭乱',
number: 52,
symbolSize: 30,
ignore: true,
flag: true
}],
links: [{
source: 1,
target: 0
}, {
source: 4,
target: 0
}, {
source: 8,
target: 0
}, {
source: 2,
target: 1
}, {
source: 3,
target: 1
}, {
source: 5,
target: 4
}, {
source: 6,
target: 4
}, {
source: 7,
target: 4
}, {
source: 9,
target: 8
}, {
source: 10,
target: 8
}, {
source: 11,
target: 8
}, {
source: 12,
target: 8
}, {
source: 13,
target: 6
}, {
source: 14,
target: 6
}, {
source: 15,
target: 6
}, {
source: 16,
target: 6
}]
}]
};
myChart.setOption(option);
var ecConfig = require('echarts/config');
function openOrFold(param) {
var option = myChart.getOption();
var nodesOption = option.series[0].nodes;
var linksOption = option.series[0].links;
var data = param.data;
var linksNodes = [];
var categoryLength = option.series[0].categories.length;
if (data != null && data != undefined) {
if (data.flag) {
for (var m in linksOption) {
if (linksOption[m].target == data.id) {
linksNodes.push(linksOption[m].source);
}
}
if (linksNodes != null && linksNodes != undefined) {
for (var p in linksNodes) {
nodesOption[linksNodes[p]].ignore = false;
nodesOption[linksNodes[p]].flag = true;
}
}
nodesOption[data.id].flag = false;
myChart.setOption(option);
} else {
for (var m in linksOption) {
if (linksOption[m].target == data.id) {
linksNodes.push(linksOption[m].source);
}
if (linksNodes != null && linksNodes != undefined) {
for (var n in linksNodes) {
if (linksOption[m].target == linksNodes[n]) {
linksNodes.push(linksOption[m].source);
}
}
}
}
if (linksNodes != null && linksNodes != undefined) {
for (var p in linksNodes) {
nodesOption[linksNodes[p]].ignore = true;
nodesOption[linksNodes[p]].flag = true;
}
}
nodesOption[data.id].flag = true;
myChart.setOption(option);
}
}
}
myChart.on(ecConfig.EVENT.CLICK, openOrFold);
});
</script>
</body>
</html>点击事件的添加
在这里我添加一个跳转网页的点击事件。点击阿卡丽的技能后，跳转到技能介绍页面。
myChart.on('click', function(param) {
url = 'https://www.ruan8.com/wenda/12132.html'
if (param.data['category'] == '3') {
window.open(url)
}
});完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关系图</title>
</head>
<body>
<div id="main" style="width: 1200px; height: 700px"></div>
<div id="ss"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(["echarts", "echarts/chart/force"], function(ec) {
var myChart = ec.init(document.getElementById('main'), 'macarons');
var option = {
tooltip: {
show: false
},
series: [{
type: 'force',
name: "Force tree",
itemStyle: {
normal: {
label: {
show: true
},
nodeStyle: {
brushType: 'both',
borderColor: 'rgba(0,215,0,0.4)',
borderWidth: 1
}
}
},
categories: [{
name: 'lol'
}, {
name: '位置'
}, {
name: '英雄'
}, {
name: '技能'
}],
nodes: [{
id: 0,
category: 0,
name: '0',
label: '峡谷之巅',
symbolSize: 60,
ignore: false,
flag: true
}, {
id: 1,
category: 1,
name: '1',
label: '上单',
symbolSize: 40,
ignore: true,
flag: true
}, {
id: 2,
category: 2,
name: '2',
label: '剑姬',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 3,
category: 2,
name: '3',
label: '贾科斯',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 4,
category: 1,
name: '4',
label: '中单',
symbolSize: 40,
ignore: true,
flag: true
}, {
id: 5,
category: 2,
name: '5',
label: '辛德拉',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 6,
category: 2,
name: '6',
label: '阿卡丽',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 7,
category: 2,
name: '7',
label: '发条',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 8,
category: 1,
name: '8',
label: '打野',
symbolSize: 40,
ignore: true,
flag: true
}, {
id: 9,
category: 2,
name: '9',
label: '扎克',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 10,
category: 2,
name: '10',
label: '男枪',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 11,
category: 2,
name: '11',
label: '豹女',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 12,
category: 2,
name: '12',
label: '千珏',
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 13,
category: 3,
name: '13',
label: '隼舞',
number: 45,
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 14,
category: 3,
name: '14',
label: '寒影',
number: 52,
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 15,
category: 3,
name: '15',
label: '霞阵',
number: 52,
symbolSize: 20,
ignore: true,
flag: true
}, {
id: 16,
category: 3,
name: '16',
label: '幻樱杀缭乱',
number: 52,
symbolSize: 30,
ignore: true,
flag: true
}],
links: [{
source: 1,
target: 0
}, {
source: 4,
target: 0
}, {
source: 8,
target: 0
}, {
source: 2,
target: 1
}, {
source: 3,
target: 1
}, {
source: 5,
target: 4
}, {
source: 6,
target: 4
}, {
source: 7,
target: 4
}, {
source: 9,
target: 8
}, {
source: 10,
target: 8
}, {
source: 11,
target: 8
}, {
source: 12,
target: 8
}, {
source: 13,
target: 6
}, {
source: 14,
target: 6
}, {
source: 15,
target: 6
}, {
source: 16,
target: 6
}]
}]
};
myChart.setOption(option);
var ecConfig = require('echarts/config');
function openOrFold(param) {
var option = myChart.getOption();
var nodesOption = option.series[0].nodes;
var linksOption = option.series[0].links;
var data = param.data;
var linksNodes = [];
var categoryLength = option.series[0].categories.length;
if (data != null && data != undefined) {
if (data.flag) {
for (var m in linksOption) {
if (linksOption[m].target == data.id) {
linksNodes.push(linksOption[m].source);
}
}
if (linksNodes != null && linksNodes != undefined) {
for (var p in linksNodes) {
nodesOption[linksNodes[p]].ignore = false;
nodesOption[linksNodes[p]].flag = true;
}
}
nodesOption[data.id].flag = false;
myChart.setOption(option);
} else {
for (var m in linksOption) {
if (linksOption[m].target == data.id) {
linksNodes.push(linksOption[m].source);
}
if (linksNodes != null && linksNodes != undefined) {
for (var n in linksNodes) {
if (linksOption[m].target == linksNodes[n]) {
linksNodes.push(linksOption[m].source);
}
}
}
}
if (linksNodes != null && linksNodes != undefined) {
for (var p in linksNodes) {
nodesOption[linksNodes[p]].ignore = true;
nodesOption[linksNodes[p]].flag = true;
}
}
nodesOption[data.id].flag = true;
myChart.setOption(option);
}
}
}
myChart.on(ecConfig.EVENT.CLICK, openOrFold);
myChart.on('click', function(param) {
url = 'https://www.ruan8.com/wenda/12132.html'
if (param.data['category'] == '3') {
window.open(url)
}
});
});
</script>
</body>
</html>想看更多点击事件的写法可以上官方文档：
https://echarts.apache.org/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
