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/12/10 13:44:14 UTC

[incubator-echarts] 04/05: fix: label formatter string should be able to use {@dimName} and {@[dimIndex]} to reference interpolated value.

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 <su...@gmail.com>
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: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org