| <!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/esl.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> | |