fix(format): preserve literal dollar sequences in component formatter templates

src/component/axisPointer/viewHelper.ts

@@ -181,7 +181,8 @@ export function getValueLabel(
         });
 
         if (zrUtil.isString(formatter)) {
-            text = formatter.replace('{value}', text);
+            const value = text;
+            text = formatter.replace('{value}', () => value);
         }
         else if (zrUtil.isFunction(formatter)) {
             text = formatter(params);

src/component/dataZoom/SliderZoomView.ts

@@ -1156,7 +1156,7 @@ function formatLabel(
     return isFunction(labelFormatter)
         ? labelFormatter(value, valueStr)
         : isString(labelFormatter)
-            ? labelFormatter.replace('{value}', valueStr)
+            ? labelFormatter.replace('{value}', () => valueStr)
             : valueStr;
 }
 

src/component/legend/LegendView.ts

@@ -458,7 +458,7 @@ class LegendView extends ComponentView {
         const formatter = legendModel.get('formatter');
         let content = name;
         if (zrUtil.isString(formatter) && formatter) {
-            content = formatter.replace('{name}', name != null ? name : '');
+            content = formatter.replace('{name}', () => (name != null ? name : ''));
         }
         else if (zrUtil.isFunction(formatter)) {
             content = formatter(name);

src/component/visualMap/VisualMapModel.ts

@@ -369,8 +369,8 @@ class VisualMapModel<Opts extends VisualMapOption = VisualMapOption> extends Com
 
         if (zrUtil.isString(formatter)) {
             return formatter
-                .replace('{value}', isMinMax ? (textValue as string[])[0] : textValue as string)
-                .replace('{value2}', isMinMax ? (textValue as string[])[1] : textValue as string);
+                .replace('{value}', () => (isMinMax ? (textValue as string[])[0] : textValue as string))
+                .replace('{value2}', () => (isMinMax ? (textValue as string[])[1] : textValue as string));
         }
         else if (zrUtil.isFunction(formatter)) {
             return isMinMax

src/coord/axisHelper.ts

@@ -190,7 +190,7 @@ export function makeLabelFormatter(axis: Axis): (tick: ScaleTick, idx?: number)
             // For category axis, get raw value; for numeric axis,
             // get formatted label like '1,333,444'.
             const label = axis.scale.getLabel(tick);
-            const text = labelFormatter.replace('{value}', label != null ? label : '');
+            const text = labelFormatter.replace('{value}', () => (label != null ? label : ''));
             return text;
         };
     }

src/coord/geo/GeoModel.ts

@@ -307,7 +307,7 @@ class GeoModel extends ComponentModel<GeoOption> implements RoamHostModel {
             return formatter(params);
         }
         else if (zrUtil.isString(formatter)) {
-            return formatter.replace('{a}', name != null ? name : '');
+            return formatter.replace('{a}', () => (name != null ? name : ''));
         }
     }
 

src/coord/radar/RadarModel.ts

@@ -167,7 +167,7 @@ class RadarModel extends ComponentModel<RadarOption> implements CoordinateSystem
             } as InnerIndicatorAxisOption, false);
             if (zrUtil.isString(nameFormatter)) {
                 const indName = innerIndicatorOpt.name;
-                innerIndicatorOpt.name = nameFormatter.replace('{value}', indName != null ? indName : '');
+                innerIndicatorOpt.name = nameFormatter.replace('{value}', () => (indName != null ? indName : ''));
             }
             else if (zrUtil.isFunction(nameFormatter)) {
                 innerIndicatorOpt.name = nameFormatter(