docs: add regression demo in marker

docs/assets/examples/en/marker/bar-poly-regression-line.md

@@ -0,0 +1,174 @@
+---
+category: examples
+group: bar chart
+title: 基础条形图
+keywords: barChart,comparison,distribution,rank,rectangle
+order: 2-7
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/bar-chart/bar-regression-line.png
+option: barChart
+---
+
+# Simple Bar Chart + Regression Line
+
+## Key Configuration
+
+By passing different configuration items to the `appendBarRegressionLineConfig` method, you can add multiple regression lines of different degrees and styles to the bar chart.
+
+- `degree`: The degree of the polynomial regression, e.g., 2 for quadratic, 3 for cubic.
+- `color`: The color of the regression line.
+- `line.style`: Style configuration for the regression line, such as `lineWidth` for line thickness.
+- `confidenceInterval.visible`: Whether to display the confidence interval (boolean).
+- `confidenceInterval.style`: Style configuration for the confidence interval, such as `fillOpacity` for opacity.
+- `label.text`: The label text for the regression line.
+
+## Code Example
+
+```javascript livedemo
+/** --Add the following code when using in your project-- */
+// When using in your project, please additionally install @visactor/vchart-extension, and keep the package version consistent with vchart
+// import { appendBarRegressionLineConfig, registerRegressionLine } from '@visactor/vchart-extension';
+/** --Add the above code when using in your project-- */
+
+/** --Remove the following code when using in your project-- */
+const { appendBarRegressionLineConfig, registerRegressionLine } = VChartExtension;
+/** --Remove the above code when using in your project-- */
+
+const spec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        {
+          name: 'Apple',
+          value: 214480
+        },
+        {
+          name: 'Google',
+          value: 155506
+        },
+        {
+          name: 'Amazon',
+          value: 100764
+        },
+        {
+          name: 'Microsoft',
+          value: 92715
+        },
+        {
+          name: 'Coca-Cola',
+          value: 66341
+        },
+        {
+          name: 'Samsung',
+          value: 59890
+        },
+        {
+          name: 'Toyota',
+          value: 53404
+        },
+        {
+          name: 'Mercedes-Benz',
+          value: 48601
+        },
+        {
+          name: 'Facebook',
+          value: 45168
+        },
+        {
+          name: "McDonald's",
+          value: 43417
+        },
+        {
+          name: 'Intel',
+          value: 43293
+        },
+        {
+          name: 'IBM',
+          value: 42972
+        },
+        {
+          name: 'BMW',
+          value: 41006
+        },
+        {
+          name: 'Disney',
+          value: 39874
+        },
+        {
+          name: 'Cisco',
+          value: 34575
+        },
+        {
+          name: 'GE',
+          value: 32757
+        },
+        {
+          name: 'Nike',
+          value: 30120
+        },
+        {
+          name: 'Louis Vuitton',
+          value: 28152
+        },
+        {
+          name: 'Oracle',
+          value: 26133
+        },
+        {
+          name: 'Honda',
+          value: 23682
+        }
+      ]
+    }
+  ],
+  xField: 'name',
+  yField: 'value'
+};
+
+registerRegressionLine();
+appendBarRegressionLineConfig(spec, [
+  {
+    degree: 2,
+    color: 'red',
+    line: {
+      style: {
+        lineWidth: 2
+      }
+    },
+    confidenceInterval: {
+      visible: false
+    },
+    label: {
+      text: '2 次多项式拟合'
+    }
+  },
+  {
+    degree: 3,
+    color: 'green',
+    line: {
+      style: {
+        lineWidth: 2
+      }
+    },
+    confidenceInterval: {
+      style: {
+        fillOpacity: 0.2
+      }
+    },
+    label: {
+      text: '3 次多项式拟合'
+    }
+  }
+]);
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+```
+
+```

docs/assets/examples/en/marker/histogram-regression-line.md

@@ -0,0 +1,147 @@
+---
+category: examples
+group: histogram chart
+title: 基础直方图
+keywords: histogram,distribution,rectangle
+order: 3-4
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/histogram-chart/histogram-regression-line.png
+option: histogramChart
+---
+
+# Histogram Regression Line
+
+## Key Information
+
+- Use `bin` binning to process raw data and generate the intervals and frequency data required for the histogram.
+- In the histogram configuration, you need to specify the following fields:
+  - `xField`: Represents the left endpoint of each interval (e.g., `x0`).
+  - `x2Field`: Represents the right endpoint of each interval (e.g., `x1`).
+  - `yField`: Represents the frequency of each interval (e.g., `frequency`).
+- You can add regression lines (such as KDE kernel density estimation and ECDF empirical cumulative distribution function) via extended configuration to help analyze the data distribution.
+
+## Code Example
+
+```javascript livedemo
+/** --Add the following code when using in your project-- */
+// When using in your project, please additionally depend on @visactor/vchart-extension, and keep the package version consistent with vchart
+// import { registerRegressionLine, appendHistogramRegressionLineConfig } from '@visactor/vchart-extension';
+/** --Add the above code when using in your project-- */
+
+/** --Delete the following code when using in your project-- */
+const { registerRegressionLine, appendHistogramRegressionLineConfig } = VChartExtension;
+/** --Delete the above code when using in your project-- */
+```
+
+function boxMullerRandom() {
+let u = 0;
+let v = 0;
+while (u === 0) {
+u = Math.random();
+}
+while (v === 0) {
+v = Math.random();
+}
+return Math.sqrt(-2.0 _ Math.log(u)) _ Math.cos(2.0 _ Math.PI _ v);
+}
+
+function generateGaussian(count, mean = 0, sd = 1) {
+const out = [];
+for (let i = 0; i < count; i++) {
+out.push(mean + boxMullerRandom() \* sd);
+}
+return out;
+}
+
+function generateMixtureGaussianSamples() {
+const a = generateGaussian(160, 5, 4, 1); // cluster A
+// const b = generateGaussian(80, 2.3, 0.08, 2); // cluster B
+// const c = generateGaussian(140, 9.3, 0.35, 3); // cluster C
+const outliers = [5.0, 6.2, 3.5, 12.0, 0.5];
+const arr = [...a, ...outliers];
+return arr.map(v => ({ value: v }));
+}
+
+const spec = {
+data: [
+{
+name: 'data1',
+transforms: [
+{
+type: 'bin',
+options: {
+step: 2,
+field: 'value',
+outputNames: { x0: 'x0', x1: 'x1', count: 'frequency' }
+}
+}
+],
+values: generateMixtureGaussianSamples()
+}
+],
+type: 'histogram',
+xField: 'x0',
+x2Field: 'x1',
+yField: 'frequency',
+bar: {
+style: {
+stroke: 'white',
+lineWidth: 1
+}
+},
+title: {
+text: 'Histogram of Gaussian data'
+},
+tooltip: {
+visible: true,
+mark: {
+title: {
+key: 'title',
+value: 'frequency'
+},
+content: [
+{
+key: datum => datum['x0'] + '～' + datum['x1'],
+value: datum => datum['frequency']
+}
+]
+}
+}
+};
+
+registerRegressionLine();
+appendHistogramRegressionLineConfig(spec, [
+{
+type: 'kde', // 支持 'kde' 和 'ecdf'
+line: {
+style: {
+stroke: 'red',
+lineWidth: 2
+}
+},
+label: {
+text: 'KDE 核密度估计'
+}
+},
+{
+type: 'ecdf', // 支持 'kde' 和 'ecdf'
+line: {
+style: {
+stroke: 'green',
+lineWidth: 2
+}
+},
+label: {
+text: '经验累积分布函数（ECDF）'
+}
+}
+]);
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+
+```
+
+```