数据可视化之环形关联图
10 Jan 2018最近经常遇到同学询问协同过滤的算法，但协同过滤的结果出来后大家有想过如何进行展示么？这时，我们便可以用到环形关联图。
上图是Echarts官网原始的环形关联图，下图是修改后的环形关联图
环形关联图修改点如下：
(1) 修改组别颜色；
(2) 修改不同类别间对应关系及概率值；
注：为缩小篇幅，后续代码块全部为联网读写方式，大家可以试着将其修改成本地读写方式。
修改后关联图代码如下所示：
var option = {
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [{
type: 'graph',
tooltip: {},
ribbonType: true,
layout: 'circular',
circular: {
rotateLabel: true
},
symbolSize: 30,
roam: true,
focusNodeAdjacency: true,
label: {
normal: {
position: 'center',
fontWeight: 'bold',
formatter: '{b}',
normal: {
textStyle: {
fontFamily: '宋体'
}
}
}
},
edgeSymbol: ['circle'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 13,
fontWeight: 'bold',
fontFamily: '宋体'
}
}
},
// 外部字体样式设置
itemStyle: {
normal: {
label: {
rotate: true,
show: true,
textStyle: {
color: '#333',
fontWeight: 'bold'
}
},
color: ["#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#85d6f7",
"#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7"]
},
emphasis: {
label: {
show: true
}
}
},
// 类别定义，保证类别没有相同的名称
data: [{
name: '购车咨询-车辆购置城市', //类别名称
itemStyle: {
normal: {
color: '#0099cc' //类别颜色
}
}
}, {
name: '购车咨询-意向车辆确认',
itemStyle: {
normal: {
color: '#0099cc'
}
}
}, {
name: '购车咨询-关注车型',
itemStyle: {
normal: {
color: '#0099cc'
}
}
}, {
name: '购车咨询-关注品牌',
itemStyle: {
normal: {
color: '#0099cc'
}
}
}, {
name: '购车咨询-价格优惠',
itemStyle: {
normal: {
color: '#00ffcc'
}
}
}, {
name: '购车咨询-车辆过户',
itemStyle: {
normal: {
color: '#00ffcc'
}
}
}, {
name: '购车咨询-牌照问题',
itemStyle: {
normal: {
color: '#00ffcc'
}
}
}, {
name: '购车咨询-提车流程',
itemStyle: {
normal: {
color: '#00ffcc'
}
}
}, {
name: '车贷业务-首付款',
itemStyle: {
normal: {
color: '#009933'
}
}
}, {
name: '车贷业务-贷款分期',
itemStyle: {
normal: {
color: '#009933'
}
}
}, {
name: '看车咨询-预约看车',
itemStyle: {
normal: {
color: '#ffcc00'
}
}
}, {
name: '看车咨询-视频看车',
itemStyle: {
normal: {
color: '#ffcc00'
}
}
}, {
name: '看车咨询-实地看车',
itemStyle: {
normal: {
color: '#ffcc00'
}
}
}, {
name: '车辆检测-质量保证',
itemStyle: {
normal: {
color: '#ff3300'
}
}
}, {
name: '车辆检测-检测报告',
itemStyle: {
normal: {
color: '#ff3300'
}
}
}, {
name: '车源状态-确认在售车辆',
itemStyle: {
normal: {
color: '#000099'
}
}
}, {
name: '购车咨询-全国直购',
itemStyle: {
normal: {
color: '#0099cc'
}
}
}],
// 类别关联对应，保证关联的类别在上述模块中定义过
links: [{
source: '购车咨询-车辆购置城市', // 基础点
target: '购车咨询-意向车辆确认', // 关联点
name: '2.38%', // 关联概率值
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
// 关联线样式设置
lineStyle: {
normal: {
width: 1, // 线的粗细
curveness: 0.2, // 线的弧度
color: '#0099cc', // 线的颜色
}
}
}, {
source: '购车咨询-车辆购置城市',
target: '购车咨询-全国直购',
name: '2.38%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#0099cc'
}
}
}, {
source: '购车咨询-车辆购置城市',
target: '购车咨询-关注品牌',
name: '0.40%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#0099cc'
}
}
}, {
source: '购车咨询-车辆购置城市',
target: '购车咨询-价格优惠',
name: '0.66%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#0099cc'
}
}
}, {
source: '购车咨询-车辆购置城市',
target: '车贷业务-贷款分期',
name: '0.66%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#0099cc'
}
}
}, {
source: '车贷业务-贷款分期',
target: '看车咨询-预约看车',
name: '0.53%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#009933'
}
}
}, {
source: '车贷业务-贷款分期',
target: '购车咨询-车辆过户',
name: '0.53%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#009933'
}
}
}, {
source: '车贷业务-贷款分期',
target: '车源状态-确认在售车辆',
name: '0.40%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#009933'
}
}
}, {
source: '车贷业务-贷款分期',
target: '看车咨询-预约看车',
name: '0.13%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#009933'
}
}
}, {
source: '车贷业务-贷款分期',
target: '购车咨询-牌照问题',
name: '0.13%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#009933'
}
}
}, {
source: '购车咨询-意向车辆确认',
target: '看车咨询-预约看车',
name: '0.13%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#0099cc'
}
}
}, {
source: '购车咨询-车辆购置城市',
target: '购车咨询-意向车辆确认',
name: '0.13%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#0099cc'
}
}
}, {
source: '购车咨询-意向车辆确认',
target: '看车咨询-实地看车',
name: '0.13%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#0099cc'
}
}
}, {
source: '购车咨询-意向车辆确认',
target: '车源状态-确认在售车辆',
name: '0.13%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#0099cc'
}
}
}, {
source: '车辆检测-检测报告',
target: '车辆检测-质量保证',
name: '0.13%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#ff3300'
}
}
}, {
source: '购车咨询-全国直购',
target: '购车咨询-提车流程',
name: '0.13%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#0099cc'
}
}
}, {
source: '购车咨询-全国直购',
target: '购车咨询-车辆落户',
name: '0.13%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#0099cc'
}
}
}, {
source: '购车咨询-全国直购',
target: '车辆检测-质量保证',
name: '0.13%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#0099cc'
}
}
}, {
source: '购车咨询-全国直购',
target: '购车咨询-关注车型',
name: '0.13%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#0099cc'
}
}
}, {
source: '购车咨询-意向车辆确认',
target: '购车咨询-全国直购',
name: '0.40%',
tooltip: {
trigger: 'item',
formatter: function(params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function(params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 1,
curveness: 0.2,
color: '#0099cc'
}
}
}
]
}]
};
分类: 可视化技术