写这个栗子的时候主要因为是刚刚做一个项目,要用到人物关系图,所以一直在找合适插件,最后选择echarts2.0的tree图最合适这个关系图了。哈哈,话不多少,现在就把效果图献上吧。
ps:照片是网上下载的,莫要见外啊。
这个使用的是echarts2.X版本
HTML代码
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.a{
width: 600px;
height: 327px;
margin: auto;
}
</style>
<div class="a" id="a"></div>
下面是js代码:
require.config({paths:{echarts:"plugins/echarts"}});
require(
["echarts","echarts/chart/tree"],
function(ec){
var myChart=ec.init(document.getElementById('a'));
var option={
title : {
show:false
},
tooltip : {
trigger: 'item',
formatter: "{b}"
//formatter: "{b}: {c}"
},
//那个右上角的工具栏
toolbox: {
show : false,
},
calculable : false,
series : [
{
name:'树图',
type:'tree',
//排列方式,横向、纵向
orient: 'vertical',
//根节点的位置
rootLocation: {x: 'center',y: '10%'},
//连接线长度
layerPadding: 30,
//结点间距
nodePadding: 20,
//图形形状
symbol: 'circle',
//尺寸大小
symbolSize: 40,
//图的一些样式设置
itemStyle: {
//正常情况显示
normal: {
label: {
show: true,
position: 'inside',
textStyle: {
//字体颜色、大小、加粗
color: '#000',
fontSize: 15,
f