代码原文
<!DOCTYPE html>
<html>
<head>
<title>数据可视化—实验5—高维非空间数据可视化</title>
<meta charset = "utf-8">
<script src = "echarts.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="main" style="width:1400px;height:600px;"></div>
<script>
//读取csv文件，准备数据集
d3.csv("time_allocate_day.csv",function(error,csvdata){
if(error){
console.log(error);
}else{
var data = [];
for(let i=0; i<csvdata.length; i++){ //遍历读入的csv文件数据
data.push([
csvdata[i].id,
csvdata[i].place_A,
csvdata[i].place_B,
csvdata[i].place_C,
csvdata[i].place_D,
csvdata[i].place,
csvdata[i].dining,
csvdata[i].service,
csvdata[i].aisle1,
csvdata[i].aisle2,
csvdata[i].stair,
csvdata[i].poster,
csvdata[i].sign,
csvdata[i].rest,
csvdata[i].display,
csvdata[i].room1,
csvdata[i].room2,
csvdata[i].room3,
csvdata[i].room4,
csvdata[i].room5,
csvdata[i].room6
]);
}
console.log(data);
var schema = [ //定义所需的平行坐标轴
{name:'id',index:0,text:'id'},
{name:'place_A',index:1,text:'会场A'},
{name:'place_B',index:2,text:'会场B'},
{name:'place_C',index:3,text:'会场C'},
{name:'place_D',index:4,text:'会场D'},
{name:'place',index:5,text:'主会场'},
{name:'dining',index:6,text:'餐厅'},
{name:'service',index:7,text:'服务台'},
{name:'aisle1',index:8,text:'过道1'},
{name:'axsle2',index:9,text:'过道2'},
{name:'stair',index:10,text:'楼道'},
{name:'poster',index:11,text:'海报区'},
{name:'sign',index:12,text:'签到处'},
{name:'rest',index:13,text:'休息区'},
{name:'display',index:14,text:'展厅'},
{name:'room1',index:15,text:'房间1'},
{name:'room2',index:16,text:'房间2'},
{name:'room3',index:17,text:'房间3'},
{name:'room4',index:18,text:'房间4'},
{name:'room5',index:19,text:'房间5'},
{name:'room6',index:20,text:'房间6'}
];
var myChart = echarts.init(document.getElementById('main'));
var option = {
toolbox:{ //工具栏
show:true,
orient: 'horizontal',
showTitle: true, //鼠标覆盖的时候是否显示工具标题
feature:{ //功能
restore:{show:true}, //展示还原按键功能
dataView:{ //展示数据集
readOnly: true
}
}
},
visualMap:{
show:false, //不显示手柄
color:[
'#00441b',
'#74c476',
]
},
parallelAxis:[ //平行坐标系中的坐标轴配置
//每个坐标轴都有个'dim'属性，表示坐标轴的维度号
{ dim:0,
name: schema[0].text,
type:'category'
},
{dim:1,name: schema[1].text},
{dim:2,name: schema[2].text},
{dim:3,name: schema[3].text},
{dim:4,name: schema[4].text},
{dim:5,name: schema[5].text},
{dim:6,name: schema[6].text},
{dim:7,name: schema[7].text},
{dim:8,name: schema[8].text},
{dim:9,name: schema[9].text},
{dim:10,name: schema[10].text},
{dim:11,name: schema[11].text},
{dim:12,name: schema[12].text},
{dim:13,name: schema[13].text},
{dim:14,name: schema[14].text},
{dim:15,name: schema[15].text},
{dim:16,name: schema[16].text},
{dim:17,name: schema[17].text},
{dim:18,name: schema[18].text},
{dim:19,name: schema[19].text},
{dim:20,name: schema[20].text}
],
parallel:{ //平行坐标系的定义
left:'5%',
right:'13%',
bottom:'10%',
top:'20%',
name:'id',
parallelAxisDefault:{ //配置坐标轴的公有属性
type:'value',
nameLocation: 'end',
nameGap: 20, //坐标轴名称与轴线之间的距离
nameTextStyle:{
fontSize:15,
fontFamily:'宋体',
},
axisLine:{ //坐标轴线样式
lineStyle:{
color:'#555'
}
},
axisLabel:{ //坐标轴刻度标签样式
color:'#000'
},
},
},
series:{
type:'parallel',
data:data,
lineStyle:{ //绘制的图形样式
normal:{
width:1,
opacity:0.5,
color:'#51689b'
}
},
emphasis:{ //鼠标覆盖时线的高亮显示样式
lineStyle:{
color: 'red',
width:2,
},
inactiveOpacity: 0.05, //未被选中的线条会被设置成这个透明度
activeOpacity:2, //被选中的线条会被设置成这个透明度
}
}
};
myChart.setOption(option);
}
});
</script>
</body>
</html>