420 lines
17 KiB
HTML
Generated
420 lines
17 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.
|
|
-->
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="lib/simpleRequire.js"></script>
|
|
<script src="lib/config.js"></script>
|
|
<script src='lib/jquery.min.js'></script>
|
|
<script src="../dist/echarts.js"></script>
|
|
<script src="lib/testHelper.js"></script>
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
</head>
|
|
<body>
|
|
<style>
|
|
</style>
|
|
|
|
<div id="main0"></div>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts', 'ecStat', 'ecSimpleTransform', 'ecSimpleOptionPlayer',
|
|
'data/life-expectancy-table.json'
|
|
], function (echarts, ecStat, ecSimpleTransform, ecSimpleOptionPlayer, rawData) {
|
|
|
|
echarts.registerTransform(ecSimpleTransform.aggregate);
|
|
echarts.registerTransform(ecSimpleTransform.id);
|
|
|
|
const COLORS = [
|
|
'#37A2DA', '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
|
|
];
|
|
var COUNTRY_A = 'Germany';
|
|
var COUNTRY_B = 'France';
|
|
const CONTENT_COLORS = {
|
|
[COUNTRY_A]: '#37a354',
|
|
[COUNTRY_B]: '#e06343'
|
|
};
|
|
const Z2 = {
|
|
[COUNTRY_A]: 1,
|
|
[COUNTRY_B]: 2
|
|
}
|
|
|
|
// const COLORS = [
|
|
// {name: 'Income', index: 0, text: '人均收入', unit: '美元'},
|
|
// {name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
|
|
// {name: 'Population', index: 2, text: '总人口', unit: ''},
|
|
// {name: 'Country', index: 3, text: '国家', unit: ''}
|
|
// ];
|
|
|
|
var RAW_DATA_DIMENSIONS = ['Income', 'Life Expectancy', 'Population', 'Country', 'Year'];
|
|
var ID_RAW_DATA_DIMENSIONS = ['Income', 'Life Expectancy', 'Population', 'Country', 'Year', 'Id'];
|
|
var SUM_INCOME_DIMENSIONS = ['Income', 'Country'];
|
|
var ANIMATION_DURATION_UPDATE = 1000;
|
|
var AXIS_NAME_STYLE = {
|
|
nameGap: 25,
|
|
nameTextStyle: {
|
|
fontSize: 20
|
|
},
|
|
};
|
|
|
|
var baseOption = {
|
|
animationDurationUpdate: ANIMATION_DURATION_UPDATE,
|
|
dataset: [{
|
|
id: 'RawData',
|
|
source: rawData
|
|
}, {
|
|
id: 'IdRawData',
|
|
fromDatasetId: 'RawData',
|
|
transform: [{
|
|
type: 'filter',
|
|
config: {
|
|
dimension: 'Year', gte: 1950
|
|
}
|
|
}, {
|
|
type: 'ecSimpleTransform:id',
|
|
config: {
|
|
dimensionIndex: ID_RAW_DATA_DIMENSIONS.indexOf('Id'),
|
|
dimensionName: 'Id'
|
|
}
|
|
}]
|
|
}, {
|
|
id: 'CountryABData',
|
|
fromDatasetId: 'IdRawData',
|
|
transform: {
|
|
type: 'filter',
|
|
config: {
|
|
or: [{
|
|
dimension: 'Country', '=': COUNTRY_A
|
|
}, {
|
|
dimension: 'Country', '=': COUNTRY_B
|
|
}]
|
|
}
|
|
}
|
|
}, {
|
|
id: 'CountryABSumIncome',
|
|
fromDatasetId: 'CountryABData',
|
|
transform: {
|
|
type: 'ecSimpleTransform:aggregate',
|
|
config: {
|
|
resultDimensions: [
|
|
{ from: 'Income', method: 'sum' },
|
|
{ from: 'Country' }
|
|
],
|
|
groupBy: 'Country'
|
|
}
|
|
}
|
|
}],
|
|
tooltip: {}
|
|
};
|
|
|
|
var optionCreators = {
|
|
|
|
'CountryAB_Year_Income_Bar': function (datasetId, onlyCountry) {
|
|
return {
|
|
xAxis: {
|
|
type: 'category'
|
|
},
|
|
yAxis: {
|
|
name: 'Income',
|
|
...AXIS_NAME_STYLE
|
|
},
|
|
series: {
|
|
type: 'custom',
|
|
coordinateSystem: 'cartesian2d',
|
|
datasetId: datasetId,
|
|
encode: {
|
|
x: 'Year',
|
|
y: 'Income',
|
|
itemName: 'Year',
|
|
tooltip: ['Income'],
|
|
},
|
|
renderItem: function (params, api) {
|
|
var valPos = api.coord([api.value('Year'), api.value('Income')]);
|
|
var basePos = api.coord([api.value('Year'), 0]);
|
|
var width = api.size([1, 0])[0] * 0.9;
|
|
|
|
var country = api.value('Country');
|
|
if (onlyCountry != null && onlyCountry !== country) {
|
|
return;
|
|
}
|
|
|
|
return {
|
|
type: 'group',
|
|
children: [{
|
|
type: 'rect',
|
|
transition: ['shape', 'style'],
|
|
shape: {
|
|
x: basePos[0],
|
|
y: basePos[1],
|
|
width: width,
|
|
height: valPos[1] - basePos[1]
|
|
},
|
|
z2: Z2[country],
|
|
style: {
|
|
fill: CONTENT_COLORS[country],
|
|
opacity: 0.8
|
|
}
|
|
}]
|
|
};
|
|
}
|
|
}
|
|
};
|
|
},
|
|
|
|
'CountryAB_Year_Population_Bar': function (datasetId, onlyCountry) {
|
|
return {
|
|
xAxis: {
|
|
type: 'category'
|
|
},
|
|
yAxis: {
|
|
name: 'Population',
|
|
...AXIS_NAME_STYLE
|
|
},
|
|
series: {
|
|
type: 'custom',
|
|
coordinateSystem: 'cartesian2d',
|
|
datasetId: datasetId,
|
|
encode: {
|
|
x: 'Year',
|
|
y: 'Population',
|
|
itemName: 'Year',
|
|
tooltip: ['Population'],
|
|
},
|
|
renderItem: function (params, api) {
|
|
var valPos = api.coord([api.value('Year'), api.value('Population')]);
|
|
var basePos = api.coord([api.value('Year'), 0]);
|
|
var width = api.size([1, 0])[0] * 0.9;
|
|
|
|
var country = api.value('Country');
|
|
if (onlyCountry != null && onlyCountry !== country) {
|
|
return;
|
|
}
|
|
|
|
return {
|
|
type: 'group',
|
|
children: [{
|
|
type: 'rect',
|
|
transition: ['shape', 'style'],
|
|
shape: {
|
|
x: basePos[0],
|
|
y: basePos[1],
|
|
width: width,
|
|
height: valPos[1] - basePos[1]
|
|
},
|
|
style: {
|
|
fill: CONTENT_COLORS[country]
|
|
}
|
|
}]
|
|
};
|
|
}
|
|
}
|
|
};
|
|
},
|
|
|
|
'CountryAB_Income_Population_Scatter': function (datasetId, onlyCountry) {
|
|
return {
|
|
xAxis: {
|
|
name: 'Income',
|
|
...AXIS_NAME_STYLE,
|
|
scale: true
|
|
},
|
|
yAxis: {
|
|
name: 'Population',
|
|
...AXIS_NAME_STYLE,
|
|
scale: true
|
|
},
|
|
series: {
|
|
type: 'custom',
|
|
coordinateSystem: 'cartesian2d',
|
|
datasetId: datasetId,
|
|
encode: {
|
|
x: 'Income',
|
|
y: 'Population',
|
|
itemName: ['Year'],
|
|
tooltip: ['Income', 'Population', 'Country']
|
|
},
|
|
renderItem: function (params, api) {
|
|
var pos = api.coord([api.value('Income'), api.value('Population')]);
|
|
|
|
var country = api.value('Country');
|
|
if (onlyCountry != null && onlyCountry !== country) {
|
|
return;
|
|
}
|
|
|
|
return {
|
|
type: 'group',
|
|
children: [{
|
|
type: 'circle',
|
|
transition: ['shape', 'style'],
|
|
shape: {
|
|
cx: pos[0],
|
|
cy: pos[1],
|
|
r: 10
|
|
},
|
|
style: {
|
|
fill: CONTENT_COLORS[country],
|
|
lineWidth: 1,
|
|
stroke: '#333',
|
|
opacity: 1,
|
|
enterFrom: {
|
|
opacity: 0
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
}
|
|
}
|
|
};
|
|
},
|
|
|
|
|
|
'CountryAB_Income_Sum_Bar': function (datasetId) {
|
|
return {
|
|
xAxis: {
|
|
name: 'Income',
|
|
...AXIS_NAME_STYLE
|
|
},
|
|
yAxis: {
|
|
type: 'category'
|
|
},
|
|
series: {
|
|
type: 'custom',
|
|
coordinateSystem: 'cartesian2d',
|
|
datasetId: datasetId,
|
|
encode: {
|
|
x: 'Income',
|
|
y: 'Country',
|
|
itemName: ['Country'],
|
|
tooltip: ['Income']
|
|
},
|
|
renderItem: function (params, api) {
|
|
var country = api.ordinalRawValue('Country');
|
|
var valPos = api.coord([api.value('Income'), country]);
|
|
var basePos = api.coord([0, country]);
|
|
var height = api.size([0, 1])[1] * 0.4;
|
|
|
|
return {
|
|
type: 'group',
|
|
children: [{
|
|
type: 'rect',
|
|
transition: ['shape', 'style'],
|
|
shape: {
|
|
x: basePos[0],
|
|
y: valPos[1] - height / 2,
|
|
width: valPos[0] - basePos[0],
|
|
height: height
|
|
},
|
|
style: {
|
|
fill: CONTENT_COLORS[country]
|
|
// lineWidth: 0,
|
|
// stroke: '#333',
|
|
// opacity: 1,
|
|
// enterFrom: {
|
|
// opacity: 0
|
|
// }
|
|
}
|
|
}]
|
|
};
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
};
|
|
|
|
var player = ecSimpleOptionPlayer.create({
|
|
chart: function () {
|
|
return chart;
|
|
},
|
|
seriesIndex: 0,
|
|
replaceMerge: ['xAxis', 'yAxis'],
|
|
dataMeta: {
|
|
'IdRawData': {
|
|
dimensions: ID_RAW_DATA_DIMENSIONS,
|
|
uniqueDimension: 'Id'
|
|
},
|
|
'CountryABData': {
|
|
dimensions: ID_RAW_DATA_DIMENSIONS,
|
|
uniqueDimension: 'Id'
|
|
},
|
|
'CountryABSumIncome': {
|
|
dimensions: SUM_INCOME_DIMENSIONS,
|
|
uniqueDimension: 'Country'
|
|
}
|
|
},
|
|
optionList: [{
|
|
dataMetaKey: 'CountryABData',
|
|
option: optionCreators['CountryAB_Year_Income_Bar']('CountryABData', COUNTRY_A)
|
|
}, {
|
|
dataMetaKey: 'CountryABData',
|
|
option: optionCreators['CountryAB_Year_Population_Bar']('CountryABData', COUNTRY_A)
|
|
}, {
|
|
dataMetaKey: 'CountryABData',
|
|
option: optionCreators['CountryAB_Income_Population_Scatter']('CountryABData', COUNTRY_A)
|
|
}, {
|
|
dataMetaKey: 'CountryABData',
|
|
option: optionCreators['CountryAB_Income_Population_Scatter']('CountryABData')
|
|
}, {
|
|
dataMetaKey: 'CountryABSumIncome',
|
|
option: optionCreators['CountryAB_Income_Sum_Bar']('CountryABSumIncome')
|
|
}, {
|
|
dataMetaKey: 'CountryABData',
|
|
option: optionCreators['CountryAB_Year_Income_Bar']('CountryABData')
|
|
}]
|
|
});
|
|
|
|
|
|
var chart = testHelper.create(echarts, 'main0', {
|
|
title: [
|
|
'Test: buttons, should morph animation merge/split.',
|
|
'Test: click buttons **before animation finished**, should no blink.',
|
|
'Test: click buttons **twice**, should no blink.'
|
|
],
|
|
option: baseOption,
|
|
lazyUpdate: true,
|
|
height: 600,
|
|
buttons: [{
|
|
text: 'next',
|
|
onclick: function () {
|
|
player.next();
|
|
}
|
|
}, {
|
|
text: 'previous',
|
|
onclick: function () {
|
|
player.previous();
|
|
}
|
|
}]
|
|
});
|
|
|
|
player.next();
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html> |