docs: smooth label line spec & demo

common/config/rush/pnpm-lock.yaml

@@ -4486,7 +4486,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.22.5_@babel+core@7.20.12
       magic-string: 0.27.0
       react-refresh: 0.14.0
-      vite: 3.2.6_@types+node@20.6.0
+      vite: 3.2.6
     transitivePeerDependencies:
       - supports-color
     dev: true

docs/assets/examples/en/pie-chart/smooth-label-line.md

@@ -0,0 +1,96 @@
+---
+category: examples
+group: pie
+title: Pie chart with smooth label lines
+keywords: pieChart,comparison,composition,proportion,circle
+order: 6-8
+cover: http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/pie-chart/smooth-label-line.png
+option: pieChart
+---
+
+# Pie chart with smooth label lines
+
+Pie Chart When setting the outer label, a guide line between the text label and the sector primitive will appear. The guide line defaults to a polyline, or it can be configured to smooth the curve.
+
+## critical configuration
+
+- `line.smooth` The property is used to control whether the label guide line is smooth, the default setting is`false`
+
+## Code Demo
+
+```javascript livedemo
+const spec = {
+  type: 'pie',
+  data: [
+    {
+      name: 'data1',
+      values: [
+        {
+          value: 348,
+          name: '中介渠道: 34.8%'
+        },
+        {
+          value: 152,
+          name: '会员: 15.2%'
+        },
+        {
+          value: 500,
+          name: '散客: 50%'
+        }
+      ]
+    }
+  ],
+  valueField: 'value',
+  categoryField: 'name',
+  outerRadius: 0.8,
+  innerRadius: 0.5,
+  color: ['#87DBDD', '#FF8406', '#468DFF'],
+  pie: {
+    state: {
+      hover: {
+        outerRadius: 0.85,
+        stroke: '#000',
+        lineWidth: 1
+      },
+      selected: {
+        outerRadius: 0.85,
+        stroke: '#000',
+        lineWidth: 1
+      }
+    }
+  },
+  legends: {
+    visible: true,
+    orient: 'right',
+    title: {
+      visible: false
+    },
+    item: {
+      visible: true
+    }
+  },
+  tooltip: {
+    transitionDuration: 0
+  },
+  label: {
+    visible: true,
+    pickable: false,
+    line: {
+      smooth: true,
+      style: {
+        lineWidth: 2
+      }
+    }
+  }
+};
+
+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
+
+[Pie chart](link)

docs/assets/examples/zh/pie-chart/smooth-label-line.md

@@ -0,0 +1,96 @@
+---
+category: examples
+group: pie
+title: 平滑标签线的饼图
+keywords: pieChart,comparison,composition,proportion,circle
+order: 6-8
+cover: http://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/pie-chart/smooth-label-line.png
+option: pieChart
+---
+
+# 平滑标签线的饼图
+
+饼图当设置外标签时，会出现文字标签与扇形图元之间的引导线。该引导线默认为折线，也可通过配置设置为平滑曲线。
+
+## 关键配置
+
+- `line.smooth` 属性用于控制标签引导线是否平滑，默认设置为`false`
+
+## 代码演示
+
+```javascript livedemo
+const spec = {
+  type: 'pie',
+  data: [
+    {
+      name: 'data1',
+      values: [
+        {
+          value: 348,
+          name: '中介渠道: 34.8%'
+        },
+        {
+          value: 152,
+          name: '会员: 15.2%'
+        },
+        {
+          value: 500,
+          name: '散客: 50%'
+        }
+      ]
+    }
+  ],
+  valueField: 'value',
+  categoryField: 'name',
+  outerRadius: 0.8,
+  innerRadius: 0.5,
+  color: ['#87DBDD', '#FF8406', '#468DFF'],
+  pie: {
+    state: {
+      hover: {
+        outerRadius: 0.85,
+        stroke: '#000',
+        lineWidth: 1
+      },
+      selected: {
+        outerRadius: 0.85,
+        stroke: '#000',
+        lineWidth: 1
+      }
+    }
+  },
+  legends: {
+    visible: true,
+    orient: 'right',
+    title: {
+      visible: false
+    },
+    item: {
+      visible: true
+    }
+  },
+  tooltip: {
+    transitionDuration: 0
+  },
+  label: {
+    visible: true,
+    pickable: false,
+    line: {
+      smooth: true,
+      style: {
+        lineWidth: 2
+      }
+    }
+  }
+};
+
+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/series/pie.md

@@ -156,6 +156,12 @@ The default value is `20`.
 Guide line line2 part minimum length.
 The default value is `10`.
 
+###${prefix} smooth(boolean)
+
+Whether the guide line is smooth.
+The default value is `false`.
+Supported since version 1.4.0.
+
 {{ use: common-mark(
   prefix = '##' + ${prefix}
 ) }}

docs/assets/option/en/series/rose.md

@@ -95,6 +95,12 @@ The default value is `20`.
 Guide line line2 part minimum length.
 The default value is `10`.
 
+###${prefix} smooth(boolean)
+
+Whether the guide line is smooth.
+The default value is `false`.
+Supported since version 1.4.0.
+
 {{ use: common-mark(
   prefix = '##' + ${prefix}
 ) }}

docs/assets/option/zh/series/pie.md

@@ -157,6 +157,12 @@ pie: {
 引导线 line2 部分最小长度。
 默认值为`10`。
 
+###${prefix} smooth(boolean)
+
+引导线是否光滑。
+默认值为`false`。
+从 1.4.0 版本开始支持。
+
 {{ use: common-mark(
   prefix = '##' + ${prefix}
 ) }}

docs/assets/option/zh/series/rose.md

@@ -95,6 +95,12 @@ rose 图元样式配置。
 引导线 line2 部分最小长度。
 默认值为`10`。
 
+###${prefix} smooth(boolean)
+
+引导线是否光滑。
+默认值为`false`。
+从 1.4.0 版本开始支持。
+
 {{ use: common-mark(
   prefix = '##' + ${prefix}
 ) }}

packages/vchart/__tests__/runtime/browser/test-page/pie-label.ts

@@ -750,7 +750,7 @@ const run = () => {
     hash: '8fefead4c53c18c47279796bce64468e'
   };
 
-  const cs = new VChart(spec, {
+  const cs = new VChart(spec_huazhu, {
     dom: document.getElementById('chart') as HTMLElement,
     mode: isMobile ? 'mobile-browser' : 'desktop-browser'
   });