feat: add a new demo and fix docs problems

docs/assets/examples/en/progress/linear-progress-with-target-value.md

@@ -0,0 +1,118 @@
+---
+category: examples
+group: progress
+title: Linear progress chart with target value
+keywords: linearProgress,comparison,rectangle
+order: 16-2
+cover: /vchart/preview/linear-progress-with-target-value_1.5.3.png
+option: linearProgressChart
+---
+
+# Linear progress chart with target value
+
+The `extensionMark` allows you to add the necessary text markup to the bar.
+
+## Key configuration
+
+- `extensionMark.text` implements text markup.
+- `extensionMark.rule` Realizing the goal line
+
+## Demo source
+
+```javascript livedemo
+const spec = {
+  type: 'linearProgress',
+  data: [
+    {
+      id: 'id0',
+      values: [
+        {
+          type: 'Tradition Industries',
+          value: 0.795,
+          goal: 0.7,
+          text: '79.5%'
+        },
+        {
+          type: 'Business Companies',
+          value: 0.25,
+          goal: 0.9,
+          text: '25%'
+        },
+        {
+          type: 'Customer-facing Companies',
+          value: 0.065,
+          goal: 0.8,
+          text: '6.5%'
+        }
+      ]
+    }
+  ],
+  direction: 'horizontal',
+  xField: 'value',
+  yField: 'type',
+  seriesField: 'type',
+
+  cornerRadius: 20,
+  bandWidth: 30,
+  axes: [
+    {
+      orient: 'left',
+      label: { visible: true },
+      type: 'band',
+      domainLine: { visible: false },
+      tick: { visible: false }
+    },
+    { orient: 'bottom', label: { visible: true }, type: 'linear', visible: false }
+  ],
+  extensionMark: [
+    {
+      type: 'rule',
+      dataId: 'id0',
+      visible: true,
+      style: {
+        x: (datum, ctx, elements, dataView) => {
+          return ctx.valueToX([datum.goal]);
+        },
+        y: (datum, ctx, elements, dataView) => {
+          return ctx.valueToY([datum.type]) - 15;
+        },
+        x1: (datum, ctx, elements, dataView) => {
+          return ctx.valueToX([datum.goal]);
+        },
+        y1: (datum, ctx, elements, dataView) => {
+          return ctx.valueToY([datum.type]) + 15;
+        },
+        stroke: 'red',
+        lineWidth: 2
+      }
+    },
+    {
+      type: 'symbol',
+      dataId: 'id0',
+      visible: true,
+      style: {
+        symbolType: 'triangleDown',
+        x: (datum, ctx, elements, dataView) => {
+          return ctx.valueToX([datum.goal]);
+        },
+        y: (datum, ctx, elements, dataView) => {
+          return ctx.valueToY([datum.type]) - 22;
+        },
+        size: 20,
+        scaleY: 0.5,
+        fill: 'red'
+      }
+    }
+  ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderAsync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+## Related Tutorials
+
+[LinearProgress Chart](link)

docs/assets/examples/en/progress/linear-progress-with-text.md

@@ -1,14 +1,14 @@
 ---
 category: examples
 group: progress
-title: Bar chart with text labeling
+title: Linear progress chart with text labeling
 keywords: linearProgress,comparison,rectangle
 order: 16-2
 cover: http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/progress-linear-progress-with-text.png
 option: linearProgressChart
 ---
 
-# Bar progress charts with text labeling
+# Linear progress charts with text labeling
 
 The `extensionMark` allows you to add the necessary text markup to the bar.
 

docs/assets/examples/en/progress/linear-progress.md

@@ -1,16 +1,16 @@
 ---
 category: examples
 group: progress
-title: Bar Progress Chart
+title: Linear Progress Chart
 keywords: linearProgress, comparison, rectangle
 order: 16-0
 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/c0de7ff0a101bd4cb25c81702.png
 option: linearProgressChart
 ---
 
-# Bar Progress Chart
+# Linear Progress Chart
 
-The bar progress chart is a type of chart in the rectangular coordinate system. It can display the percentage values of multiple indicators side by side, making it suitable for assessing the progress of goal achievement.
+The linear progress chart is a type of chart in the rectangular coordinate system. It can display the percentage values of multiple indicators side by side, making it suitable for assessing the progress of goal achievement.
 
 ## When to use
 

docs/assets/examples/en/progress/segment-linear-progress.md

@@ -1,14 +1,14 @@
 ---
 category: examples
 group: progress
-title: Segmented Bar Progress Chart
+title: Segmented linear progress chart
 keywords: linearProgress,comparison,rectangle
 order: 16-1
 cover: http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/progress-segment-linear-progress.png
 option: linearProgressChart
 ---
 
-# Segmented bar charts of progress
+# Segmented linear progress chart
 
 Segmented bar graphs can be realized with `extensionMark`.
 

docs/assets/examples/menu.json

@@ -935,21 +935,21 @@
           "path": "linear-progress",
           "title": {
             "zh": "条形进度图",
-            "en": "Bar Progress Chart"
+            "en": "Linear Progress Chart"
           }
         },
         {
           "path": "segment-linear-progress",
           "title": {
             "zh": "分段条形进度图",
-            "en": "Segmented Bar Progress Chart"
+            "en": "Segmented Linear Progress Chart"
           }
         },
         {
           "path": "linear-progress-with-text",
           "title": {
             "zh": "带文本标注的条形进度图",
-            "en": "Bar Progress Chart with text"
+            "en": "Linear Progress Chart with text"
           }
         },
         {
@@ -959,6 +959,13 @@
             "en": "Linear Progress Chart with Multiple Labels"
           }
         },
+        {
+          "path": "linear-progress-with-target-value",
+          "title": {
+            "zh": "带目标值的条形进度图",
+            "en": "Linear Progress Chart with Target Value"
+          }
+        },
         {
           "path": "circular-progress",
           "title": {

docs/assets/examples/zh/progress/linear-progress-with-target-value.md

@@ -0,0 +1,118 @@
+---
+category: examples
+group: progress
+title: 带目标值的条形进度图
+keywords: linearProgress,comparison,rectangle
+order: 16-2
+cover: /vchart/preview/linear-progress-with-target-value_1.5.3.png
+option: linearProgressChart
+---
+
+# 带目标值的条形进度图
+
+通过 `extensionMark` 可以为条形进度条添加必要的文本标注。
+
+## 关键配置
+
+- `extensionMark.text` 实现文本标注
+- `extensionMark.rule` 实现目标线
+
+## 代码演示
+
+```javascript livedemo
+const spec = {
+  type: 'linearProgress',
+  data: [
+    {
+      id: 'id0',
+      values: [
+        {
+          type: 'Tradition Industries',
+          value: 0.795,
+          goal: 0.7,
+          text: '79.5%'
+        },
+        {
+          type: 'Business Companies',
+          value: 0.25,
+          goal: 0.9,
+          text: '25%'
+        },
+        {
+          type: 'Customer-facing Companies',
+          value: 0.065,
+          goal: 0.8,
+          text: '6.5%'
+        }
+      ]
+    }
+  ],
+  direction: 'horizontal',
+  xField: 'value',
+  yField: 'type',
+  seriesField: 'type',
+
+  cornerRadius: 20,
+  bandWidth: 30,
+  axes: [
+    {
+      orient: 'left',
+      label: { visible: true },
+      type: 'band',
+      domainLine: { visible: false },
+      tick: { visible: false }
+    },
+    { orient: 'bottom', label: { visible: true }, type: 'linear', visible: false }
+  ],
+  extensionMark: [
+    {
+      type: 'rule',
+      dataId: 'id0',
+      visible: true,
+      style: {
+        x: (datum, ctx, elements, dataView) => {
+          return ctx.valueToX([datum.goal]);
+        },
+        y: (datum, ctx, elements, dataView) => {
+          return ctx.valueToY([datum.type]) - 15;
+        },
+        x1: (datum, ctx, elements, dataView) => {
+          return ctx.valueToX([datum.goal]);
+        },
+        y1: (datum, ctx, elements, dataView) => {
+          return ctx.valueToY([datum.type]) + 15;
+        },
+        stroke: 'red',
+        lineWidth: 2
+      }
+    },
+    {
+      type: 'symbol',
+      dataId: 'id0',
+      visible: true,
+      style: {
+        symbolType: 'triangleDown',
+        x: (datum, ctx, elements, dataView) => {
+          return ctx.valueToX([datum.goal]);
+        },
+        y: (datum, ctx, elements, dataView) => {
+          return ctx.valueToY([datum.type]) - 22;
+        },
+        size: 20,
+        scaleY: 0.5,
+        fill: 'red'
+      }
+    }
+  ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderAsync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+## 相关教程
+
+[条形进度图](link)

docs/assets/option/en/common/chart-component.md

@@ -13,6 +13,10 @@
 
 {{ use: component-title() }}
 
+<!-- indicator -->
+
+{{ use: component-indicator() }}
+
 <!-- axes -->
 
 {{ if: ${axisType} === 'cartesian' }}
@@ -39,8 +43,6 @@
 
 {{ use: component-polar-axis() }}
 
-{{ use: component-indicator() }}
-
 {{ /if }}
 
 <!-- legends -->
@@ -95,4 +97,4 @@
 
 <!-- theme -->
 
-{{ use: common-theme() }}
+{{ use: common-theme() }}

docs/assets/option/zh/common/chart-component.md

@@ -13,6 +13,10 @@
 
 {{ use: component-title() }}
 
+<!-- indicator -->
+
+{{ use: component-indicator() }}
+
 <!-- axes -->
 
 {{ if: ${axisType} === 'cartesian' }}
@@ -39,8 +43,6 @@
 
 {{ use: component-polar-axis() }}
 
-{{ use: component-indicator() }}
-
 {{ /if }}
 
 <!-- legends -->