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 cd8881deb8ef57a96aad9243220c3e2a7a6b629c Author: 100pah <[email protected]> AuthorDate: Thu Dec 10 11:45:01 2020 +0800 fix: label formatter string should be able to use {@dimName} and {@[dimIndex]} to reference interpolated value. --- src/model/mixin/dataFormat.ts | 26 +++++++--- test/label-animation.html | 108 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 127 insertions(+), 7 deletions(-) diff --git a/src/model/mixin/dataFormat.ts b/src/model/mixin/dataFormat.ts index 8a28b01..863fc5c 100644 --- a/src/model/mixin/dataFormat.ts +++ b/src/model/mixin/dataFormat.ts @@ -27,7 +27,8 @@ import { ColorString, ZRColor, OptionDataValue, - SeriesDataType + SeriesDataType, + DimensionLoose } from '../../util/types'; import GlobalModel from '../Global'; import { TooltipMarkupBlockFragment } from '../../component/tooltip/tooltipMarkup'; @@ -118,7 +119,7 @@ export class DataFormatMixin { zrUtil.extend(params, extendParams); } - if (labelDimIndex != null && (params.value instanceof Array)) { + if (labelDimIndex != null && zrUtil.isArray(params.value)) { params.value = params.value[labelDimIndex]; } @@ -141,12 +142,23 @@ export class DataFormatMixin { // Support 'aaa{@[3]}bbb{@product}ccc'. // Do not support '}' in dim name util have to. - return str.replace(DIMENSION_LABEL_REG, function (origin, dim) { - const len = dim.length; - if (dim.charAt(0) === '[' && dim.charAt(len - 1) === ']') { - dim = +dim.slice(1, len - 1); // Also: '[]' => 0 + return str.replace(DIMENSION_LABEL_REG, function (origin, dimStr: string) { + const len = dimStr.length; + const dimLoose: DimensionLoose = (dimStr.charAt(0) === '[' && dimStr.charAt(len - 1) === ']') + ? +dimStr.slice(1, len - 1) // Also support: '[]' => 0 + : dimStr; + + let val = retrieveRawValue(data, dataIndex, dimLoose) as OptionDataValue; + + // Tricky: `extendParams.value` is only used in interpolate case + // (label animation) currently. + if (extendParams && zrUtil.isArray(extendParams.value)) { + const dimInfo = data.getDimensionInfo(dimLoose); + if (dimInfo) { + val = extendParams.value[dimInfo.index]; + } } - const val = retrieveRawValue(data, dataIndex, dim) as OptionDataValue; + return val != null ? val + '' : ''; }); } diff --git a/test/label-animation.html b/test/label-animation.html index 24658c7..e9940e9 100644 --- a/test/label-animation.html +++ b/test/label-animation.html @@ -38,6 +38,7 @@ under the License. <div id="main0"></div> + <div id="main1"></div> @@ -154,6 +155,113 @@ under the License. </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: '(StrFmt1) {@Country} {@Int} 元', + valueAnimation: true + } + }, { + type: 'bar', + datasetId: 'singleA', + encode: { + x: 'Int', + y: 'Country' + }, + label: { + show: true, + position: 'right', + fontSize: 16, + formatter: '(StrFmt2) {@[1]} {@[0]} 元', + valueAnimation: true + } + }] + }; + + var chart = testHelper.create(echarts, 'main1', { + title: [ + 'Check init and **click next once**', + 'label text anmiation should OK. **except Country**', + 'label should display like : "France 910 元"', + ], + 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]
