919 lines
40 KiB
HTML
Generated
919 lines
40 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="lib/facePrint.js"></script>
|
|
<script src="lib/testHelper.js"></script>
|
|
<!-- <script src="ut/lib/canteen.js"></script> -->
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
</head>
|
|
<body>
|
|
<style>
|
|
</style>
|
|
|
|
|
|
|
|
<div id="transition_facet_cartesian"></div>
|
|
<div id="notMerge_transition_replaceMerge_newView"></div>
|
|
<div id="main_replaceMerge_keep_update"></div>
|
|
<div id="transition_dots"></div>
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var optionBase = {
|
|
color: ['#eb6134', '#eb9934', '#348feb', '#36b6d9'],
|
|
dataset: {
|
|
source: [
|
|
[null, 'sweet zongzi', 'salty zongzi', 'sweet milk tea', 'salty milk tea'],
|
|
['2012-01', 32, 65, 71, 31],
|
|
['2012-02', 41, 67, 89, 23],
|
|
['2012-03', 58, 61, 97, 12],
|
|
['2012-04', 67, 73, 105, 9],
|
|
['2012-05', 72, 67, 122, 18],
|
|
['2012-06', 94, 79, 118, 32],
|
|
['2012-07', 79, 89, 131, 37],
|
|
['2012-08', 65, 76, 103, 41],
|
|
['2012-09', 69, 81, 84, 48],
|
|
['2012-10', 74, 64, 104, 38],
|
|
['2012-11', 91, 76, 111, 51],
|
|
['2012-12', 64, 68, 121, 61]
|
|
]
|
|
},
|
|
legend: {},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
dataZoom: [{
|
|
type: 'slider',
|
|
height: 15
|
|
}, {
|
|
type: 'inside'
|
|
}],
|
|
series: [{
|
|
type: 'bar',
|
|
encode: { x: 0, y: 1, seriesName: 1 }
|
|
}, {
|
|
type: 'bar',
|
|
encode: { x: 0, y: 3, seriesName: 3 }
|
|
}, {
|
|
type: 'bar',
|
|
encode: { x: 0, y: 2, seriesName: 2 }
|
|
}, {
|
|
type: 'bar',
|
|
encode: { x: 0, y: 4, seriesName: 4 }
|
|
}]
|
|
};
|
|
|
|
var optionSingle = makeSingleCartesianOption();
|
|
var option0 = mergeOption(echarts, optionBase, optionSingle);
|
|
|
|
function mergeOption(echarts, target, source) {
|
|
echarts.util.each(source, function (srcCmpts, mainType) {
|
|
var tarCmpts = target[mainType] = toArray(target[mainType]);
|
|
echarts.util.each(toArray(srcCmpts), function (srcCmpt, index) {
|
|
tarCmpts[index] = echarts.util.merge(tarCmpts[index], srcCmpt, true);
|
|
});
|
|
});
|
|
function toArray(some) {
|
|
return echarts.util.isArray(some) ? some : some ? [some] : [];
|
|
}
|
|
return target;
|
|
}
|
|
|
|
function makeSingleCartesianOption() {
|
|
return {
|
|
grid: {
|
|
},
|
|
xAxis: {
|
|
type: 'category'
|
|
},
|
|
yAxis: {
|
|
max: 150,
|
|
axisLine: { show: false },
|
|
axisTick: { show: false }
|
|
},
|
|
axisPointer: {
|
|
link: [{xAxisIndex: 0}]
|
|
},
|
|
dataZoom: [{
|
|
xAxisIndex: 0
|
|
}, {
|
|
xAxisIndex: 0
|
|
}],
|
|
series: [{
|
|
xAxisIndex: 0,
|
|
yAxisIndex: 0
|
|
}, {
|
|
xAxisIndex: 0,
|
|
yAxisIndex: 0
|
|
}, {
|
|
xAxisIndex: 0,
|
|
yAxisIndex: 0
|
|
}, {
|
|
xAxisIndex: 0,
|
|
yAxisIndex: 0
|
|
}]
|
|
};
|
|
}
|
|
function makeDoubleCartesianOption() {
|
|
return {
|
|
grid: [{
|
|
bottom: '52%'
|
|
}, {
|
|
top: '52%'
|
|
}],
|
|
dataZoom: [{
|
|
xAxisIndex: [0, 1]
|
|
}, {
|
|
xAxisIndex: [0, 1]
|
|
}],
|
|
axisPointer: {
|
|
link: [{xAxisIndex: [0, 1]}]
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
axisLabel: { show: false },
|
|
axisTick: { show: false },
|
|
axisLine: { show: false },
|
|
gridIndex: 0
|
|
}, {
|
|
type: 'category',
|
|
// axisTick: { show: false },
|
|
axisLine: { onZero: false },
|
|
gridIndex: 1
|
|
}],
|
|
yAxis: [{
|
|
name: 'sweet',
|
|
max: 150,
|
|
nameLocation: 'center',
|
|
nameGap: 40,
|
|
axisLine: { show: false },
|
|
axisTick: { show: false },
|
|
axisLabel: { color: '#000' },
|
|
gridIndex: 0
|
|
}, {
|
|
name: 'salty',
|
|
max: 150,
|
|
nameLocation: 'center',
|
|
nameGap: 40,
|
|
inverse: true,
|
|
axisLine: { show: false },
|
|
axisTick: { show: false },
|
|
axisLabel: { color: '#000' },
|
|
gridIndex: 1
|
|
}],
|
|
series: [{
|
|
xAxisIndex: 0,
|
|
yAxisIndex: 0
|
|
}, {
|
|
xAxisIndex: 0,
|
|
yAxisIndex: 0
|
|
}, {
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1
|
|
}, {
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1
|
|
}]
|
|
};
|
|
}
|
|
|
|
var chart = testHelper.create(echarts, 'transition_facet_cartesian', {
|
|
title: [
|
|
'<1> Click "double cartesian", should become **double** grid',
|
|
'Click "single cartesian", should become **single** grid',
|
|
'Check transition animation existing',
|
|
'<2> **downplay some legend item**, then click "doulbe"/"single" btns again',
|
|
'transition should be OK, legend state should be kept',
|
|
'<3> **shrink dataZoom**, then click "doulbe"/"single" btns again',
|
|
'transition should be OK, legend state should be kept',
|
|
],
|
|
option: option0,
|
|
buttons: [{
|
|
text: 'double cartesian',
|
|
onclick: function () {
|
|
chart.setOption(makeDoubleCartesianOption(), {
|
|
replaceMerge: ['xAxis', 'yAxis', 'grid']
|
|
})
|
|
}
|
|
}, {
|
|
text: 'single cartesian',
|
|
onclick: function () {
|
|
chart.setOption(makeSingleCartesianOption(), {
|
|
replaceMerge: ['xAxis', 'yAxis', 'grid']
|
|
})
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
function makeOption(extOption) {
|
|
return {
|
|
animationDurationUpdate: 2000,
|
|
dataset: {
|
|
source: [
|
|
[null, 'sweet zongzi', 'salty zongzi', 'sweet milk tea', 'salty milk tea', 'NewNew'],
|
|
['2012-01', 32, 65, 71, 31, 99],
|
|
['2012-02', 41, 67, 99, 23, 199],
|
|
['2012-03', 58, 61, 97, 12, 99],
|
|
['2012-04', 67, 73, 105, 9, 199],
|
|
['2012-05', 72, 67, 122, 18, 99],
|
|
['2012-06', 94, 79, 118, 32, 199],
|
|
]
|
|
},
|
|
legend: {},
|
|
tooltip: {
|
|
},
|
|
xAxis: {
|
|
type: 'category'
|
|
},
|
|
yAxis: {},
|
|
series: extOption.series
|
|
};
|
|
}
|
|
|
|
var option_base = makeOption({
|
|
series: [{
|
|
type: 'scatter',
|
|
encode: { x: 0, y: 1, seriesName: 1 }
|
|
}, {
|
|
type: 'scatter',
|
|
encode: { x: 0, y: 3, seriesName: 3 }
|
|
}]
|
|
});
|
|
|
|
var option_notMerge = makeOption({
|
|
series: [{
|
|
type: 'scatter',
|
|
encode: { x: 0, y: 2, seriesName: 2 }
|
|
}, {
|
|
type: 'scatter',
|
|
encode: { x: 0, y: 4, seriesName: 4 }
|
|
}]
|
|
});
|
|
|
|
var option_replaceMerge = {
|
|
series: [{
|
|
type: 'scatter',
|
|
encode: { x: 0, y: 5, seriesName: 5 }
|
|
}]
|
|
};
|
|
|
|
var seriesModels_base;
|
|
var seriesModels_notMerge;
|
|
var seriesModels_replaceMerge;
|
|
var view0_notMerge;
|
|
var view0_replaceMerge;
|
|
|
|
var chart = testHelper.create(echarts, 'notMerge_transition_replaceMerge_newView', {
|
|
title: [
|
|
'Click btns from left to right:',
|
|
'Click "setOption_notMerge", should **has trans animation**',
|
|
'Click "check", should print **checked: Pass**',
|
|
'Click "setOption_replaceMerge", should only "NewNew" and **no trans animation**',
|
|
'Click "check", should print **checked: Pass**',
|
|
],
|
|
option: option_base,
|
|
buttons: [{
|
|
text: 'setOption_notMerge',
|
|
onclick: function () {
|
|
seriesModels_base = chart.getModel().getSeries('series');
|
|
chart.setOption(option_notMerge, true);
|
|
}
|
|
}, {
|
|
text: 'then check',
|
|
onclick: function () {
|
|
testHelper.printAssert(chart, function (assert) {
|
|
seriesModels_notMerge = chart.getModel().getSeries();
|
|
assert(seriesModels_base.length === 2);
|
|
assert(seriesModels_notMerge.length === 2);
|
|
|
|
assert(seriesModels_base[0] !== seriesModels_notMerge[0]);
|
|
assert(seriesModels_base[1] !== seriesModels_notMerge[1]);
|
|
assert(seriesModels_base[0] !== seriesModels_notMerge[1]);
|
|
assert(seriesModels_base[1] !== seriesModels_notMerge[0]);
|
|
});
|
|
}
|
|
}, {
|
|
text: 'setOption_replaceMerge',
|
|
onclick: function () {
|
|
seriesModels_base = chart.getModel().getSeries('series');
|
|
view0_notMerge = chart.getViewOfSeriesModel(seriesModels_notMerge[0]);
|
|
chart.setOption(option_replaceMerge, { replaceMerge: 'series' });
|
|
}
|
|
}, {
|
|
text: 'then check',
|
|
onclick: function () {
|
|
testHelper.printAssert(chart, function (assert) {
|
|
seriesModels_replaceMerge = chart.getModel().getSeries();
|
|
assert(seriesModels_replaceMerge.length === 1);
|
|
assert(seriesModels_notMerge[0] !== seriesModels_replaceMerge[0]);
|
|
view0_replaceMerge = chart.getViewOfSeriesModel(seriesModels_replaceMerge[0]);
|
|
assert(view0_notMerge != null);
|
|
assert(view0_notMerge !== view0_replaceMerge);
|
|
});
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var currentRound = 0;
|
|
var nameMap = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n'];
|
|
var categories = ['Mon', 'Tue', 'Wed'];
|
|
|
|
function createUpdatableSeriesAndDataset(seriesCount) {
|
|
var series = [];
|
|
for (var i = 0; i < seriesCount; i++) {
|
|
series.push({
|
|
name: nameMap[i] + '_round_' + currentRound,
|
|
type: 'bar',
|
|
barWidth: 40,
|
|
encode: {
|
|
x: 0,
|
|
y: i + 1
|
|
},
|
|
seriesLayoutBy: 'row'
|
|
});
|
|
}
|
|
var dataset = {
|
|
source: [categories.slice()]
|
|
};
|
|
var yVal = 22 + 100 * currentRound;
|
|
for (var i = 0; i < seriesCount; i++, yVal += 10) {
|
|
dataset.source.push([yVal, yVal * 2, yVal * 2.5]);
|
|
}
|
|
|
|
currentRound++;
|
|
|
|
return {
|
|
series: series,
|
|
dataset: dataset
|
|
};
|
|
}
|
|
|
|
var sInfo = createUpdatableSeriesAndDataset(2);
|
|
var series = sInfo.series;
|
|
var dataset = sInfo.dataset;
|
|
|
|
series.unshift({
|
|
id: 'I_never_change',
|
|
name: 'I_never_change',
|
|
type: 'pie',
|
|
selectedMode: 'single',
|
|
lineStyle: {
|
|
color: '#881100',
|
|
width: 5
|
|
},
|
|
center: ['20%', 120],
|
|
radius: 40,
|
|
data: [
|
|
{name: 'Mon', value: 100},
|
|
{name: 'Tue', value: 200},
|
|
{name: 'Wed', value: 150},
|
|
{name: 'Thu', value: 350},
|
|
{name: 'Fri', value: 180}
|
|
]
|
|
});
|
|
|
|
var option = {
|
|
dataset: dataset,
|
|
brush: {
|
|
toolbox: ['polygon', 'rect', 'lineX', 'lineY', 'keep', 'clear'],
|
|
xAxisIndex: 'all',
|
|
},
|
|
xAxis: {
|
|
type: 'category'
|
|
},
|
|
yAxis: {},
|
|
legend: {
|
|
left: 20
|
|
},
|
|
tooltip: {},
|
|
dataZoom: [{
|
|
type: 'slider'
|
|
}, {
|
|
type: 'inside'
|
|
}],
|
|
series: series
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main_replaceMerge_keep_update', {
|
|
title: [
|
|
'replaceMerge: keep update',
|
|
'<1> click "replace to new 4 series": bar totally replaced to new 4 different bars',
|
|
'click "replace to new 2 series": bar totally replaced to new 2 different bars',
|
|
'series "I_never_change" **never change color and data**',
|
|
'click "check": should show **checked: Pass**',
|
|
'<2> click pie legend to hide a sector',
|
|
'click pie to select a sector',
|
|
'click buttons again, **pie state should not changed**',
|
|
'<3> use brush',
|
|
'click buttons again, **brush selected should be correct**',
|
|
],
|
|
option: option,
|
|
height: 400,
|
|
buttons: [{
|
|
text: 'replace to new 4 series',
|
|
onclick: function () {
|
|
var sInfo = createUpdatableSeriesAndDataset(4);
|
|
sInfo.series.push({id: 'I_never_change'});
|
|
chart.setOption({
|
|
dataset: sInfo.dataset,
|
|
series: sInfo.series
|
|
}, {replaceMerge: ['series', 'dataset']});
|
|
}
|
|
}, {
|
|
text: 'replace to new 2 series',
|
|
onclick: function () {
|
|
var sInfo = createUpdatableSeriesAndDataset(2);
|
|
sInfo.series.push({id: 'I_never_change'});
|
|
chart.setOption({
|
|
dataset: sInfo.dataset,
|
|
series: sInfo.series
|
|
}, {replaceMerge: ['series', 'dataset']});
|
|
}
|
|
}, {
|
|
text: 'check after click setOption',
|
|
onclick: function () {
|
|
testHelper.printAssert(chart, function (assert) {
|
|
var seriesModels = chart.getModel().getSeries();
|
|
assert(seriesModels.length <= 6);
|
|
assert(chart.getModel().getSeriesCount() <= 6);
|
|
});
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var rawData = [[161.2,51.6,0],[174,65.6,1],[167.5,59,0],[175.3,71.8,1],[159.5,49.2,0],[193.5,80.7,1],[157,63,0],[186.5,72.6,1],[155.8,53.6,0],[187.2,78.8,1],[170,59,0],[181.5,74.8,1],[159.1,47.6,0],[184,86.4,1],[166,69.8,0],[184.5,78.4,1],[176.2,66.8,0],[175,62,1],[160.2,75.2,0],[184,81.6,1],[172.5,55.2,0],[180,76.6,1],[170.9,54.2,0],[177.8,83.6,1],[172.9,62.5,0],[192,90,1],[153.4,42,0],[176,74.6,1],[160,50,0],[174,71,1],[147.2,49.8,0],[184,79.6,1],[168.2,49.2,0],[192.7,93.8,1],[175,73.2,0],[171.5,70,1],[157,47.8,0],[173,72.4,1],[167.6,68.8,0],[176,85.9,1],[159.5,50.6,0],[176,78.8,1],[175,82.5,0],[180.5,77.8,1],[166.8,57.2,0],[172.7,66.2,1],[176.5,87.8,0],[176,86.4,1],[170.2,72.8,0],[173.5,81.8,1],[174,54.5,0],[178,89.6,1],[173,59.8,0],[180.3,82.8,1],[179.9,67.3,0],[180.3,76.4,1],[170.5,67.8,0],[164.5,63.2,1],[160,47,0],[173,60.9,1],[154.4,46.2,0],[183.5,74.8,1],[162,55,0],[175.5,70,1],[176.5,83,0],[188,72.4,1],[160,54.4,0],[189.2,84.1,1],[152,45.8,0],[172.8,69.1,1],[162.1,53.6,0],[170,59.5,1],[170,73.2,0],[182,67.2,1],[160.2,52.1,0],[170,61.3,1],[161.3,67.9,0],[177.8,68.6,1],[166.4,56.6,0],[184.2,80.1,1],[168.9,62.3,0],[186.7,87.8,1],[163.8,58.5,0],[171.4,84.7,1],[167.6,54.5,0],[172.7,73.4,1],[160,50.2,0],[175.3,72.1,1],[161.3,60.3,0],[180.3,82.6,1],[167.6,58.3,0],[182.9,88.7,1],[165.1,56.2,0],[188,84.1,1],[160,50.2,0],[177.2,94.1,1],[170,72.9,0],[172.1,74.9,1],[157.5,59.8,0],[167,59.1,1],[167.6,61,0],[169.5,75.6,1],[160.7,69.1,0],[174,86.2,1],[163.2,55.9,0],[172.7,75.3,1],[152.4,46.5,0],[182.2,87.1,1],[157.5,54.3,0],[164.1,55.2,1],[168.3,54.8,0],[163,57,1],[180.3,60.7,0],[171.5,61.4,1],[165.5,60,0],[184.2,76.8,1],[165,62,0],[174,86.8,1],[164.5,60.3,0],[174,72.2,1],[156,52.7,0],[177,71.6,1],[160,74.3,0],[186,84.8,1],[163,62,0],[167,68.2,1],[165.7,73.1,0],[171.8,66.1,1],[161,80,0],[182,72,1],[162,54.7,0],[167,64.6,1],[166,53.2,0],[177.8,74.8,1],[174,75.7,0],[164.5,70,1],[172.7,61.1,0],[192,101.6,1],[167.6,55.7,0],[175.5,63.2,1],[151.1,48.7,0],[171.2,79.1,1],[164.5,52.3,0],[181.6,78.9,1],[163.5,50,0],[167.4,67.7,1],[152,59.3,0],[181.1,66,1],[169,62.5,0],[177,68.2,1],[164,55.7,0],[174.5,63.9,1],[161.2,54.8,0],[177.5,72,1],[155,45.9,0],[170.5,56.8,1],[170,70.6,0],[182.4,74.5,1],[176.2,67.2,0],[197.1,90.9,1],[170,69.4,0],[180.1,93,1],[162.5,58.2,0],[175.5,80.9,1],[170.3,64.8,0],[180.6,72.7,1],[164.1,71.6,0],[184.4,68,1],[169.5,52.8,0],[175.5,70.9,1],[163.2,59.8,0],[180.6,72.5,1],[154.5,49,0],[177,72.5,1],[159.8,50,0],[177.1,83.4,1],[173.2,69.2,0],[181.6,75.5,1],[170,55.9,0],[176.5,73,1],[161.4,63.4,0],[175,70.2,1],[169,58.2,0],[174,73.4,1],[166.2,58.6,0],[165.1,70.5,1],[159.4,45.7,0],[177,68.9,1],[162.5,52.2,0],[192,102.3,1],[159,48.6,0],[176.5,68.4,1],[162.8,57.8,0],[169.4,65.9,1],[159,55.6,0],[182.1,75.7,1],[179.8,66.8,0],[179.8,84.5,1],[162.9,59.4,0],[175.3,87.7,1],[161,53.6,0],[184.9,86.4,1],[151.1,73.2,0],[177.3,73.2,1],[168.2,53.4,0],[167.4,53.9,1],[168.9,69,0],[178.1,72,1],[173.2,58.4,0],[168.9,55.5,1],[171.8,56.2,0],[157.2,58.4,1],[178,70.6,0],[180.3,83.2,1],[164.3,59.8,0],[170.2,72.7,1],[163,72,0],[177.8,64.1,1],[168.5,65.2,0],[172.7,72.3,1],[166.8,56.6,0],[165.1,65,1],[172.7,105.2,0],[186.7,86.4,1],[163.5,51.8,0],[165.1,65,1],[169.4,63.4,0],[174,88.6,1],[167.8,59,0],[175.3,84.1,1],[159.5,47.6,0],[185.4,66.8,1],[167.6,63,0],[177.8,75.5,1],[161.2,55.2,0],[180.3,93.2,1],[160,45,0],[180.3,82.7,1],[163.2,54,0],[177.8,58,1],[162.2,50.2,0],[177.8,79.5,1],[161.3,60.2,0],[177.8,78.6,1],[149.5,44.8,0],[177.8,71.8,1],[157.5,58.8,0],[177.8,116.4,1],[163.2,56.4,0],[163.8,72.2,1],[172.7,62,0],[188,83.6,1],[155,49.2,0],[198.1,85.5,1],[156.5,67.2,0],[175.3,90.9,1],[164,53.8,0],[166.4,85.9,1],[160.9,54.4,0],[190.5,89.1,1],[162.8,58,0],[166.4,75,1],[167,59.8,0],[177.8,77.7,1],[160,54.8,0],[179.7,86.4,1],[160,43.2,0],[172.7,90.9,1],[168.9,60.5,0],[190.5,73.6,1],[158.2,46.4,0],[185.4,76.4,1],[156,64.4,0],[168.9,69.1,1],[160,48.8,0],[167.6,84.5,1],[167.1,62.2,0],[175.3,64.5,1],[158,55.5,0],[170.2,69.1,1],[167.6,57.8,0],[190.5,108.6,1],[156,54.6,0],[177.8,86.4,1],[162.1,59.2,0],[190.5,80.9,1],[173.4,52.7,0],[177.8,87.7,1],[159.8,53.2,0],[184.2,94.5,1],[170.5,64.5,0],[176.5,80.2,1],[159.2,51.8,0],[177.8,72,1],[157.5,56,0],[180.3,71.4,1],[161.3,63.6,0],[171.4,72.7,1],[162.6,63.2,0],[172.7,84.1,1],[160,59.5,0],[172.7,76.8,1],[168.9,56.8,0],[177.8,63.6,1],[165.1,64.1,0],[177.8,80.9,1],[162.6,50,0],[182.9,80.9,1],[165.1,72.3,0],[170.2,85.5,1],[166.4,55,0],[167.6,68.6,1],[160,55.9,0],[175.3,67.7,1],[152.4,60.4,0],[165.1,66.4,1],[170.2,69.1,0],[185.4,102.3,1],[162.6,84.5,0],[181.6,70.5,1],[170.2,55.9,0],[172.7,95.9,1],[158.8,55.5,0],[190.5,84.1,1],[172.7,69.5,0],[179.1,87.3,1],[167.6,76.4,0],[175.3,71.8,1],[162.6,61.4,0],[170.2,65.9,1],[167.6,65.9,0],[193,95.9,1],[156.2,58.6,0],[171.4,91.4,1],[175.2,66.8,0],[177.8,81.8,1],[172.1,56.6,0],[177.8,96.8,1],[162.6,58.6,0],[167.6,69.1,1],[160,55.9,0],[167.6,82.7,1],[165.1,59.1,0],[180.3,75.5,1],[182.9,81.8,0],[182.9,79.5,1],[166.4,70.7,0],[176.5,73.6,1],[165.1,56.8,0],[186.7,91.8,1],[177.8,60,0],[188,84.1,1],[165.1,58.2,0],[188,85.9,1],[175.3,72.7,0],[177.8,81.8,1],[154.9,54.1,0],[174,82.5,1],[158.8,49.1,0],[177.8,80.5,1],[172.7,75.9,0],[171.4,70,1],[168.9,55,0],[185.4,81.8,1],[161.3,57.3,0],[185.4,84.1,1],[167.6,55,0],[188,90.5,1],[165.1,65.5,0],[188,91.4,1],[175.3,65.5,0],[182.9,89.1,1],[157.5,48.6,0],[176.5,85,1],[163.8,58.6,0],[175.3,69.1,1],[167.6,63.6,0],[175.3,73.6,1],[165.1,55.2,0],[188,80.5,1],[165.1,62.7,0],[188,82.7,1],[168.9,56.6,0],[175.3,86.4,1],[162.6,53.9,0],[170.5,67.7,1],[164.5,63.2,0],[179.1,92.7,1],[176.5,73.6,0],[177.8,93.6,1],[168.9,62,0],[175.3,70.9,1],[175.3,63.6,0],[182.9,75,1],[159.4,53.2,0],[170.8,93.2,1],[160,53.4,0],[188,93.2,1],[170.2,55,0],[180.3,77.7,1],[162.6,70.5,0],[177.8,61.4,1],[167.6,54.5,0],[185.4,94.1,1],[162.6,54.5,0],[168.9,75,1],[160.7,55.9,0],[185.4,83.6,1],[160,59,0],[180.3,85.5,1],[157.5,63.6,0],[174,73.9,1],[162.6,54.5,0],[167.6,66.8,1],[152.4,47.3,0],[182.9,87.3,1],[170.2,67.7,0],[160,72.3,1],[165.1,80.9,0],[180.3,88.6,1],[172.7,70.5,0],[167.6,75.5,1],[165.1,60.9,0],[186.7,101.4,1],[170.2,63.6,0],[175.3,91.1,1],[170.2,54.5,0],[175.3,67.3,1],[170.2,59.1,0],[175.9,77.7,1],[161.3,70.5,0],[175.3,81.8,1],[167.6,52.7,0],[179.1,75.5,1],[167.6,62.7,0],[181.6,84.5,1],[165.1,86.3,0],[177.8,76.6,1],[162.6,66.4,0],[182.9,85,1],[152.4,67.3,0],[177.8,102.5,1],[168.9,63,0],[184.2,77.3,1],[170.2,73.6,0],[179.1,71.8,1],[175.2,62.3,0],[176.5,87.9,1],[175.2,57.7,0],[188,94.3,1],[160,55.4,0],[174,70.9,1],[165.1,104.1,0],[167.6,64.5,1],[174,55.5,0],[170.2,77.3,1],[170.2,77.3,0],[167.6,72.3,1],[160,80.5,0],[188,87.3,1],[167.6,64.5,0],[174,80,1],[167.6,72.3,0],[176.5,82.3,1],[167.6,61.4,0],[180.3,73.6,1],[154.9,58.2,0],[167.6,74.1,1],[162.6,81.8,0],[188,85.9,1],[175.3,63.6,0],[180.3,73.2,1],[171.4,53.4,0],[167.6,76.3,1],[157.5,54.5,0],[183,65.9,1],[165.1,53.6,0],[183,90.9,1],[160,60,0],[179.1,89.1,1],[174,73.6,0],[170.2,62.3,1],[162.6,61.4,0],[177.8,82.7,1],[174,55.5,0],[179.1,79.1,1],[162.6,63.6,0],[190.5,98.2,1],[161.3,60.9,0],[177.8,84.1,1],[156.2,60,0],[180.3,83.2,1],[149.9,46.8,0],[180.3,83.2,1],[169.5,57.3,0],[160,64.1,0],[175.3,63.6,0],[169.5,67.3,0],[160,75.5,0],[172.7,68.2,0],[162.6,61.4,0],[157.5,76.8,0],[176.5,71.8,0],[164.4,55.5,0],[160.7,48.6,0],[174,66.4,0],[163.8,67.3,0]];
|
|
// var rawData = [[157.5,76.8,0]];
|
|
|
|
var FEMALE = 0;
|
|
var MALE = 1;
|
|
var DIMENSION_HEIGHT = 0;
|
|
var DIMENSION_WEIGHT = 1;
|
|
var DIMENSION_SEX = 2;
|
|
var SYMBOL_RADIUS = 6;
|
|
|
|
var HEIGHT_RANGES = [
|
|
{ min: 140, max: 160 },
|
|
{ min: 160, max: 180 },
|
|
{ min: 180, max: 200 }
|
|
];
|
|
|
|
var State = {
|
|
NONE: 0,
|
|
HEIGHT_WEIGHT_SINGLE: 1,
|
|
HEIGHT_WEIGHT_SEX_SEP: 2,
|
|
COUNT_BY_HEIGHT_RANGE: 3
|
|
};
|
|
|
|
var currentState = State.NONE
|
|
var countBySexHeightRangeMax = 0;
|
|
|
|
function renderItem(seriesInfo, params, api) {
|
|
if (currentState === State.NONE) {
|
|
return;
|
|
}
|
|
|
|
var sex = api.value(DIMENSION_SEX)
|
|
var height = api.value(DIMENSION_HEIGHT);
|
|
var weight = api.value(DIMENSION_WEIGHT);
|
|
|
|
if (seriesInfo.sex !== sex) {
|
|
return;
|
|
}
|
|
if (height < seriesInfo.heightRange.min || height >= seriesInfo.heightRange.max) {
|
|
return;
|
|
}
|
|
|
|
var posX;
|
|
var posY;
|
|
if (currentState === State.COUNT_BY_HEIGHT_RANGE) {
|
|
var position = api.coord([sex, 0]);
|
|
posX = position[0];
|
|
var yStart = position[1];
|
|
position = api.coord([sex, seriesInfo.countBySexHeightRange]);
|
|
var yEnd = position[1];
|
|
if (params.context.displayIdx == null) {
|
|
params.context.displayIdx = 0;
|
|
}
|
|
else {
|
|
params.context.displayIdx++;
|
|
}
|
|
if (seriesInfo.countBySexHeightRange === 1) {
|
|
posY = yEnd;
|
|
}
|
|
else {
|
|
posY = yStart + (yEnd - yStart) / (seriesInfo.countBySexHeightRange - 1) * params.context.displayIdx;
|
|
}
|
|
}
|
|
else {
|
|
var position = api.coord([height, weight]);
|
|
posX = position[0];
|
|
posY = position[1];
|
|
}
|
|
|
|
var color = sex === FEMALE ? '#eb6134' : '#348feb'; // ? '#eb9934' : '#36b6d9';
|
|
|
|
return {
|
|
type: 'circle',
|
|
x: posX,
|
|
y: posY,
|
|
shape: { cx: 0, cy: 0, r: SYMBOL_RADIUS },
|
|
style: {
|
|
fill: color,
|
|
opacity: 0.8
|
|
// stroke: '#555',
|
|
// lineWidth: 1
|
|
}
|
|
};
|
|
}
|
|
|
|
function animationDelayUpdate(idx) {
|
|
return idx;
|
|
}
|
|
|
|
var baseOption = {
|
|
dataset: {
|
|
source: rawData
|
|
},
|
|
title: {
|
|
text: 'Height and Weight'
|
|
},
|
|
tooltip: {
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
dataZoom: {},
|
|
brush: {
|
|
type: ['rect', 'polygon', 'clear']
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
},
|
|
brush: {
|
|
},
|
|
dataZoom: [{
|
|
type: 'slider',
|
|
left: 50,
|
|
right: 50,
|
|
height: 20,
|
|
xAxisIndex: 'all'
|
|
}, {
|
|
type: 'inside',
|
|
xAxisIndex: 'all'
|
|
}],
|
|
series: []
|
|
};
|
|
|
|
var seriesInfoList = [];
|
|
|
|
for (var i = 0, seriesInfo; i < HEIGHT_RANGES.length; i++) {
|
|
seriesInfoList.push(seriesInfo = {
|
|
sex: FEMALE,
|
|
heightRange: HEIGHT_RANGES[i]
|
|
});
|
|
baseOption.series.push({
|
|
type: 'custom',
|
|
name: 'Female',
|
|
coordinateSystem: 'none',
|
|
animationDelayUpdate: animationDelayUpdate,
|
|
renderItem: echarts.util.curry(renderItem, seriesInfo)
|
|
});
|
|
seriesInfoList.push(seriesInfo = {
|
|
sex: MALE,
|
|
heightRange: HEIGHT_RANGES[i]
|
|
});
|
|
baseOption.series.push({
|
|
type: 'custom',
|
|
name: 'Male',
|
|
coordinateSystem: 'none',
|
|
animationDelayUpdate: animationDelayUpdate,
|
|
renderItem: echarts.util.curry(renderItem, seriesInfo)
|
|
});
|
|
}
|
|
|
|
makeCountByHeightRange(rawData, seriesInfoList);
|
|
|
|
function makeCountByHeightRange(rawData, seriesInfoList) {
|
|
for (var i = 0; i < rawData.length; i++) {
|
|
var rawDataItem = rawData[i];
|
|
var val = rawDataItem[DIMENSION_HEIGHT];
|
|
|
|
for(var j = 0; j < seriesInfoList.length; j++) {
|
|
var seriesInfo = seriesInfoList[j];
|
|
|
|
if (seriesInfo.sex === rawDataItem[DIMENSION_SEX]
|
|
&& seriesInfo.heightRange.min <= val
|
|
&& val < seriesInfo.heightRange.max
|
|
) {
|
|
if (seriesInfo.countBySexHeightRange == null) {
|
|
seriesInfo.countBySexHeightRange = 0;
|
|
}
|
|
seriesInfo.countBySexHeightRange++;
|
|
countBySexHeightRangeMax = Math.max(
|
|
countBySexHeightRangeMax, seriesInfo.countBySexHeightRange
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var makeStateOption = {};
|
|
|
|
makeStateOption[State.HEIGHT_WEIGHT_SINGLE] = function () {
|
|
var option = {
|
|
dataZoom: [{
|
|
xAxisIndex: 'all'
|
|
}, {
|
|
xAxisIndex: 'all'
|
|
}],
|
|
grid: [{
|
|
bottom: 80
|
|
}],
|
|
xAxis: [{
|
|
scale: true,
|
|
axisLabel: { formatter: '{value} cm' },
|
|
splitLine: { show: false }
|
|
}],
|
|
yAxis: [{
|
|
scale: true,
|
|
axisLabel: { formatter: '{value} kg' },
|
|
splitLine: { show: false }
|
|
}],
|
|
series: []
|
|
};
|
|
for (var i = 0; i < baseOption.series.length; i++) {
|
|
option.series.push({
|
|
coordinateSystem: 'cartesian2d',
|
|
encode: {
|
|
x: DIMENSION_HEIGHT,
|
|
y: DIMENSION_WEIGHT,
|
|
label: [DIMENSION_HEIGHT, DIMENSION_WEIGHT]
|
|
},
|
|
xAxisIndex: 0,
|
|
yAxisIndex: 0
|
|
});
|
|
}
|
|
return option;
|
|
};
|
|
|
|
makeStateOption[State.HEIGHT_WEIGHT_SEX_SEP] = function () {
|
|
var option = {
|
|
dataZoom: [{
|
|
xAxisIndex: 'all'
|
|
}, {
|
|
xAxisIndex: 'all'
|
|
}],
|
|
grid: [{
|
|
right: '55%',
|
|
bottom: 80,
|
|
}, {
|
|
left: '55%',
|
|
bottom: 80,
|
|
}],
|
|
xAxis: [{
|
|
scale: true,
|
|
gridIndex: 0,
|
|
axisLabel: { formatter: '{value} cm' },
|
|
splitLine: { show: false }
|
|
}, {
|
|
scale: true,
|
|
gridIndex: 1,
|
|
axisLabel: { formatter: '{value} cm' },
|
|
splitLine: { show: false }
|
|
}],
|
|
yAxis: [{
|
|
scale: true,
|
|
gridIndex: 0,
|
|
axisLabel: { formatter: '{value} kg' },
|
|
splitLine: { show: false }
|
|
}, {
|
|
scale: true,
|
|
gridIndex: 1,
|
|
axisLabel: { formatter: '{value} kg' },
|
|
splitLine: { show: false }
|
|
}],
|
|
series: []
|
|
};
|
|
for (var i = 0; i < baseOption.series.length; i++) {
|
|
var axisIndex = seriesInfoList[i].sex === FEMALE ? 0 : 1;
|
|
console.log(axisIndex, seriesInfoList[i]);
|
|
option.series.push({
|
|
coordinateSystem: 'cartesian2d',
|
|
encode: {
|
|
x: DIMENSION_HEIGHT,
|
|
y: DIMENSION_WEIGHT,
|
|
label: [DIMENSION_HEIGHT, DIMENSION_WEIGHT]
|
|
},
|
|
xAxisIndex: axisIndex,
|
|
yAxisIndex: axisIndex
|
|
});
|
|
}
|
|
return option;
|
|
};
|
|
|
|
makeStateOption[State.COUNT_BY_HEIGHT_RANGE] = function () {
|
|
var yMax = Math.round(countBySexHeightRangeMax * 1.2);
|
|
|
|
var option = {
|
|
dataZoom: [{
|
|
xAxisIndex: 'none'
|
|
}, {
|
|
xAxisIndex: 'none'
|
|
}],
|
|
grid: [{
|
|
left: '10%',
|
|
width: '20%',
|
|
top: 90,
|
|
bottom: 80,
|
|
}, {
|
|
left: '40%',
|
|
width: '20%',
|
|
top: 90,
|
|
bottom: 80,
|
|
}, {
|
|
left: '75%',
|
|
width: '20%',
|
|
top: 90,
|
|
bottom: 80,
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
name: HEIGHT_RANGES[0].min + ' cm ~ ' + HEIGHT_RANGES[0].max + ' cm',
|
|
nameLocation: 'center',
|
|
nameGap: 20,
|
|
axisLabel: { show: false },
|
|
axisTick: { show: false },
|
|
gridIndex: 0,
|
|
splitLine: { show: false }
|
|
}, {
|
|
type: 'category',
|
|
name: HEIGHT_RANGES[1].min + ' cm ~ ' + HEIGHT_RANGES[1].max + ' cm',
|
|
nameLocation: 'center',
|
|
nameGap: 20,
|
|
axisLabel: { show: false },
|
|
axisTick: { show: false },
|
|
gridIndex: 1,
|
|
splitLine: { show: false }
|
|
}, {
|
|
type: 'category',
|
|
name: HEIGHT_RANGES[2].min + ' cm ~ ' + HEIGHT_RANGES[2].max + ' cm',
|
|
nameLocation: 'center',
|
|
nameGap: 20,
|
|
axisLabel: { show: false },
|
|
axisTick: { show: false },
|
|
gridIndex: 2,
|
|
splitLine: { show: false }
|
|
}],
|
|
yAxis: [{
|
|
gridIndex: 0,
|
|
name: 'persons',
|
|
axisLabel: { formatter: '{value}' },
|
|
max: yMax,
|
|
min: 0,
|
|
splitLine: { show: false }
|
|
}, {
|
|
gridIndex: 1,
|
|
name: 'persons',
|
|
axisLabel: { formatter: '{value}' },
|
|
max: yMax,
|
|
min: 0,
|
|
splitLine: { show: false }
|
|
}, {
|
|
gridIndex: 2,
|
|
name: 'persons',
|
|
axisLabel: { formatter: '{value}' },
|
|
max: yMax,
|
|
min: 0,
|
|
splitLine: { show: false }
|
|
}],
|
|
series: []
|
|
};
|
|
|
|
for (var i = 0; i < baseOption.series.length; i++) {
|
|
var axisIndex = HEIGHT_RANGES.indexOf(seriesInfoList[i].heightRange);
|
|
option.series.push({
|
|
coordinateSystem: 'cartesian2d',
|
|
encode: {
|
|
x: DIMENSION_SEX,
|
|
y: -1,
|
|
label: [DIMENSION_HEIGHT, DIMENSION_WEIGHT]
|
|
},
|
|
xAxisIndex: axisIndex,
|
|
yAxisIndex: axisIndex
|
|
});
|
|
}
|
|
|
|
return option;
|
|
};
|
|
|
|
function changeState(state) {
|
|
currentState = state;
|
|
var option = makeStateOption[state]();
|
|
chart.setOption(option, {
|
|
replaceMerge: ['grid', 'xAxis', 'yAxis']
|
|
});
|
|
}
|
|
|
|
var chart = testHelper.create(echarts, 'transition_dots', {
|
|
title: [
|
|
'Transition case:',
|
|
'click btns one by one',
|
|
],
|
|
option: baseOption,
|
|
lazyUpdate: true,
|
|
height: 600,
|
|
buttons: [{
|
|
text: 'scatter by sex',
|
|
onclick: function () {
|
|
changeState(State.HEIGHT_WEIGHT_SEX_SEP);
|
|
}
|
|
}, {
|
|
text: 'count by height range',
|
|
onclick: function () {
|
|
changeState(State.COUNT_BY_HEIGHT_RANGE);
|
|
}
|
|
}, {
|
|
text: 'one grid',
|
|
onclick: function () {
|
|
changeState(State.HEIGHT_WEIGHT_SINGLE);
|
|
}
|
|
}]
|
|
});
|
|
|
|
changeState(State.HEIGHT_WEIGHT_SINGLE);
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|