<!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> | |