VisActor · xile611 · Jun 5, 2024 · May 29, 2024 · May 30, 2024 · May 30, 2024
diff --git a/docs/assets/examples/en/bar-chart/bar-customized-label.md b/docs/assets/examples/en/bar-chart/bar-customized-label.md
@@ -0,0 +1,181 @@
+---
+category: examples
+group: bar chart
+title: Bar chart with custom label
+keywords: barChart,comparison,distribution,rectangle,comparison,rank,axis,label
+cover: ../../../../public/vchart/preview/bar-customized-label-en_1.11.1.png
+option: barChart
+---
+
+# Bar Chart with Custom Label
+
+You can use `customLayoutFunc` to configure custom data label positions; you can customize the background of the bar chart to achieve a progress bar-like effect; the title of the details can be hidden.
+
+## Key option
+
+- Set the `extensionMark` property to the function for custom label positioning, making the labels appear on the right side of the chart.
+- Set the `cornerRadius` property of `barBackground.style` and `bar.style` to give the appearance of a progress bar.
+- Configure the `tooltip.mark.title.visible` property to false to hide the tooltip's title.
+
+## Demo source
+
+```javascript livedemo
+const spec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        {
+          province: 'Beijing',
+          value: 3080,
+          type: 'top1'
+        },
+        {
+          province: 'Tianjin',
+          value: 2880,
+          type: 'top2'
+        },
+        {
+          province: 'Chongqing',
+          value: 880,
+          type: 'top3'
+        },
+        {
+          province: 'Shenzhen',
+          value: 780,
+          type: 'common'
+        },
+        {
+          province: 'Guangzhou',
+          value: 680,
+          type: 'common'
+        },
+        {
+          province: 'Shandong',
+          value: 580,
+          type: 'common'
+        },
+        {
+          province: 'Zhejiang',
+          value: 480,
+          type: 'common'
+        },
+        {
+          province: 'Fujian',
+          value: 100,
+          type: 'common'
+        },
+        {
+          province: 'Shihkiachwang',
+          value: 100,
+          type: 'common'
+        },
+        {
+          province: 'Guangxi Zhuang Autonomous Region',
+          value: 100,
+          type: 'common'
+        }
+      ]
+    }
+  ],
+  direction: 'horizontal',
+  xField: 'value',
+  yField: 'province',
+  seriesField: 'province',
+  padding: { right: 50, left: 10 },
+  axes: [
+    {
+      orient: 'bottom',
+      visible: false,
+      nice: false
+    },
+    {
+      orient: 'left',
+      maxWidth: 65,
+      label: {
+        autoLimit: true
+      },
+      domainLine: {
+        visible: false
+      },
+      tick: {
+        visible: false
+      }
+    }
+  ],
+  stackCornerRadius: 0,
+  bar: {
+    style: {
+      cornerRadius: [5, 5, 5, 5],
+      height: 10
+    }
+  },
+  barBackground: {
+    visible: true,
+    style: {
+      cornerRadius: [5, 5, 5, 5],
+      height: 10
+    },
+    state: {
+      hover: {
+        stroke: '#D9D9D9',
+        lineWidth: 1
+      }
+    }
+  },
+  extensionMark: [
+    {
+      type: 'text',
+      dataId: 'barData',
+      visible: true,
+      style: {
+        text: datum => datum.value,
+        fontSize: 12,
+        x: (datum, ctx) => {
+          return ctx.getRegion().getLayoutRect().width + 10;
+        },
+        y: (datum, ctx) => {
+          return ctx.valueToY([datum.province]) + ctx.yBandwidth() / 2;
+        },
+        textBaseline: 'middle',
+        textAlign: 'left',
+        fill: '#595959',
+        size: 20
+      }
+    }
+  ],
+  crosshair: {
+    yField: {
+      visible: false
+    }
+  },
+  tooltip: {
+    mark: {
+      title: {
+        visible: false
+      }
+    },
+    dimension: {
+      title: {
+        visible: false
+      }
+    },
+    style: {
+      shape: {
+        shapeType: 'circle'
+      }
+    }
+  }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+## Related Tutorials
+
+    <
8000
span class='blob-code-inner blob-code-marker ' data-code-marker="+">[Bar Chart](link)
diff --git a/docs/assets/examples/menu.json b/docs/assets/examples/menu.json
@@ -496,6 +496,13 @@
             "zh": "TGI 柱图",
             "en": "TGI Bar Chart"
           }
+        },
+        {
+          "path": "bar-customized-label",
+          "title": {
+            "zh": "自定义标签的条形图",
+            "en": "Bar Chart with Customized Label"
+          }
         }
       ]
     },

diff --git a/docs/assets/examples/zh/bar-chart/bar-customized-label.md b/docs/assets/examples/zh/bar-chart/bar-customized-label.md
@@ -0,0 +1,181 @@
+---
+category: examples
+group: bar chart
+title: 自定义标签的条形图
+keywords: barChart,comparison,distribution,rectangle,comparison,rank,axis,label
+cover: ../../../../public/vchart/preview/bar-customized-label_1.11.1.png
+option: barChart
+---
+
+# 自定义标签的条形图
+
+可以使用`extensionMark`配置自定义数据标签位置；可以自定义条形图的背景达到类似进度条的效果；详细信息的标题可以隐藏。
+
+## 关键配置
+
+- 设置 `extensionMark` 属性为自定义标签位置的函数，让标签出现在图表右侧。
+- 设置 `barBackground.style` 和 `bar.style` 的圆角属性 `cornerRadius`，使呈现出进度条的效果。
+- 配置 `tooltip.mark.title.visible` 属性为 false，隐藏 tooltip 的标题。
+
+## 代码演示
+
+```javascript livedemo
+const spec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        {
+          province: '北京',
+          value: 3080,
+          type: 'top1'
+        },
+        {
+          province: '天津',
+          value: 2880,
+          type: 'top2'
+        },
+        {
+          province: '重庆',
+          value: 880,
+          type: 'top3'
+        },
+        {
+          province: '深圳',
+          value: 780,
+          type: 'common'
+        },
+        {
+          province: '广州',
+          value: 680,
+          type: 'common'
+        },
+        {
+          province: '山东',
+          value: 580,
+          type: 'common'
+        },
+        {
+          province: '浙江',
+          value: 480,
+          type: 'common'
+        },
+        {
+          province: '福建',
+          value: 100,
+          type: 'common'
+        },
+        {
+          province: '石家庄',
+          value: 100,
+          type: 'common'
+        },
+        {
+          province: '广西壮族自治区',
+          value: 100,
+          type: 'common'
+        }
+      ]
+    }
+  ],
+  direction: 'horizontal',
+  xField: 'value',
+  yField: 'province',
+  seriesField: 'province',
+  padding: { right: 50, left: 10 },
+  axes: [
+    {
+      orient: 'bottom',
+      visible: false,
+      nice: false
+    },
+    {
+      orient: 'left',
+      maxWidth: 65,
+      label: {
+        autoLimit: true
+      },
+      domainLine: {
+        visible: false
+      },
+      tick: {
+        visible: false
+      }
+    }
+  ],
+  stackCornerRadius: 0,
+  bar: {
+    style: {
+      cornerRadius: [5, 5, 5, 5],
+      height: 10
+    }
+  },
+  barBackground: {
+    visible: true,
+    style: {
+      cornerRadius: [5, 5, 5, 5],
+      height: 10
+    },
+    state: {
+      hover: {
+        stroke: '#D9D9D9',
+        lineWidth: 1
+      }
+    }
+  },
+  extensionMark: [
+    {
+      type: 'text',
+      dataId: 'barData',
+      visible: true,
+      style: {
+        text: datum => datum.value,
+        fontSize: 12,
+        x: (datum, ctx) => {
+          return ctx.getRegion().getLayoutRect().width + 10;
+        },
+        y: (datum, ctx) => {
+          return ctx.valueToY([datum.province]) + ctx.yBandwidth() / 2;
+        },
+        textBaseline: 'middle',
+        textAlign: 'left',
+        fill: '#595959',
+        size: 20
+      }
+    }
+  ],
+  crosshair: {
+    yField: {
+      visible: false
+    }
+  },
+  tooltip: {
+    mark: {
+      title: {
+        visible: false
+      }
+    },
+    dimension: {
+      title: {
+        visible: false
+      }
+    },
+    style: {
+      shape: {
+        shapeType: 'circle'
+      }
+    }
+  }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
 // 只为了方便控制台调试用，不要拷贝
+window['vchart'] = vchart;
+```
+
+## 相关教程
+
+[柱状图](link)
diff --git a/docs/public/vchart/preview/bar-customized-label-en_1.11.1.png b/docs/public/vchart/preview/bar-customized-label-en_1.11.1.png
diff --git a/docs/public/vchart/preview/bar-customized-label_1.11.1.png b/docs/public/vchart/preview/bar-customized-label_1.11.1.png