This is an automated email from the ASF dual-hosted git repository. sushuang pushed a commit to branch fix/label-valueAnimation in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit f218a44101431395a853c657a5ee097d0538d839 Author: 100pah <[email protected]> AuthorDate: Wed Dec 9 16:58:25 2020 +0800 fix: fix that category value become undefined when init animation when valueAnimation: true. --- src/util/model.ts | 13 ++-- test/label-animation.html | 159 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 165 insertions(+), 7 deletions(-) diff --git a/src/util/model.ts b/src/util/model.ts index 99948b6..b270dc0 100644 --- a/src/util/model.ts +++ b/src/util/model.ts @@ -1003,7 +1003,7 @@ export function groupData<T, R extends string | number>( * * @param data data * @param labelModel label model of the text element - * @param sourceValue start value + * @param sourceValue start value. May be null/undefined when init. * @param targetValue end value * @param percent 0~1 percentage; 0 uses start value while 1 uses end value * @return interpolated values @@ -1041,21 +1041,20 @@ export function interpolateRawValues( } else { const interpolated = []; - const leftArr = sourceValue as (string | number)[] || []; + const leftArr = sourceValue as (string | number)[]; const rightArr = targetValue as (string | number[]); - const length = Math.max(leftArr.length, rightArr.length); + const length = Math.max(leftArr ? leftArr.length : 0, rightArr.length); for (let i = 0; i < length; ++i) { const info = data.getDimensionInfo(i); // Don't interpolate ordinal dims if (info.type === 'ordinal') { - interpolated[i] = (percent < 1 ? leftArr : rightArr)[i] as number; + // In init, there is no `sourceValue`, but should better not to get undefined result. + interpolated[i] = (percent < 1 && leftArr ? leftArr : rightArr)[i] as number; } else { const leftVal = leftArr && leftArr[i] ? leftArr[i] as number : 0; const rightVal = rightArr[i] as number; - const value = leftArr == null - ? (targetValue as [])[i] - : interpolateNumber(leftVal, rightVal, percent); + const value = interpolateNumber(leftVal, rightVal, percent); interpolated[i] = round( value, isAutoPrecision ? Math.max( diff --git a/test/label-animation.html b/test/label-animation.html new file mode 100644 index 0000000..24658c7 --- /dev/null +++ b/test/label-animation.html @@ -0,0 +1,159 @@ +<!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="main0"></div> + + + + <script> + function makeSource1() { + return [ + [ 'Int','Country', 'Float', 'Num'], + [900, 'Germany', 90.55, 0], + [300, 'Germany', 30.55, 1], + [800, 'Germany', 80.55, 2], + [200, 'Germany', 20.55, 3], + [1900, 'France', 190.55, 0], + [1300, 'France', 130.55, 1], + [1800, 'France', 180.55, 2], + [1200, 'France', 120.55, 3], + ]; + } + </script> + + + + + + <script> + require(['echarts'/*, 'map/js/china' */], function (echarts) { + var option; + var currNum = 0; + + function makeTransformDataset() { + return { + id: 'singleA', + transform: { + type: 'filter', + print: true, + config: { + and: [{ + or: [{ + dimension: 'Country', eq: 'Germany' + }, { + dimension: 'Country', eq: 'France' + }] + }, { + dimension: 'Num', eq: currNum + }] + } + } + }; + } + + option = { + animationDuration: 5000, + animationDurationUpdate: 5000, + dataset: [{ + source: makeSource1(), + }, + makeTransformDataset() + ], + xAxis: {}, + yAxis: { type: 'category' }, + grid: { + right: 160 + }, + series: [{ + type: 'bar', + datasetId: 'singleA', + encode: { + x: 'Int', + y: 'Country' + }, + label: { + show: true, + position: 'right', + fontSize: 16, + formatter: '(StrFmt) {c} 元', + valueAnimation: true + } + }, { + type: 'bar', + datasetId: 'singleA', + encode: { + x: 'Int', + y: 'Country' + }, + label: { + show: true, + position: 'right', + fontSize: 16, + formatter: function (params) { + console.log(params); + return '(CbFmt) ' + params.value.join(',') + ' 元'; + }, + valueAnimation: true + } + }] + }; + + var chart = testHelper.create(echarts, 'main0', { + title: [ + 'Check init and **click next once**', + 'label text anmiation should OK. **except Country**', + 'label should display like : "910,France,617.52,0 元"', + ], + option: option, + buttons: [{ + text: 'next', onclick: function () { + currNum++; + chart.setOption({ + dataset: makeTransformDataset() + }); + } + }], + }); + }); + </script> + + + </body> +</html> + --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
