数据可视化之分类关系图
01 Apr 2018经过好几次POC项目发现分类关系图展示内容具有很强的局限性，所以一直在考虑要不要将这种样式发上来。直到最近看Echart官网发现分类关系图的样式已经下架，想着还是留个纪念吧。
分类关系图代码如下所示：
var size = 100;
var size1 = 10;
var yy = 200;
var yy1 = 250;
option = {
title: {
text: "分类关系图",
top: "top",
top: 10,
left: "left",
left: 5,
textStyle: {
fontSize: 24,
color: '#464646'
}
},
tooltip: {
formatter: '{b}'
},
backgroundColor: '#FFFCE8',
animationDuration: 1000,
animationEasingUpdate: 'quinticInOut',
// 图底部的图示
legend: [{
formatter: function (name) {
return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
},
tooltip: {
show: true
},
selectedMode: 'false',
top: 20,
right: 0,
textStyle: {
color: '#464646'
},
data: ['购车咨询', '车贷业务', '费用咨询', '车辆检测', '看车咨询', '售后服务', '车源状态', '还款咨询', '配套服务', '售后服务', '费用咨询业务']
}],
series: [{
name: '知识体系',
type: 'graph',
layout: 'force',
force: {
repulsion: 80,
gravity: 0.1,
edgeLength: 30,
layoutAnimation: true,
},
// 名称及对应位置
data: [{
"name": " ",
symbol: 'image://../app_themes/assets/img/1.jpg',
x: 0,
y: yy,
"symbolSize": 150,
"draggable": "true"
}, {
"name": "购车咨询",
x: 10,
y: yy,
"symbolSize": size,
"category": "购车咨询",
"draggable": "true",
label: {
normal: {
position: 'inside',
fontSize: 14,
color: '#fff',
}
},
}, {
"name": "费用计算",
x: 30,
y: yy,
"symbolSize": size1,
"category": "购车咨询",
"draggable": "true"
}, {
x: 30,
y: yy1,
"name": "价格优惠",
"symbolSize": size1,
"category": "购车咨询",
"draggable": "true"
}, {
x: 40,
y: yy,
"name": "购车流程",
"symbolSize": size1,
"category": "购车咨询",
"draggable": "true",
"value": 1
}, {
x: 40,
y: yy,
"name": "全款买车",
"symbolSize": size1,
"category": "购车咨询",
"draggable": "true",
"value": 1
}, {
x: 40,
y: yy,
"name": "手续办理",
"symbolSize": size1,
"category": "购车咨询",
"draggable": "true",
"value": 1
}, {
x: 40,
y: yy,
"name": "合同签订",
"symbolSize": size1,
"category": "购车咨询",
"draggable": "true",
"value": 1
}, {
x: 40,
y: yy,
"name": "车辆出险证明",
"symbolSize": size1,
"category": "购车咨询",
"draggable": "true",
"value": 1
}, {
x: 40,
y: yy,
"name": "车辆落户",
"symbolSize": size1,
"category": "购车咨询",
"draggable": "true",
"value": 1
}, {
x: 40,
y: yy,
"name": "牌照问题",
"symbolSize": size1,
"category": "购车咨询",
"draggable": "true",
"value": 1
}, {
x: 50,
y: yy,
"name": "车贷业务",
"symbolSize": size,
"category": "车贷业务",
"draggable": "true",
label: {
normal: {
position: 'inside',
fontSize: 14,
color: '#fff',
}
},
}, {
x: 60,
y: yy1,
"name": "付一半产品",
"symbolSize": size1,
"category": "车贷业务",
"draggable": "true"
}, {
x: 70,
y: yy,
"name": "指定险种",
"symbolSize": size1,
"category": "车贷业务",
"draggable": "true"
}, {
x: 80,
y: yy1,
"name": "尾款支付",
"symbolSize": size1,
"category": "车贷业务",
"draggable": "true"
}, {
x: 80,
y: yy1,
"name": "信审申请",
"symbolSize": size1,
"category": "车贷业务",
"draggable": "true"
}, {
x: 80,
y: yy1,
"name": "贷款分期",
"symbolSize": size1,
"category": "车贷业务",
"draggable": "true"
}, {
x: 80,
y: yy1,
"name": "第三方金融",
"symbolSize": size1,
"category": "车贷业务",
"draggable": "true"
}, {
x: 80,
y: yy1,
"name": "一车一分期方案",
"symbolSize": size1,
"category": "车贷业务",
"draggable": "true"
}, {
x: 80,
y: yy1,
"name": "提前还款",
"symbolSize": size1,
"category": "车贷业务",
"draggable": "true"
}, {
x: 90,
y: yy1,
"name": "费用咨询",
"symbolSize": size,
"category": "费用咨询",
"draggable": "true",
label: {
normal: {
position: 'inside',
fontSize: 14,
color: '#fff',
}
},
}, {
x: 100,
y: yy1,
"name": "GPS费用",
"symbolSize": size1,
"category": "费用咨询",
"draggable": "true"
}, {
x: 110,
y: yy1,
"name": "定金",
"symbolSize": size1,
"category": "费用咨询",
"draggable": "true"
}, {
x: 120,
y: yy1,
"name": "其他费用",
"symbolSize": size1,
"category": "费用咨询",
"draggable": "true"
}, {
x: 120,
y: yy1,
"name": "年费率",
"symbolSize": size1,
"category": "费用咨询",
"draggable": "true"
}, {
x: 120,
y: yy1,
"name": "违约金",
"symbolSize": size1,
"category": "费用咨询",
"draggable": "true"
}, {
x: 120,
y: yy1,
"name": "风险保证金",
"symbolSize": size1,
"category": "费用咨询",
"draggable": "true"
}, {
x: 130,
y: yy,
"name": "车辆检测",
"symbolSize": size,
"category": "车辆检测",
"draggable": "true",
label: {
normal: {
position: 'inside',
fontSize: 14,
color: '#fff',
}
},
}, {
x: 140,
y: yy,
"name": "初步检测",
"symbolSize": size1,
"category": "车辆检测",
"draggable": "true"
}, {
x: 150,
y: yy1,
"name": "检测报告",
"symbolSize": size1,
"category": "车辆检测",
"draggable": "true"
}, {
x: 160,
y: yy1,
"name": "重大事故排查",
"symbolSize": size1,
"category": "车辆检测",
"draggable": "true"
}, {
x: 160,
y: yy1,
"name": "158项排查",
"symbolSize": size1,
"category": "车辆检测",
"draggable": "true"
}, {
x: 160,
y: yy1,
"name": "双重检测",
"symbolSize": size1,
"category": "车辆检测",
"draggable": "true"
}, {
x: 160,
y: yy1,
"name": "看车咨询",
"symbolSize": size,
"category": "看车咨询",
"draggable": "true",
label: {
normal: {
position: 'inside',
fontSize: 14,
color: '#fff',
}
},
}, {
x: 170,
y: yy1,
"name": "看车费用",
"symbolSize": size1,
"category": "看车咨询",
"draggable": "true"
}, {
x: 180,
y: yy1,
"name": "异地看车",
"symbolSize": size1,
"category": "看车咨询",
"draggable": "true"
}, {
x: 190,
y: yy1,
"name": "视频看车",
"symbolSize": size1,
"category": "看车咨询",
"draggable": "true"
}, {
x: 190,
y: yy1,
"name": "实地看车",
"symbolSize": size1,
"category": "看车咨询",
"draggable": "true"
}, {
x: 190,
y: yy1,
"name": "预约看车",
"symbolSize": size1,
"category": "看车咨询",
"draggable": "true"
}, {
x: 200,
y: yy,
"name": "售后服务",
"symbolSize": size,
"category": "售后服务",
"draggable": "true",
label: {
normal: {
position: 'inside',
fontSize: 14,
color: '#fff',
}
},
}, {
x: 210,
y: yy1,
"name": "一年两万公里保修",
"symbolSize": size1,
"category": "售后服务",
"draggable": "true"
}, {
x: 220,
y: yy,
"name": "三十天包退",
"symbolSize": size1,
"category": "售后服务",
"draggable": "true"
}, {
x: 230,
y: yy1,
"name": "无理由退款",
"symbolSize": size1,
"category": "售后服务",
"draggable": "true"
}, {
x: 240,
y: yy1,
"name": "预约退款",
"symbolSize": size1,
"category": "售后服务",
"draggable": "true"
}, {
"name": "车源状态",
x: 250,
y: yy1,
"symbolSize": size,
"category": "车源状态",
"draggable": "true",
label: {
normal: {
position: 'inside',
fontSize: 14,
color: '#fff',
}
},
}, {
"name": "个人车源",
x: 260,
y: yy1,
"symbolSize": size1,
"category": "车源状态",
"draggable": "true"
}, {
"name": "确认在售车辆",
x: 270,
y: yy1,
"symbolSize": size1,
"category": "车源状态",
"draggable": "true"
}, {
x: 280,
y: yy1,
"name": "相关业务",
"symbolSize": size,
"category": "相关业务",
"draggable": "true",
label: {
normal: {
position: 'inside',
fontSize: 14,
color: '#fff',
}
},
}, {
"name": "委托卖车",
x: 290,
y: yy1,
"symbolSize": size1,
"category": "相关业务",
"draggable": "true"
}, {
"name": "车辆置换",
x: 290,
y: yy1,
"symbolSize": size1,
"category": "相关业务",
"draggable": "true"
}, {
"name": "到期还车",
x: 300,
y: yy1,
"symbolSize": size1,
"category": "相关业务",
"draggable": "true"
}],
// 对应关系
links: [{
"source": " ",
"target": "购车咨询"
}, {
"source": " ",
"target": "车源状态"
}, {
"source": " ",
"target": "车贷业务"
}, {
"source": " ",
"target": "相关业务"
}, {
"source": " ",
"target": "费用咨询"
}, {
"source": " ",
"target": "车辆检测"
}, {
"source": " ",
"target": "看车咨询"
}, {
"source": " ",
"target": "售后服务"
}, {
"source": "购车咨询",
"target": "费用计算"
}, {
"source": "购车咨询",
"target": "价格优惠"
}, {
"source": "购车咨询",
"target": "购车流程"
}, {
"source": "购车咨询",
"target": "全款买车"
}, {
"source": "购车咨询",
"target": "手续办理"
}, {
"source": "购车咨询",
"target": "合同签订"
}, {
"source": "购车咨询",
"target": "车辆出险证明"
}, {
"source": "购车咨询",
"target": "车辆落户"
}, {
"source": "购车咨询",
"target": "牌照问题"
}, {
"source": "费用咨询",
"target": "GPS费用"
}, {
"source": "车贷业务",
"target": "付一半产品"
}, {
"source": "车贷业务",
"target": "指定险种"
}, {
"source": "车贷业务",
"target": "尾款支付"
}, {
"source": "车贷业务",
"target": "信审申请"
}, {
"source": "车贷业务",
"target": "贷款分期"
}, {
"source": "车贷业务",
"target": "第三方金融"
}, {
"source": "车贷业务",
"target": "一车一分期方案"
}, {
"source": "车贷业务",
"target": "提前还款"
}, {
"source": "费用咨询",
"target": "定金"
}, {
"source": "费用咨询",
"target": "其他费用"
}, {
"source": "费用咨询",
"target": "年费率"
}, {
"source": "费用咨询",
"target": "违约金"
}, {
"source": "费用咨询",
"target": "风险保证金"
}, {
"source": "初步检测",
"target": "车辆检测"
}, {
"source": "车辆检测",
"target": "检测报告"
}, {
"source": "车辆检测",
"target": "重大事故排查"
}, {
"source": "车辆检测",
"target": "158项排查"
}, {
"source": "车辆检测",
"target": "双重检测"
}, {
"source": "看车咨询",
"target": "看车费用"
}, {
"source": "看车咨询",
"target": "异地看车"
}, {
"source": "看车咨询",
"target": "视频看车"
}, {
"source": "看车咨询",
"target": "预约看车"
}, {
"source": "看车咨询",
"target": "实地看车"
}, {
"source": "售后服务",
"target": "一年两万公里保修"
}, {
"source": "售后服务",
"target": "三十天包退"
}, {
"source": "售后服务",
"target": "无理由退款"
}, {
"source": "售后服务",
"target": "预约退款"
}, {
"source": "车源状态",
"target": "个人车源"
}, {
"source": "车源状态",
"target": "确认在售车辆"
}, {
"source": "相关业务",
"target": "委托卖车"
}, {
"source": "相关业务",
"target": "到期还车"
}, {
"source": "相关业务",
"target": "车辆置换"
}],
// 大的节点名称
categories: [{
'name': ' '
}, {
'name': '购车咨询'
}, {
'name': '车源状态'
}, {
'name': '车贷业务'
}, {
'name': '相关业务'
}, {
'name': '费用咨询'
}, {
'name': '车辆检测'
}, {
'name': '看车咨询'
}, {
'name': '售后服务'
}],
focusNodeAdjacency: true,
roam: true,
label: {
normal: {
show: true,
color: 'source',
formatter: '{b}',
fontSize: 13,
fontStyle: '600',
position: 'top',
}
},
lineStyle: {
normal: {
width: 2,
color: 'source',
curveness: 0,
type: "solid"
}
}
}]
};
分类: 可视化技术