ECharts学习笔记（1）——使用关系图展示关联分析结果

前面的文章中学习了关联分析算法，于是想把分析结果以一种直观、形象的方式展现出来，于是用到了ECharts的关系图，作为JS小白，先从关系图的基本属性学起吧。

1、关系图的一些主要配置项

series-graph. type = 'graph'

series-graph. legendHoverLink = true

是否启用图例 hover 时的联动高亮。

series-graph. coordinateSystem

该系列使用的坐标系，可选：

null 或者 'none'——无坐标系。
'cartesian2d'——使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
'polar'——使用极坐标系，通过 polarIndex 指定相应的极坐标组件。
'geo'——使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。

series-graph. hoverAnimation

布尔值，是否开启鼠标 hover 节点的提示动画效果。

series-graph. layout = 'none'

图的布局。可选：

'none'—— 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
'circular' ——采用环形布局，布局相关的配置项见 graph.circular
'force' 采用力引导布局，布局相关的配置项见 graph.force

series-graph.circular. rotateLabel

布尔值，是否旋转标签，默认不旋转。下面分别是不旋转和旋转标签的效果：

series-graph. force

力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。

力引导布局的结果有良好的对称性和局部聚合性，也比较美观。而且也不需要给每个节点设置坐标了。

series-graph.force. initLayout

进行力引导布局前的初始化布局，初始化布局会影响到力引导的效果。

默认不进行任何布局，使用节点中提供的 x， y 作为节点的位置。如果不存在的话会随机生成一个位置。

也可以选择使用环形布局 'circular'。

series-graph.force. repulsion = 50

节点之间的斥力因子。

支持设置成数组表达斥力的范围，此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大。

series-graph.force. gravity = 0.1

节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。

series-graph.force. edgeLength = 30

边的两个节点之间的距离，这个距离也会受 repulsion影响。

支持设置成数组表达边长的范围，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例

// 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50
edgeLength: [10, 50]

series-graph.force. layoutAnimation = true

布尔值。因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。

series-graph. draggable

布尔值。节点是否可拖拽，只在使用力引导布局的时候有用。

series-graph. focusNodeAdjacency

布尔值。是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。

通常设置为true显示效果会更好。

series-graph. symbolSize = 10

关系图节点标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。

如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：

//第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数。
(value: Array|number, params: Object) => number|Array

series-graph. edgeSymbol = ['none', 'none']

边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：

edgeSymbol: ['circle', 'arrow']

series-graph. edgeSymbolSize = 10

边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。

series-graph. itemStyle

图形的样式，包括以下属性。详见官方文档。{ color , borderColor , borderWidth , borderType , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

series-graph. lineStyle

关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。包含以下属性。

{ color , width , type , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity , curveness }

series-graph. label

图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label选项在 ECharts 2.x 中放置于itemStyle下，在 ECharts 3 中为了让整个配置项结构更扁平合理，label 被拿出来跟 itemStyle 平级，并且跟 itemStyle 一样拥有 emphasis 状态。属性详细说明参考官方文档。

series-graph. edgeLabel

连接线上的文本标签，比如两个节点之间的关联度等。

series-graph. emphasis

高亮的图形样式。包含属性{ itemStyle , lineStyle , label , edgeLabel }

series-graph. categories

节点分类的类目，可选。

如果节点有分类的话可以通过 data[i].category 指定每个节点的类目，类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。

series-graph. data

关系图的节点数据列表。注意name不能重复。

data: [{name: '1',x: 10,y: 10,value: 10
}, {name: '2',x: 100,y: 100,value: 20,symbolSize: 20,itemStyle: {color: 'red'}
}]

series-graph. links

节点间的关系数据。示例：

links: [{source: 'n1',target: 'n2'
}, {source: 'n2',target: 'n3'
}]

以上是关系图常用的一些配置项和属性，更多属性说明请参考官方文档：

https://www.echartsjs.com/zh/option.html#series-graph.itemStyle

2、绘制一个关系图

//定义一些类目
var categories = [{ name: '水果'}, { name: '蔬菜' },{ name: '粮油'},{ name:  '副食'},{ name: '酒水'},{ name: '肉类'}]
//节点的数据，value代表其支持度，以及它们所属的类目
var dataSet = [{name: '苹果',value:0.722,category:0}, {name: '土豆',value:0.84,category:1}, {name: '西蓝花',value:0.74,category:1}, {name: '大米',value:0.673,category:2}, {name: '盐',value:0.628,category:3}, {name: '啤酒',value:0.707,category:4}, {name: '红酒',value:0.507,category:4}, {name: '炸鸡',value:0.710,category:5}, {name: '牛排',value:0.610,category:5}]//关联数据，value为可信度
var dataRelate = [{source:'土豆',target:'大米',value:0.73},
{source:'苹果',target:'土豆',value:0.753},
{source:'大米',target:'盐',value:0.724},
{source:'炸鸡',target:'啤酒',value:0.91},
{source:'牛排',target:'红酒',value:0.919},
{source:'土豆',target:'西蓝花',value:0.858},
{source:'牛排',target:'土豆',value:0.76},
{source:'牛排',target:'西蓝花',value:0.856}];//生成节点所需的数据对象
var data1 = dataSet.map(function (node) {return {//x: node.x,//y: node.y,name: node.name,value : node.value,category: node.category,symbolSize: node.value*100//支持度越大，节点越大};
});  //生成连线所需的数据对象
var link1 = dataRelate.map(function (node) {return {source: node.source,target: node.target,value: node.value+'(可信度)',label: {normal: {show: false,formatter: function (x) {return node.value;}}},lineStyle: {normal: {width : 20*(node.value - 0.65),//可信度越高，连线越粗color : 'source'}}};
});  option = {title: {text: '一个关联分析结果'},legend: {x:'left',top:30,orient: 'vertical',data:[ '水果',  '蔬菜' ,'粮油','副食','酒水', '肉类']},tooltip: {},series : [{type: 'graph',layout:'force',//'circular','force'focusNodeAdjacency:true,//当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点draggable: true,//指示节点是否可以拖动categories: categories,data: data1,links: link1,label: {normal: {show: true}},edgeSymbol: ['none', 'arrow'],edgeSymbolSize: 12,edgeLabel: {normal: {textStyle: {fontSize: 15}}},force: {repulsion: 200,gravity:0.2,edgeLength: [100,400],},itemStyle:{normal: {borderColor: '#fff',borderWidth: 1,shadowBlur: 10,}},lineStyle: {normal: {opacity: 0.9,curveness: 0.3}}}]
};

以上代码中，为了方便修改数据源，我把节点数据和关系数据通过数组单独设置，没有写到option中。而且这样也可以灵活的设置每个节点的大小，和连接线的粗细，来更加形象的体现支持度和可信度。

通过修改layout属性，分别绘制一个力引导图和一个圆形的图。如下：

参考：

ECharts官方文档