You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2020/07/17 11:39:14 UTC
[incubator-echarts] 15/16: add test case.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch remove-component
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 548bf37d8e7a598f17ec7dae026e3ec041a4892a
Author: 100pah <su...@gmail.com>
AuthorDate: Fri Jul 17 18:35:17 2020 +0800
add test case.
---
test/option-replaceMerge2.html | 427 ++++++++++++++++++++++++++++++++++++++++-
1 file changed, 424 insertions(+), 3 deletions(-)
diff --git a/test/option-replaceMerge2.html b/test/option-replaceMerge2.html
index cd85164..7b7cf7f 100644
--- a/test/option-replaceMerge2.html
+++ b/test/option-replaceMerge2.html
@@ -40,6 +40,7 @@ under the License.
<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>
@@ -411,12 +412,14 @@ under the License.
color: '#881100',
width: 5
},
- center: ['20%', 80],
+ center: ['20%', 120],
radius: 40,
data: [
{name: 'Mon', value: 100},
{name: 'Tue', value: 200},
- {name: 'Wed', value: 150}
+ {name: 'Wed', value: 150},
+ {name: 'Thu', value: 350},
+ {name: 'Fri', value: 180}
]
});
@@ -430,7 +433,9 @@ under the License.
type: 'category'
},
yAxis: {},
- legend: {},
+ legend: {
+ left: 20
+ },
tooltip: {},
dataZoom: [{
type: 'slider'
@@ -492,6 +497,422 @@ under the License.
+
+
+
+
+
+ <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, [...]
+ // 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>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org