slides/arch-brief/asset/ec-demo/reuse-axis-parallel.html (182 lines of code) (raw):
<html>
<head>
<meta charset="utf-8">
<script src="../common/echarts.min.js"></script>
<script src="../common/jquery.min.js"></script>
<script src="../data/nutrients.js"></script>
<link rel="stylesheet" href="../common/reset.css">
</head>
<body>
<style>
</style>
<div id="main"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var indices = {
name: 0,
group: 1,
id: 16
};
var schema = [
{name: 'name', index: 0},
{name: 'group', index: 1},
{name: 'protein', index: 2},
{name: 'calcium', index: 3},
{name: 'sodium', index: 4},
{name: 'fiber', index: 5},
{name: 'vitaminc', index: 6},
{name: 'potassium', index: 7},
{name: 'carbohydrate', index: 8},
{name: 'sugars', index: 9},
{name: 'fat', index: 10},
{name: 'water', index: 11},
{name: 'calories', index: 12},
{name: 'saturated', index: 13},
{name: 'monounsat', index: 14},
{name: 'polyunsat', index: 15},
{name: 'id', index: 16}
];
var groupCategories = [];
var groupColors = [];
normalizeData(window.rawData);
myChart.setOption(option = getOption(window.rawData));
function normalizeData(originData) {
var groupMap = {};
originData.forEach(function (row) {
var groupName = row[indices.group];
if (!groupMap.hasOwnProperty(groupName)) {
groupMap[groupName] = 1;
}
});
originData.forEach(function (row) {
row.forEach(function (item, index) {
if (index !== indices.name
&& index !== indices.group
&& index !== indices.id
) {
// Convert null to zero, as all of them under unit "g".
row[index] = parseFloat(item) || 0;
}
});
});
for (var groupName in groupMap) {
if (groupMap.hasOwnProperty(groupName)) {
groupCategories.push(groupName);
}
}
var hStep = Math.round(300 / (groupCategories.length - 1));
for (var i = 0; i < groupCategories.length; i++) {
groupColors.push(echarts.color.modifyHSL('#5A94DF', hStep * i));
}
}
function getOption(data) {
var lineStyle = {
normal: {
width: 0.5,
opacity: 0.05
}
};
return {
backgroundColor: '#333',
tooltip: {
padding: 10,
backgroundColor: '#222',
borderColor: '#777',
borderWidth: 1,
formatter: function (obj) {
var value = obj[0].value;
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
+ schema[1].name + '：' + value[1] + '<br>'
+ schema[2].name + '：' + value[2] + '<br>'
+ schema[3].name + '：' + value[3] + '<br>'
+ schema[4].name + '：' + value[4] + '<br>'
+ schema[5].name + '：' + value[5] + '<br>'
+ schema[6].name + '：' + value[6] + '<br>';
}
},
visualMap: {
show: false,
type: 'piecewise',
categories: groupCategories,
dimension: indices.group,
inRange: {
color: groupColors //['#d94e5d','#eac736','#50a3ba']
},
outOfRange: {
color: ['#ccc'] //['#d94e5d','#eac736','#50a3ba']
},
top: 20,
textStyle: {
color: '#fff'
},
realtime: false
},
parallelAxis: [
{dim: 16, scale: true, nameLocation: 'end'},
{dim: 2, nameLocation: 'end'},
{dim: 4, nameLocation: 'end'},
{dim: 3, nameLocation: 'end'},
{dim: 5, nameLocation: 'end'},
{dim: 6, nameLocation: 'end'},
{dim: 7, nameLocation: 'end'},
{dim: 8, nameLocation: 'end'},
{dim: 9, nameLocation: 'end'},
{dim: 10, nameLocation: 'end'},
{dim: 11, nameLocation: 'end'},
{dim: 12, nameLocation: 'end'},
{dim: 13, nameLocation: 'end'},
{dim: 14, nameLocation: 'end'},
{dim: 15, nameLocation: 'end'}
],
parallel: {
top: 20,
left: 30,
right: 30,
bottom: 30,
layout: 'vertical',
parallelAxisDefault: {
type: 'value',
nameTextStyle: {
color: '#fff',
fontSize: 14
},
axisLine: {
lineStyle: {
color: '#aaa'
}
},
axisTick: {
lineStyle: {
color: '#777'
}
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 12,
color: '#777'
}
},
realtime: false
}
},
animation: false,
series: [
{
name: 'nutrients',
type: 'parallel',
lineStyle: lineStyle,
inactiveOpacity: 0,
activeOpacity: 0.01,
progressive: 500,
smooth: true,
data: data
}
]
};
}
</script>
</body>
</html>