256 lines
10 KiB
HTML
Generated
256 lines
10 KiB
HTML
Generated
<!DOCTYPE html>
|
|
<!--
|
|
Licensed to the Apache Software Foundation (ASF) under one
|
|
or more contributor license agreements. See the NOTICE file
|
|
distributed with this work for additional information
|
|
regarding copyright ownership. The ASF licenses this file
|
|
to you under the Apache License, Version 2.0 (the
|
|
"License"); you may not use this file except in compliance
|
|
with the License. You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing,
|
|
software distributed under the License is distributed on an
|
|
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
KIND, either express or implied. See the License for the
|
|
specific language governing permissions and limitations
|
|
under the License.
|
|
-->
|
|
|
|
|
|
<!--
|
|
This data and the design of this chart is copied from:
|
|
http://bl.ocks.org/syntagmatic/3150059
|
|
-->
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="lib/simpleRequire.js"></script>
|
|
<script src="lib/config.js"></script>
|
|
<script src="lib/jquery.min.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="lib/reset.css">
|
|
</head>
|
|
<body>
|
|
<style>
|
|
body {
|
|
background: #333;
|
|
}
|
|
#main {
|
|
height: 1000px;
|
|
}
|
|
</style>
|
|
<div id="main"></div>
|
|
<script>
|
|
|
|
var echarts;
|
|
var colorTool;
|
|
var chart;
|
|
var myChart;
|
|
var groupCategories = [];
|
|
var groupColors = [];
|
|
|
|
require([
|
|
'echarts',
|
|
'./data/nutrients.json'
|
|
], function (ec, data) {
|
|
|
|
echarts = ec;
|
|
colorTool = echarts.color;
|
|
|
|
var indices = {
|
|
name: 0,
|
|
group: 1,
|
|
id: 16
|
|
};
|
|
|
|
normalizeData(data);
|
|
|
|
chart = myChart = echarts.init(document.getElementById('main'));
|
|
|
|
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}
|
|
];
|
|
|
|
function normalizeData(originData) {
|
|
var groupMap = {};
|
|
originData.forEach(row => {
|
|
var groupName = row[indices.group];
|
|
if (!groupMap.hasOwnProperty(groupName)) {
|
|
groupMap[groupName] = 1;
|
|
}
|
|
});
|
|
|
|
originData.forEach(row => {
|
|
row.forEach((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(colorTool.modifyHSL('#5A94DF', hStep * i));
|
|
}
|
|
}
|
|
|
|
function getOption(data) {
|
|
|
|
var lineStyle = {
|
|
normal: {
|
|
width: 0.5,
|
|
opacity: 0.05
|
|
// shadowBlur: 10,
|
|
// shadowOffsetX: 0,
|
|
// shadowOffsetY: 0,
|
|
// shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
};
|
|
|
|
return {
|
|
backgroundColor: '#333',
|
|
tooltip: {
|
|
padding: 10,
|
|
backgroundColor: '#222',
|
|
borderColor: '#777',
|
|
borderWidth: 1
|
|
},
|
|
title: [
|
|
{
|
|
text: 'Groups',
|
|
top: 0,
|
|
left: 0,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
],
|
|
visualMap: {
|
|
show: true,
|
|
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, name: schema[16].name, scale: true, nameLocation: 'end'},
|
|
{dim: 2, name: schema[2].name, nameLocation: 'end'},
|
|
{dim: 4, name: schema[4].name, nameLocation: 'end'},
|
|
{dim: 3, name: schema[3].name, nameLocation: 'end'},
|
|
{dim: 5, name: schema[5].name, nameLocation: 'end'},
|
|
{dim: 6, name: schema[6].name, nameLocation: 'end'},
|
|
{dim: 7, name: schema[7].name, nameLocation: 'end'},
|
|
{dim: 8, name: schema[8].name, nameLocation: 'end'},
|
|
{dim: 9, name: schema[9].name, nameLocation: 'end'},
|
|
{dim: 10, name: schema[10].name, nameLocation: 'end'},
|
|
{dim: 11, name: schema[11].name, nameLocation: 'end'},
|
|
{dim: 12, name: schema[12].name, nameLocation: 'end'},
|
|
{dim: 13, name: schema[13].name, nameLocation: 'end'},
|
|
{dim: 14, name: schema[14].name, nameLocation: 'end'},
|
|
{dim: 15, name: schema[15].name, nameLocation: 'end'}
|
|
],
|
|
parallel: {
|
|
left: 280,
|
|
top: 20,
|
|
// top: 150,
|
|
// height: 300,
|
|
width: 400,
|
|
layout: 'vertical',
|
|
parallelAxisDefault: {
|
|
type: 'value',
|
|
name: 'nutrients',
|
|
nameLocation: 'end',
|
|
nameGap: 20,
|
|
nameTextStyle: {
|
|
color: '#fff',
|
|
fontSize: 14
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#aaa'
|
|
}
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: '#777'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
realtime: false
|
|
}
|
|
},
|
|
animation: false,
|
|
series: [
|
|
{
|
|
name: 'nutrients',
|
|
type: 'parallel',
|
|
lineStyle: lineStyle,
|
|
inactiveOpacity: 0,
|
|
activeOpacity: 0.01,
|
|
progressive: 500,
|
|
smooth: true,
|
|
data: data
|
|
}
|
|
]
|
|
};
|
|
}
|
|
|
|
console.time('render');
|
|
chart.setOption(getOption(data));
|
|
console.timeEnd('render');
|
|
|
|
chart.on('axisAreaSelected', function (event) {
|
|
// var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
|
|
// console.log('北京: ', indices);
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |