- title 图表标题样式
title: {
text: "ECharts简单线形图表及其配置展示实例", //正标题
link: "http://www.stepday.com", //正标题链接 点击可在新窗口中打开
top: 'bottom',//上下位置
left: 'right'//左右位置
subtext: "From:http://www.stepday.com", //副标题
sublink: "http://www.stepday.com", //副标题链接
//正标题样式
textStyle: {
fontSize:24
},
//副标题样式
subtextStyle: {
fontSize:12,
color:"red"
}
},
- tooltip 提示框配置
tooltip: {
formatter: function (x) {
return x.data.name;//设置提示框的内容和格式 节点和边都显示name属性
}
},
- toolbox 工具箱配置
toolbox: {
show : true,//是否显示工具箱
feature : {
magicType: ['line', 'bar'], // 图表类型切换，当前仅支持直角系下的折线图、柱状图转换，上图icon左数6/7，分别是切换折线图，切换柱形图
restore: true, // 还原，复位原始图表，
saveAsImage: true // 保存为图片，
}
},
- legend:图例配置
legend: [{
x: 'left',//图例位置
data:['调研机构','接待公司']//关系图中需要与series中的categories的name保持一致
}],
- 关系边样式lineStyle
lineStyle: {
normal: {
show : true,
color: 'target',//决定边的颜色是与起点相同还是与终点相同
curveness: 0.3//边的曲度，支持从 0 到 1 的值，值越大曲度越大。
}
},
- 图型上的文本标签样式label
label: {//图形上的文本标签，可用于说明图形的一些数据信息
normal: {
show : true,//显示
position: 'right',//相对于节点标签的位置，默认在节点中间
//回调函数，你期望节点标签上显示什么
formatter: function(params){
return params.data.label;
},
}
},
- 力引导图基本配置force
force : { //力引导图基本配置
//initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
repulsion : 100,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength :80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
layoutAnimation : true
//因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
},
- 连接边标签edgeLabel
edgeLabel: {//线条的边缘标签
normal: {
show: true,
//通过回调函数设置连线上的标签
formatter: function (x) {
return x.data.name;
}
}
},
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
- 其他
- focusNodeAdjacency:true,//当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
- draggable: true,//指示节点是否可以拖动
- symbolSize: 20,//节点大小
- edgeSymbol: ['circle', 'arrow'],//边两端的标记类型
- edgeSymbolSize: [4, 8],//边两端的标记大小
- roam : true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
- legendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。
- 设置节点和连接线的提示内容的格式不同
node数据：
//每一个{}里面为一个节点，category（该节点类别），name（关系连接的关键字，可以理解为键值中的键，可为string也可为数字）value(节点的值，可以设置节点半径与该值的关系)，label（该字段是我用来显示该节点标签的，可以改名），除此之外大家也可以自己设置一些其他字段。
[{category:0,name: 1, value :5,label: '乔布斯'},
{category:1, name: 2,value : 2,label: '丽萨-乔布斯'},
]
link数据：
//每一个{}里面为一个关系边，source（起点，对应上面的name），target（终点，对应上面的name），value(起点到终点的距离，值越大，权重越大，距离越短)，label（显示该关系边标签，用来说明两节点之间的关系）。
{source : 2, target : 1, value : 5, label: '女儿'}
使用回调函数设置节点和连接线的提示内容：
formatter: function(params){//触发之后返回的参数，这个函数是关键
if (params.data.category !=undefined) {//如果触发节点
return '人物:'+params.data.label;//返回标签
}else {//如果触发边
return '关系:'+params.data.label;
}
}
-
设置节点形状和大小
通过node 的symbol设置节点形状， symbolSize 设置节点大小
node数据
{
id : 1,
category : 1,
name : '192.168.8.88',
symbol : 'rect',
value : 20,
symbolSize : 70
},
Echarts force图形小节
ECharts 实现人民的名义关系图谱
Echarts3 关系图-力导向布局图
可伸缩力导向图
echarts3生成关系网络关系力向图
