docs: chart doc udpate (#2182)

* docs: update chart docs & change data board token
* docs: chart docs update
* docs: add chart en docs & change icon
* docs: call vchartsemiTheme init

content/show/chart/index-en-US.md

@@ -1,43 +1,37 @@
 ---
 localeCode: en-US
 order: 67
-category: Other
-title: VChart
+category: Show
+title: Data Visualization
 icon: doc-vchart
 dir: column
 brief: Out-of-the-box multi-terminal charting library.
 ---
 
-For charting scenarios, we recommend using [VChart](https://visactor.io/vchart). VChart is the core chart component library of [VisActor](https://visactor.io), an open-source visualization solution by ByteDance. It supports various types of charts, is easy to use, and offers powerful functionality. Utilizing the VChart charting library in a project based on Semi framework provides the following advantages:
+[VisActor](https://visactor.io) is an open-source visualization solution by ByteDance, and we recommend using its core chart component library called [VChart](https://visactor.io/vchart) for data visualization scenarios. It supports various types of charts, making it simple to use while offering powerful functionality.
 
-- Out-of-the-box experience: with simple configuration, VChart seamlessly integrates with the Semi design language, automatically adapting to the default Semi theme or a custom theme.
-- Responsive: VChart supports monitoring changes between light and dark modes on the page, and automatically applies hot updates to VChart charts on the page.
+Based on VChart, we have developed a customized chart library that adheres to the Semi style. The advantages are as follows:
 
-## Introducing VChart
+- 🧩 Out-of-the-box experience: It provides easy configuration and initialization, allowing you to start using it quickly.
+- 🎨 Consistent style: VChart has been customized to match the Semi design style. It is directly integrated with Semi Design Tokens. The default styles have undergone extensive verification, ensuring high readability and precision. Additionally, it supports user-defined chart styles.
+- 🌗 Responsive: VChart detects changes in the light and dark mode of the page and automatically updates the VChart charts on the page. It also synchronizes with the theme changes.
 
-VChart is not just a ready-to-use multi-platform charting library, but also a vivid and flexible storyteller of data.
 
-VChart is built on top of the visualization grammar library [VGrammar](https://visactor.io/vgrammar) and the rendering engine [VRender](https://visactor.io/vrender). Along with data presentation, VChart also supports animated storytelling, rich interactivity, and customizable chart styles. Its easy-to-use configuration greatly reduces the learning curve for users.
+## Installation and Usage
 
-VChart supports various different chart types, allowing users to visualize abstract data through simple configuration, including <strong>combination chart, line chart, area chart, bar/column chart, pie/doughnut chart, scatter plot, heat map, histogram, box plot, waterfall chart, progress bar, funnel chart, time series chart, interval column chart, interval area chart, word cloud, dashboard, treemap, Sankey diagram, rose chart, radar chart, map, Circle Packing, sunburst diagram</strong>, etc. For detailed chart examples, please refer to [VChart Examples](https://visactor.io/vchart/example). Below are some showcases of VChart with Semi Design's default theme:
+### 1、Installation
 
-```chart
-```
-
-## Installing and Using VChart
-
-### 1.Installation
-
-In a React project, you can use the following command to install `@visactor/react-vchart`:
+To install `@visactor/react-vchart` in a React project, you can use the following command:
 
 ```bash
 # npm
 npm i @visactor/react-vchart
+
 # yarn
 yarn add @visactor/react-vchart
 ```
 
-Additionally, you need to install `@visactor/vchart-semi-theme` to enable compatibility with the default Semi theme or user-configured themes
+Additionally, you need to install `@visactor/vchart-semi-theme` to adapt to the default theme of Semi or custom themes published through Semi DSM.
 
 ```bash
 # npm
@@ -47,9 +41,9 @@ npm i @visactor/vchart-semi-theme
 yarn add @visactor/vchart-semi-theme
 ```
 
-### 2.Usage
+### 2、Usage
 
-To adapt VChart to the Semi theme/user-defined themes, you only need to execute the `initVChartSemiTheme` method once globally for initialization. This statement is typically placed in the entry file of your React project. Here's an example:
+Starting from version v2.47.0, Semi introduced relevant Design Tokens to facilitate the adaptation of VChart to Semi themes or custom themes published through Semi DSM. Therefore, for version v2.47.0 and above, you only need to execute the `initVChartSemiTheme` method once globally for initialization. This statement is typically placed in the entry file of your React project. For example:
 
 ```javascript
 //index.jsx
@@ -66,102 +60,1018 @@ const root = createRoot(dom);
 root.render(<App />);
 ```
 
-The `initVChartSemiTheme` method supports accepting an object as an option, which is declared as follows:
+The `initVChartSemiTheme` method supports accepting an object as an option, with the following type declaration:
 
 ```typescript
 interface IInitVChartSemiThemeOption {
-  /** initial theme mode */
+  /** default mode */
   defaultMode?: 'light' | 'dark';
 }
 ```
 
-You don't need to perform any additional steps apart from the initialization statement. You can directly use the VChart chart components. Here's an example of using a pie chart:
+For versions of Semi below v2.47.0, although there are no corresponding Design Tokens, you can still utilize the default values of the built-in theme styles provided by `@visactor/vchart-semi-theme`. <strong>Please note that this usage does not support automatic switching between light and dark modes</strong>. Users can manually set the current chart mode as needed. Here's an example:
 
-```javascript
-// app.jsx
+```js
+import semiDesignLight from '@visactor/vchart-semi-theme/public/semiDesignLight.json';
+import semiDesignDark from '@visactor/vchart-semi-theme/public/semiDesignDark.json';
+import VChart from '@visactor/vchart';
+// register the theme
+VChart.ThemeManager.registerTheme('semiDesignLight', semiDesignLight);
+VChart.ThemeManager.registerTheme('semiDesignDark', semiDesignDark);
+// apply the light theme
+VChart.ThemeManager.setCurrentTheme('semiDesignLight');
+// apply the dark theme
+VChart.ThemeManager.setCurrentTheme('semiDesignDark');
+```
+
+>For more information about the theme package, please refer to [@visactor/vchart-semi-theme](https://www.npmjs.com/package/@visactor/vchart-semi-theme) <br />
+For drawing charts and more detailed instructions, please refer to [VChart tutorial](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/react)
+
+
+## Common Chart Types Examples
+
+VChart is built on the visual grammar library VGrammar and the rendering engine VRender. It provides not only data presentation capabilities but also supports animated storytelling, rich interactivity, and customizable chart styles. The user-friendly configuration greatly reduces the learning curve.
+
+VChart supports various different chart types, allowing users to visualize abstract data through simple configuration, including <strong>combination chart, line chart, area chart, bar/column chart, pie/doughnut chart, scatter plot, heat map, histogram, box plot, waterfall chart, progress bar, funnel chart, time series chart, interval column chart, interval area chart, word cloud, dashboard, treemap, Sankey diagram, rose chart, radar chart, map, circle packing, sunburst diagram</strong>, etc. For detailed chart examples, please refer to [VChart Examples](https://visactor.io/vchart/example). Below are some showcases of VChart with Semi Design's default theme.
+
+### Bar chart
+
+<h4>Basic bar chart</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
+
+initVChartSemiTheme();
+
+const commonSpec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { type:'Date', month: 'Monday', sales: 22 },
+        { type:'Date', month: 'Tuesday', sales: 13 },
+        { type:'Date', month: 'Wednesday', sales: 25 },
+        { type:'Date', month: 'Thursday', sales: 29 },
+        { type:'Date', month: 'Friday', sales: 38 }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Bar chart',
+    subtext: 'This is a bar chart',
+  },
+  legends: {
+    visible: true,
+  },
+  xField: 'month',
+  yField: 'sales',
+  seriesField: 'type',
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+    return {
+      ...commonSpec,
+      xField: isVertical ? 'month' : 'sales',
+      yField: isVertical ? 'sales' : 'month',
+      direction: direction,
+    };
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+          key={direction}
+          spec={spec}
+          option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<h4>Grouped bar chart</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { type: 'Autocracies', year: '1930', value: 129 },
+        { type: 'Autocracies', year: '1940', value: 133 },
+        { type: 'Autocracies', year: '1950', value: 130 },
+        { type: 'Autocracies', year: '1960', value: 126 },
+        { type: 'Autocracies', year: '1970', value: 117 },
+        { type: 'Autocracies', year: '1980', value: 114 },
+        { type: 'Autocracies', year: '1990', value: 111 },
+        { type: 'Autocracies', year: '2000', value: 89 },
+        { type: 'Autocracies', year: '2010', value: 80 },
+        { type: 'Autocracies', year: '2018', value: 80 },
+        { type: 'Democracies', year: '1930', value: 22 },
+        { type: 'Democracies', year: '1940', value: 13 },
+        { type: 'Democracies', year: '1950', value: 25 },
+        { type: 'Democracies', year: '1960', value: 29 },
+        { type: 'Democracies', year: '1970', value: 38 },
+        { type: 'Democracies', year: '1980', value: 41 },
+        { type: 'Democracies', year: '1990', value: 57 },
+        { type: 'Democracies', year: '2000', value: 87 },
+        { type: 'Democracies', year: '2010', value: 98 },
+        { type: 'Democracies', year: '2018', value: 99 }
+      ]
+    }
+  ],
+  seriesField: 'type',
+  title: {
+    visible: true,
+    text: 'Grouped bar chart',
+    subtext: 'This is a grouped bar chart',
+  },
+  legends: {
+    visible: true,
+  }
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+    return {
+      ...commonSpec,
+      xField: isVertical ? ['year', 'type'] : 'value',
+      yField: isVertical ? 'value' : ['year', 'type'],
+      direction: direction,
+    };
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={direction}
+            spec={spec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<h4>Stacked bar chart</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'bar',
+  stack: true,
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { State: 'WY', Age: 'Under 5 Years', Population: 25635 },
+        { State: 'WY', Age: '5 to 13 Years', Population: 1890 },
+        { State: 'WY', Age: '14 to 17 Years', Population: 9314 },
+        { State: 'DC', Age: 'Under 5 Years', Population: 30352 },
+        { State: 'DC', Age: '5 to 13 Years', Population: 20439 },
+        { State: 'DC', Age: '14 to 17 Years', Population: 10225 },
+        { State: 'VT', Age: 'Under 5 Years', Population: 38253 },
+        { State: 'VT', Age: '5 to 13 Years', Population: 42538 },
+        { State: 'VT', Age: '14 to 17 Years', Population: 15757 },
+        { State: 'ND', Age: 'Under 5 Years', Population: 51896 },
+        { State: 'ND', Age: '5 to 13 Years', Population: 67358 },
+        { State: 'ND', Age: '14 to 17 Years', Population: 18794 },
+        { State: 'AK', Age: 'Under 5 Years', Population: 72083 },
+        { State: 'AK', Age: '5 to 13 Years', Population: 85640},
+        { State: 'AK', Age: '14 to 17 Years', Population: 22153 }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Stacked bar chart',
+    subtext: 'This is a stacked bar chart',
+  },
+  seriesField: 'Age',
+  legends: {
+    visible: true
+  },
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+    return {
+      ...commonSpec,
+      xField: isVertical ? 'State' : 'Population',
+      yField: isVertical ? 'Population' : 'State',
+      direction: direction,
+    };
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={direction}
+            spec={spec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<h4>Percentage stacked bar chart</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'bar',
+  percent: true,
+  stack: true,
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { State: 'WY', Age: 'Under 5 Years', Population: 25635 },
+        { State: 'WY', Age: '5 to 13 Years', Population: 1890 },
+        { State: 'WY', Age: '14 to 17 Years', Population: 9314 },
+        { State: 'DC', Age: 'Under 5 Years', Population: 30352 },
+        { State: 'DC', Age: '5 to 13 Years', Population: 20439 },
+        { State: 'DC', Age: '14 to 17 Years', Population: 10225 },
+        { State: 'VT', Age: 'Under 5 Years', Population: 38253 },
+        { State: 'VT', Age: '5 to 13 Years', Population: 42538 },
+        { State: 'VT', Age: '14 to 17 Years', Population: 15757 },
+        { State: 'ND', Age: 'Under 5 Years', Population: 51896 },
+        { State: 'ND', Age: '5 to 13 Years', Population: 67358 },
+        { State: 'ND', Age: '14 to 17 Years', Population: 18794 },
+        { State: 'AK', Age: 'Under 5 Years', Population: 72083 },
+        { State: 'AK', Age: '5 to 13 Years', Population: 85640},
+        { State: 'AK', Age: '14 to 17 Years', Population: 22153 }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Percentage stacked bar chart',
+    subtext: 'This is a percentage stacked bar chart',
+  },
+  seriesField: 'Age',
+  legends: { visible: true },
+  axes: [
+    {
+      orient: 'left',
+      label: {
+        formatMethod: val => {
+          return `${(val * 100).toFixed(2)}%`;
+        }
+      }
+    }
+  ],
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+     const spec = {
+      ...commonSpec,
+      xField: isVertical ? 'State' : 'Population',
+      yField: isVertical ? 'Population' : 'State',
+      direction: direction,
+    };
+    spec.axes[0].orient = isVertical ? 'left': 'top';
+    return spec;
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={direction}
+            spec={spec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+### Line chart
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'line',
+  xField: 'year',
+  yField: 'count',
+  seriesField: 'medalType',
+  legends: { visible: true }
+};
+
+const data = [[40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
+  [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
+  [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29]].map((arr, outer) => {
+  const type = ['Gold', 'Silver', 'Bronze'][outer];
+  return arr.map((item, inner) => ({
+    year: `${inner * 4 + 1952}`,
+    count: item,
+    medalType: type,
+  }));
+});
+
+function App() {
+  const [type, setType] = useState('multiple');
+  const onChange = useCallback((e) => setType(e.target.value), []);
+  const spec = useMemo(() => {
+    return {
+      ...commonSpec,
+      title: {
+        visible: true,
+        text: `${type === "multiple" ? "Multi-series" : "Basic"} line chart`,
+        subtext: `This is a ${type === "multiple" ? "multi-series" : "basic"} line chart`,
+      },
+      data: { values: type === 'multiple' ? data[0].concat(data[1]).concat(data[2]) : data[0] }
+    };
+  }, [type])
+
+  return (
+    <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'multiple'}>multiple</Radio>
+        <Radio value={'single'}>single</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={type}
+            spec={spec}
+            option={{ mode: "desktop-browser"}}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+### Area chart
+
+```jsx live=true dir="row" noInline=true half=true
 import React from "react";
 import { VChart } from "@visactor/react-vchart";
 
-const chart = {
-  spec: {
-    type: 'pie',
-    data: [
-      {
-        id: 'id0',
-        values: [
-          { type: 'oxygen', value: '46.60' },
-          { type: 'silicon', value: '27.72' },
-          { type: 'aluminum', value: '8.13' },
-          { type: 'iron', value: '5' },
-          { type: 'calcium', value: '3.63' },
-          { type: 'sodium', value: '2.83' },
-          { type: 'potassium', value: '2.59' },
-          { type: 'others', value: '3.5' }
-        ]
+const commonSpec = {
+  type: 'area',
+  stack: true,
+  title: {
+    visible: true,
+    text: 'Stacked area chart',
+    subtext: 'This is a stacked area chart',
+  },
+  xField: 'type',
+  yField: 'value',
+  seriesField: 'country',
+  legends: { visible: true },
+  tooltip: {
+    dimension: {
+      updateContent: data => {
+        let sum = 0;
+        data.forEach(datum => {
+          sum += +datum.value;
+        });
+        data.push({
+          hasShape: 'false',
+          key: 'Total',
+          value: sum
+        });
+        return data;
       }
-    ],
-    valueField: 'value',
-    categoryField: 'type',
+    }
+  }
+};
+
+const values = [[4229, 4376, 3054, 12814], [3932, 3987, 5067, 13012], 
+ [5221, 3574, 7004, 11624], [9256, 4376, 9054, 8814],[3308, 4572, 12043, 12998], 
+ [5432, 3417, 15067, 12321],[13701, 5231, 10119, 10342],[4008, 4572, 12043, 22998], 
+ [18712, 6134, 10419, 11261]].reduce((acc, arr, index) => {
+  const type = ['Nail polish', 'Eyebrow pencil', 'Rouge', 'Lipstick', 'Eyeshadows', 
+ 'Eyeliner', 'Foundation', 'Lip gloss', 'Mascara'][index];
+  const result = ['Africa', 'EU', 'China', 'USA'].map((item, innerIndex) => ({
+      country: item,
+      type: type,
+      value: arr[innerIndex],
+    }));
+    return acc.concat(result);
+ }, []);
+
+const data = {
+  fields: {
+    country: {
+      domain: ['Africa', 'EU', 'China', 'USA'].reverse(),
+      lockStatisticsByDomain: true
+    }
+  },
+  values: values,
+}
+
+function App() {
+  return (
+    <div style={{ height: 460 }}>
+      <VChart
+          spec={{ ...commonSpec,  data: data }}
+          option={{ mode: "desktop-browser"}}
+      />
+    </div>
+  )
+}
+
+render(App);
+```
+
+### Pie Chart
+
+```jsx live=true dir="column" noInline=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'pie',
+  data: [
+    {
+      id: 'id0',
+      values: [{ type: 'oxygen', value: '46.60' }, { type: 'silicon', value: '27.72' },
+        { type: 'aluminum', value: '8.13' }, { type: 'iron', value: '5' },
+        { type: 'calcium', value: '3.63' }, { type: 'sodium', value: '2.83' },
+        { type: 'potassium', value: '2.59' }, { type: 'others', value: '3.5' }]
+    }
+  ],
+  valueField: 'value',
+  categoryField: 'type',
+  label: {
+    visible: true
+  },
+  tooltip: {
+    mark: {
+      content: [
+        {
+          key: datum => datum['type'],
+          value: datum => datum['value'] + '%'
+        }
+      ]
+    }
+  }
+};
+
+const donutChart = {
+  title: {
+    visible: true,
+    text: 'Pie chart',
+    subtext: 'This is a pie chart',
+  },
+  legends: {
+    visible: true,
+    orient: 'right'
+  },
+}
+
+const donutWithIndicator = {
+  title: {
+    visible: true,
+    text: 'Donut chart with indicator',
+    subtext: 'This is a donut chart with indicator',
+  },
+  legends: {
+    visible: true,
+    orient: 'right'
+  },
+  indicator: {
+    visible: true,
+    trigger: 'select',
     title: {
       visible: true,
-      text: 'Statistics of Surface Element Content'
+      style: {
+        fontSize: 12,
+        fontWeight: 'normal',
+        text: data => {
+          if (data) {
+            const value = data['type'];
+            return value ? value : null;
+          }
+          return 'Sum';
+        }
+      }
     },
-    legends: {
-      visible: true,
-      orient: 'left',
-      title: {
+    content: [
+      {
         visible: true,
-        text: 'Elements'
+        fontWeight: 'bold',
+        style: {
+          fontSize: 20,
+          text: data => {
+            if (data) {
+              const value = data['value'];
+              return value ? `${value}%` : null;
+            }
+            return 1234;
+          }
+        }
       }
+    ]
+  }
+}
+
+function App() {
+  const [type, setType] = useState('donut');
+  const onChange = useCallback((e) => setType(e.target.value), []);
+  return (
+     <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'donut'}>饼图</Radio>
+        <Radio value={'donutWithIndicator'}>带指标卡饼图</Radio>
+      </RadioGroup>
+      <div style={{ display: 'flex', alignItem: 'center', justifyContent: 'center'}}>
+        <VChart
+            spec={{
+                ...commonSpec,
+                ...(type === 'donut' ? donutChart : donutWithIndicator),
+            }}
+            option={{ mode: "desktop-browser" }}
+            style={{ height: 440, width:680 }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<!-- ### Funnel chart
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const basicSpec = {
+  type: 'funnel',
+  categoryField: 'name',
+  valueField: 'value',
+  data: [
+    {
+      id: 'funnel',
+      values: [
+        { value: 100, name: 'Step1' },
+        { value: 80, name: 'Step2' },
+        { value: 60, name: 'Step3' },
+        { value: 40, name: 'Step4'},
+        { value: 20, name: 'Step5' }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Basic funnel chart',
+    subtext: 'This is a basic funnel chart',
+  },
+  label: { visible: true },
+  legends: { visible: true }
+};
+
+const RectangularSpec = {
+  type: 'funnel',
+  maxSize: '75%',
+  minSize: '10%',
+  isTransform: true,
+  shape: 'rect',
+  funnel: {
+    style: { cornerRadius: 4, stroke: 'white', lineWidth: 2 },
+    state: {
+      hover: { stroke: '#4e83fd', lineWidth: 1 }
+    }
+  },
+  transform: {
+    style: { stroke: 'white', lineWidth: 2 },
+    state: {
+      hover: { stroke: '#4e83fd', lineWidth: 1 }
+    }
+  },
+  label: {
+    visible: true,
+    style: {
+      lineHeight: 16,
+      limit: Infinity,
+      text: datum => [`${datum.name}`, `${datum.value}`]
+    }
+  },
+  outerLabel: {
+    visible: true,
+    position: 'right',
+    alignLabel: false,
+    style: {
+      text: datum => `${datum.percent * 100}%`
     },
-    label: {
-      visible: true
+    line: { style: { lineDash: [2, 2] } }
+  },
+  transformLabel: {
+    visible: true,
+    style: { fill: 'black' }
+  },
+  data: [
+    {
+      name: 'funnel',
+      values: [
+        { value: 100, name: 'Resume Screening',  percent: 1},
+        { value: 80, name: 'Resume Evaluation', percent: 0.8 },
+        { value: 50, name: 'Evaluation Passed', percent: 0.5 },
+        { value: 30, name: 'Interview', percent: 0.3 },
+        { value: 10, name: 'Final Pass', percent: 0.1 }
+      ]
     }
+  ],
+  categoryField: 'name',
+  valueField: 'value',
+  title: {
+    visible: true,
+    text: 'Rectangular conversion funnel chart',
+    subtext: 'This is a rectangular conversion funnel chart',
+  },
+  legends: {
+    visible: true,
   }
+};
+
+function App() {
+  const [type, setType] = useState('rectangular');
+  const onChange = useCallback((e) => setType(e.target.value), []);
+  return (
+    <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'basic'}>Basic funnel chart</Radio>
+        <Radio value={'rectangular'}>Rectangular conversion funnel chart</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            spec={type === 'basic' ? basicSpec : RectangularSpec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+``` -->
+
+### Radar chart
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const basicSpec = {
+  type: 'radar',
+  data: [
+    {
+      id: 'radarData',
+      values: [
+        { key: 'Strength', value: 5 },
+        { key: 'Speed', value: 5 },
+        { key: 'Shooting', value: 3 },
+        { key: 'Endurance', value: 5 },
+        { key: 'Precision', value: 5 },
+        { key: 'Growth', value: 5 }
+      ]
+    }
+  ],
+  categoryField: 'key',
+  valueField: 'value',
+  point: { visible: true },
+  area: { visible: true },
+  axes: [
+    {
+      orient: 'radius', // radius axis
+      zIndex: 100,
+      min: 0,
+      max: 8,
+      domainLine: { visible: false },
+      label: {
+        visible: true,
+        space: 0,
+        style: { textAlign: 'center', stroke: '#fff', lineWidth: 4 }
+      },
+      grid: { smooth: false },
+    },
+    {
+      orient: 'angle', // angle axis
+      zIndex: 50,
+      tick: { visible: false },
+      domainLine: { visible: false },
+      label: { space: 20 },
+    }
+  ]
+};
+
+const groupSpec = {
+  type: 'radar',
+  data: [{
+    values: [[45, 61, 92, 57, 46, 36, 33, 63, 57, 53, 69, 40], 
+            [31, 39, 81, 39, 64, 21, 58, 72, 47, 37, 80, 74],
+            [90, 95, 62, 52, 74, 87, 80, 69, 74, 84, 94, 23]]
+            .reduce((acc, cur, index) => {
+              const type = ['A', 'B', 'C'];
+              const month = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'Jun.', 
+              'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.']
+              const result = cur.map((item, innerIndex) => ({
+                month: month[innerIndex],
+                value: item,
+                type: type[index]
+              }))
+              return acc.concat(result);
+            }, []),
+  }],
+  categoryField: 'month',
+  valueField: 'value',
+  seriesField: 'type',
+  stack: true,
+  area: { visible: true },
+  legends: { visible: true, orient: 'right'}
 }
 
-const App = () => {
+function App() {
+  const [type, setType] = useState('group');
+  const onChange = useCallback((e) => setType(e.target.value), []);
   return (
-    <VChart
-        spec={{
-            height: 400,
-            ...chart.spec,
-        }}
-        option={{
-            mode: "desktop-browser",
-        }}
-    />
+    <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'basic'}>Basic radar chart</Radio>
+        <Radio value={'group'}>Grouped radar chart</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            spec={type === 'basic' ? basicSpec : groupSpec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
   )
 }
+
+render(App);
 ```
 
-## Configuring VChart Theme
+### Scatter chart
+
+```jsx live=true dir="row" noInline=true half=true
+import React from "react";
+import { VChart } from "@visactor/react-vchart";
+
+const data = [
+  { continent: 'Americas', Country: 'Argentina', LifeExpectancy: 75.32, GDP: 12779.37964, Population: 40301927 },
+  { continent: 'Americas', Country: 'Brazil', LifeExpectancy: 72.39, GDP: 9065.800825, Population: 190010647 },
+  { continent: 'Americas', Country: 'Canada', LifeExpectancy: 80.653, GDP: 36319.23501, Population: 33390141 },
+  { continent: 'Americas', Country: 'Chile', LifeExpectancy: 78.553, GDP: 13171.63885, Population: 16284741 },
+  { continent: 'Americas', Country: 'Colombia', LifeExpectancy: 72.889, GDP: 7006.580419, Population: 44227550 },
+  { continent: 'Americas', Country: 'Costa Rica', LifeExpectancy: 78.782, GDP: 9645.06142, Population: 4133884 },
+  { continent: 'Americas', Country: 'Cuba', LifeExpectancy: 78.273, GDP: 8948.102923, Population: 11416987 },
+  { continent: 'Americas', Country: 'Dominican Republic', LifeExpectancy: 72.235, GDP: 6025.374752, Population: 9319622 },
+  { continent: 'Americas', Country: 'Ecuador', LifeExpectancy: 74.994, GDP: 6873.262326, Population: 13755680 },
+  { continent: 'Americas', Country: 'El Salvador', LifeExpectancy: 71.878, GDP: 5728.353514, Population: 6939688 },
+  { continent: 'Americas', Country: 'Guatemala', LifeExpectancy: 70.259, GDP: 5186.050003, Population: 12572928 },
+  { continent: 'Americas', Country: 'Honduras', LifeExpectancy: 70.198, GDP: 3548.330846, Population: 7483763 },
+  { continent: 'Americas', Country: 'Jamaica', LifeExpectancy: 72.567, GDP: 7320.880262, Population: 2780132 },
+  { continent: 'Americas', Country: 'Mexico', LifeExpectancy: 76.195, GDP: 11977.57496, Population: 108700891 },
+  { continent: 'Americas', Country: 'Nicaragua', LifeExpectancy: 72.899, GDP: 2749.320965, Population: 5675356 },
+  { continent: 'Americas', Country: 'Panama', LifeExpectancy: 75.537, GDP: 9809.185636, Population: 3242173 },
+  { continent: 'Americas', Country: 'Paraguay', LifeExpectancy: 71.752, GDP: 4172.838464, Population: 6667147 },
+  { continent: 'Americas', Country: 'Peru', LifeExpectancy: 71.421, GDP: 7408.905561, Population: 28674757 },
+  { continent: 'Americas', Country: 'Puerto Rico', LifeExpectancy: 78.746, GDP: 19328.70901, Population: 3942491 },
+  { continent: 'Americas', Country: 'Trinidad and Tobago', LifeExpectancy: 69.819, GDP: 18008.50924, Population: 1056608 },
+  { continent: 'Americas', Country: 'United States', LifeExpectancy: 78.242, GDP: 42951.65309, Population: 301139947 },
+  { continent: 'Americas', Country: 'Uruguay', LifeExpectancy: 76.384, GDP: 10611.46299, Population: 3447496 },
+  { continent: 'Americas', Country: 'Venezuela', LifeExpectancy: 73.747, GDP: 11415.80569, Population: 26084662 },
+  { continent: 'Asia', Country: 'China', LifeExpectancy: 72.961, GDP: 4959.114854, Population: 1318683096 },
+  { continent: 'Asia', Country: 'Hong Kong, China', LifeExpectancy: 82.208, GDP: 39724.97867, Population: 6980412 },
+  { continent: 'Asia', Country: 'Japan', LifeExpectancy: 82.603, GDP: 31656.06806, Population: 127467972 },
+  { continent: 'Asia', Country: 'Korea, Dem. Rep.', LifeExpectancy: 67.297, GDP: 1593.06548, Population: 23301725 },
+  { continent: 'Asia', Country: 'Korea, Rep.', LifeExpectancy: 78.623, GDP: 23348.13973, Population: 49044790 },
+  { continent: 'Europe', Country: 'Albania', LifeExpectancy: 76.423, GDP: 5937.029526, Population: 3600523 },
+  { continent: 'Europe', Country: 'Austria', LifeExpectancy: 79.829, GDP: 36126.4927, Population: 8199783 },
+  { continent: 'Europe', Country: 'Belgium', LifeExpectancy: 79.441, GDP: 33692.60508, Population: 10392226 },
+  { continent: 'Europe', Country: 'Bosnia and Herzegovina', LifeExpectancy: 74.852, GDP: 7446.298803, Population: 4552198 },
+  { continent: 'Europe', Country: 'Bulgaria', LifeExpectancy: 73.005, GDP: 10680.79282, Population: 7322858 },
+  { continent: 'Europe', Country: 'Croatia', LifeExpectancy: 75.748, GDP: 14619.22272, Population: 4493312 },
+  { continent: 'Europe', Country: 'Czech Republic', LifeExpectancy: 76.486, GDP: 22833.30851, Population: 10228744 },
+  { continent: 'Europe', Country: 'Denmark', LifeExpectancy: 78.332, GDP: 35278.41874, Population: 5468120 },
+  { continent: 'Europe', Country: 'Finland', LifeExpectancy: 79.313, GDP: 33207.0844, Population: 5238460 },
+  { continent: 'Europe', Country: 'France', LifeExpectancy: 80.657, GDP: 30470.0167, Population: 61083916 },
+  { continent: 'Europe', Country: 'Germany', LifeExpectancy: 79.406, GDP: 32170.37442, Population: 82400996 },
+  { continent: 'Europe', Country: 'Greece', LifeExpectancy: 79.483, GDP: 27538.41188, Population: 10706290 },
+  { continent: 'Europe', Country: 'Hungary', LifeExpectancy: 73.338, GDP: 18008.94444, Population: 9956108 },
+  { continent: 'Europe', Country: 'Iceland', LifeExpectancy: 81.757, GDP: 36180.78919, Population: 301931 },
+  { continent: 'Europe', Country: 'Ireland', LifeExpectancy: 78.885, GDP: 40675.99635, Population: 4109086 },
+  { continent: 'Europe', Country: 'Italy', LifeExpectancy: 80.546, GDP: 28569.7197, Population: 58147733 },
+  { continent: 'Europe', Country: 'Montenegro', LifeExpectancy: 74.543, GDP: 9253.896111, Population: 684736 },
+  { continent: 'Europe', Country: 'Netherlands', LifeExpectancy: 79.762, GDP: 36797.93332, Population: 16570613 },
+  { continent: 'Europe', Country: 'Norway', LifeExpectancy: 80.196, GDP: 49357.19017, Population: 4627926 },
+  { continent: 'Europe', Country: 'Poland', LifeExpectancy: 75.563, GDP: 15389.92468, Population: 38518241 },
+  { continent: 'Europe', Country: 'Portugal', LifeExpectancy: 78.098, GDP: 20509.64777, Population: 10642836 },
+  { continent: 'Europe', Country: 'Romania', LifeExpectancy: 72.476, GDP: 10808.47561, Population: 22276056 },
+  { continent: 'Europe', Country: 'Serbia', LifeExpectancy: 74.002, GDP: 9786.534714, Population: 10150265 },
+  { continent: 'Europe', Country: 'Slovak Republic', LifeExpectancy: 74.663, GDP: 18678.31435, Population: 5447502 },
+  { continent: 'Europe', Country: 'Slovenia', LifeExpectancy: 77.926, GDP: 25768.25759, Population: 2009245 },
+  { continent: 'Europe', Country: 'Spain', LifeExpectancy: 80.941, GDP: 28821.0637, Population: 40448191 },
+  { continent: 'Europe', Country: 'Sweden', LifeExpectancy: 80.884, GDP: 33859.74835, Population: 9031088 },
+  { continent: 'Europe', Country: 'Switzerland', LifeExpectancy: 81.701, GDP: 37506.41907, Population: 7554661 },
+  { continent: 'Europe', Country: 'Turkey', LifeExpectancy: 71.777, GDP: 8458.276384, Population: 71158647 },
+  { continent: 'Europe', Country: 'United Kingdom', LifeExpectancy: 79.425, GDP: 33203.26128, Population: 60776238 },
+  { continent: 'Oceania', Country: 'Australia', LifeExpectancy: 81.235, GDP: 34435.36744, Population: 20434176 },
+  { continent: 'Oceania', Country: 'New Zealand', LifeExpectancy: 80.204, GDP: 25185.00911, Population: 4115771 }
+];
+
+function logScale(value, domain, range) {
+  // Calculate the logarithm of the domain and range
+  const logDomain = domain.map(x => (x !== 0 ? Math.log10(x) : 0));
+  const logRange = range.map(x => Math.log10(x));
+  // Calculate the position of the value in the domain, map it to the range
+  const t = (Math.log10(value) - logDomain[0]) / (logDomain[1] - logDomain[0]);
+  const newValue = (logRange[1] - logRange[0]) * t + logRange[0];
+  // Return the mapped value and restore the logarithmic scaling
+  return Math.pow(10, newValue);
+}
+
+// chart spec
+const spec = {
+  type: 'common',
+  series: [
+    {
+      type: 'scatter',
+      xField: 'GDP',
+      yField: 'LifeExpectancy',
+      seriesField: 'continent',
+      sizeField: 'Population',
+      size: d => logScale(d.Population, [0, Math.max(...data.map(d => d.Population))], [1, 20])
+    }
+  ],
+  crosshair: {
+    yField: {
+      visible: true,
+      line: { visible: true, type: 'line' },
+      label: { visible: true }
+    },
+    xField: {
+      visible: true,
+      line: { visible: true, type: 'line' },
+      label: { visible: true }
+    }
+  },
+  data: [{ id: 'data', values: data }],
+  title: {
+    visible: true,
+    text: 'Basic scatter chart',
+    subtext: 'This is a basic scatter chart',
+  },
+  axes: [
+    {
+      orient: 'left',
+      type: 'linear',
+      range: {
+        min: Math.min(...data.map(d => d.LifeExpectancy)),
+        max: Math.max(...data.map(d => d.LifeExpectancy))
+      },
+      domainLine: { visible: true }
+    },
+    {
+      orient: 'bottom',
+      type: 'linear',
+      domainLine: { visible: true }
+    }
+  ],
+  legends: [{ visible: true,}]
+};
+
+function App() {
+  return (
+    <div style={{ height: 460 }}>
+      <VChart
+        spec={spec}
+        option={{ mode: "desktop-browser" }}
+      />
+    </div>
+  )
+}
+
+render(App);
+```
+
+## Design Guidelines
+
+### Usage Guide
+
+In order to assist designers in selecting charts, we have conducted in-depth analyses of 11 commonly used chart types and summarized chart selection guidelines. Please refer to the [Chart Selection Guidelines](https://bytedance.sg.larkoffice.com/docx/N10zdVn7AovY2kxFj8ulPiFYgUh). for more details.
+
+### Color Specifications
+
+`@visactor/vchart-semi-theme` defines color values for 20 discrete data palettes. The color values are sorted based on the principles of split complementary color schemes and alternating dark and light tones from the existing Semi color palette. For discrete data palettes, Semi Design has declared 20 tokens. If users need to customize the discrete data palettes, they can configure these tokens in the [DSM](https://semi.design/dsm)  when customizing the theme. The specific steps for generating color values are as follows:
+
+<h4>Step1: Follow the split complementary color, generate the first version of the color palette</h4>
+
+We refer to the classic color scheme theory and adopt the principle of <strong>split complementary</strong> color picking, and color picking is carried out in a group of three.
+
+![分裂取色](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/slitColor.png)
+
+<h4>Step2: Base line correction, reduce ambiguity and improve contrast</h4>
+
+1. Avoid ambiguous colors such as red and green.
+2. To ensure discrimination and enhance color contrast, adjacent colors are adjusted to canary release according to the rhythm of "<strong>dark-light-dark-light</strong>".
+
+![基线矫正](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/betterColor.png)
+
 
-VChart supports overall configuration and reuse of chart themes. For more details, please refer to [VChart Theme Concept and Design Guidelines](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Concept_and_Design_Rules). The most important aspect of theme configuration is the color palette. VChart supports two types of palettes: data palettes and semantic palettes. VChart retrieves tokens from the Semi theme/user-defined theme through `@visactor/vchart-semi-theme` and maps them to the data and semantic palettes of VChart themes, achieving compatibility with the Semi default theme/user-defined theme. If you want to configure VChart themes in a project based on Semi, you can use [DSM](https://semi.design/dsm/) to set the corresponding tokens for data palettes and semantic palettes.
+<h4>Step3: Sensible adjustment to enhance visual aesthetics</h4>
 
-### Data Palette
+In order to make the color system more harmonious, in addition to scientific theoretical support, aesthetic corrections need to be made in real business scenarios.
 
-The data palette is a discrete color palette used in charts to differentiate between data groups, often utilized for distinguishing legend items as well. In the following two charts, the data groups are assigned colors from the color queue in sequential order:
+![视觉美学](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/beautyColor.png)
 
-![demo](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/vchart-demo.png)
+<h4>Step4: Expand the color palette to adapt to a wide range of scenarios</h4>
 
-The data palette in VChart can also be dynamic and progressive. In general, the palette is adjusted dynamically based on the range of data items. When the number of data groups is less than or equal to 10, a 10-color palette is used. When the number of data groups exceeds 10, a 20-color palette is used. If the number of data groups exceeds 20, the colors from the palette will be repeated starting from the first color.
+Based on the 10-color palette, we have expanded to 20-color palettes to adapt to a wider range of business scenarios.
 
-![data palette](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/vchart-data-color-en.png)
+![Data Palettes](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/data-chart.png)
 
-Semi Design has defined 20 tokens corresponding to the data palette for VChart, as shown in the table below. Users can customize the data palette of VChart by configuring these tokens when customizing themes in DSM. These 20 tokens represent a palette of 20 colors, and the tokens with names like --semi-color-data-n(where n is 0, 2, 4, 6, 8, 10, 12, 14, 16, 18) represent a palette of 10 colors.
+In VChart, there are various semantic colors applied to chart components, such as background color, border, slider, overlay, font, and text color. The @visactor/vchart-semi-theme package reads the token values of Semi CSS Variables on the body to automatically generate VChart chart themes. <strong>Generally, there is no need to consider this part of the specification separately</strong>. If you need to understand the detailed mapping of semantic colors, you can refer to the following two documents:
 
-<DesignToken componentName='global' reg={/--semi-color-data/} hasTab={false}/>
+- [VChart Theme Concept and Design Guidelines](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Concept_and_Design_Rules)
+- [VChart Theme Extension](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Extension)
 
-#### Semantic Color Palette
+## Design Token
 
-The semantic Color palette primarily defines the common styles for chart components, such as background color, border, sliders, pop-ups, fonts, and text color. The `@visactor/vchart-semi-theme` package automatically crawls the token values of similar scenarios in the current Semi theme in the page environment to generate the VChart chart theme. <strong>Users who configure themes in the DSM usually do not need to consider additional configurations in this aspect</strong>.
+Semi Design has declared 20 tokens for VChart, as shown in the table below.
 
-For more information, please refer to the following two documents:
+<DesignToken componentName='global' reg={/--semi-color-data/} sameWidth={true}/>
 
-- [VChart Theme Concept and Design Rules](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Concept_and_Design_Rules)
-- [VChart Theme Extension Package](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Extension)
+<Notice title='Note'>
+Prior to version 1.10.2 of @visactor/vchart-semi-theme, the tokens with names --semi-color-data-n (where n is 0, 2, 4, 6, 8, 10, 12, 14, 16, 18) were used as a 10-color palette.
+Starting from version 1.10.2 of @visactor/vchart-semi-theme, the tokens with names --semi-color-data-n (where n ranges from 0 to 9) are used as a 10-color palette.
+</Notice>
 
-Contact VChart:
-```chartcontact 
-```
+For any questions, inquiries, or suggestions, you can join the VChart user group to provide feedback.
+<ChartContact
+  name1="WeChat Official Account"
+  name2="Lark user group"
+></ChartContact>

content/show/chart/index.md

@@ -1,30 +1,22 @@
 ---
 localeCode: zh-CN
 order: 67
-category: 其他
-title:  VChart 图表
+category: 展示类
+title:  Data Visualization 数据可视化
 icon: doc-vchart
 dir: column
 brief: 开箱即用的多端图表库。
 ---
 
-对于图表场景，我们推荐使用 [VChart](https://visactor.io/vchart)。VChart 是字节跳动开源可视化解决方案 [VisActor](https://visactor.io) 的核心图表组件库，支持多种图表，简单易用，功能强大。在基于 Semi 的项目中使用 VChart 图表库具有以下优势：
+对于数据可视化场景，我们推荐使用 [VChart](https://visactor.io/vchart)。VChart 是字节跳动开源可视化解决方案 [VisActor](https://visactor.io) 的核心图表组件库，支持多种图表，简单易用，功能强大。<br />
+基于 VChart，我们定制了一套符合 Semi 风格的图表库，优势如下：
 
-- 开箱即用：经过简单的配置，就可以使 VChart 样式自动融入 Semi 设计语言，自动适配 Semi 默认主题或用户自定义主题。
-- 响应式：支持监听页面上的亮暗模式变化，自动对页面上的 VChart 图表进行热更新。
+- 🧩 开箱即用：简单配置及初始化即可使用
+- 🎨 风格统一：基于 VChart 定制了符合 Semi 风格的图表库样式，直接和 Semi Design Token 挂钩；默认样式经过多方验证，可读性和精确性高；支持用户自定义图表样式
+- 🌗 响应式：支持监听页面上的亮暗模式变化，自动对页面上的 VChart 图表进行热更新，同步换肤
 
-## 什么是 VChart
 
-VChart 不只是开箱即用的多端图表库，更是生动灵活的数据故事讲述者。
-
-VChart 基于可视化语法库 [VGrammar](https://visactor.io/vgrammar) 和渲染引擎 [VRender](https://visactor.io/vrender) 进行封装，在满足数据呈现的同时，还支持面向叙事场景的动画编排、丰富的交互能力和定制化的图表风格，简单易用的配置大大降低了用户的学习成本。
-
-VChart 支持多种不同的图表类型，包括<strong>组合图、折线图、面积图、柱状图/条形图、饼/环图、散点图、色块图、直方图、箱形图、瀑布图、进度条、漏斗图、时序图、区间柱图、区间面积图、词云、仪表盘、矩形树图、桑基图、玫瑰图、雷达图、地图、Circle Packing、旭日图</strong>等，图表示例详情见 [VChart 图表示例](https://visactor.io/vchart/example)。以下是基于 Semi Design 默认主题的 VChart 部分图表能力展示：
-
-```chart zh
-```
-
-## 安装和使用 VChart
+## 安装和使用
 
 ### 1、安装
 
@@ -38,7 +30,7 @@ npm i @visactor/react-vchart
 yarn add @visactor/react-vchart
 ```
 
-此外，还需安装 `@visactor/vchart-semi-theme` 来适配 Semi 默认主题或用户自定义主题。
+此外，还需安装 `@visactor/vchart-semi-theme` 来适配 Semi 默认主题或通过 Semi DSM 发布的自定义主题。
 
 ```bash
 # npm
@@ -50,7 +42,7 @@ yarn add @visactor/vchart-semi-theme
 
 ### 2、使用
 
-实现 VChart 对 Semi 主题/用户自定义主题的适配，只需要在全局执行一次 `initVChartSemiTheme` 方法进行初始化。该语句通常可以放在 React 项目的入口文件中。如：
+Semi 自 v2.47.0 版本增加相关的 Design Token 用于实现 VChart 对 Semi 主题或通过 Semi DSM 发布的自定义主题的适配。因此对于 v2.47.0 及以上版本，只需要在全局执行一次 `initVChartSemiTheme` 方法进行初始化。该语句通常可以放在 React 项目的入口文件中。如：
 
 ```javascript
 //index.jsx
@@ -76,97 +68,1011 @@ interface IInitVChartSemiThemeOption {
 }
 ```
 
-除去初始化语句外，无需其他操作，直接使用 VChart 图表组件即可。以下是一个饼图的使用代码示例：
+对于 v2.47.0 以下版本的 Semi，虽然没有相应的 Design Token，但是可以借助 `@visactor/vchart-semi-theme` 中的内置主题包样式默认值。<strong>注意：此使用方式不支持明暗模式自动切换，用户可按需设置当前图表模式</strong>，代码示例如下：
 
-```javascript
-// app.jsx
+```js
+import semiDesignLight from '@visactor/vchart-semi-theme/public/semiDesignLight.json';
+import semiDesignDark from '@visactor/vchart-semi-theme/public/semiDesignDark.json';
+import VChart from '@visactor/vchart';
+// register the theme
+VChart.ThemeManager.registerTheme('semiDesignLight', semiDesignLight);
+VChart.ThemeManager.registerTheme('semiDesignDark', semiDesignDark);
+// apply the light theme
+VChart.ThemeManager.setCurrentTheme('semiDesignLight');
+// apply the dark theme
+VChart.ThemeManager.setCurrentTheme('semiDesignDark');
+```
+
+>主题包的更多信息见 [@visactor/vchart-semi-theme](https://www.npmjs.com/package/@visactor/vchart-semi-theme) <br />
+绘制图表以及更详细的指引详见 [VChart 教程文档](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/react)。
+
+
+## 常用图表类型示例
+
+VChart 基于可视化语法库 [VGrammar](https://visactor.io/vgrammar) 和渲染引擎 [VRender](https://visactor.io/vrender) 进行封装，在满足数据呈现的同时，还支持面向叙事场景的动画编排、丰富的交互能力和定制化的图表风格，简单易用的配置大大降低了用户的学习成本。
+
+VChart 支持多种不同的图表类型，包括<strong>组合图、折线图、面积图、柱状图/条形图、饼/环图、散点图、色块图、直方图、箱形图、瀑布图、进度条、漏斗图、时序图、区间柱图、区间面积图、词云、仪表盘、矩形树图、桑基图、玫瑰图、雷达图、地图、Circle Packing、旭日图</strong>等，图表示例详情见 [VChart 图表示例](https://visactor.io/vchart/example)。以下是基于 Semi Design 默认主题的 VChart 常用图表使用示例：
+
+### 柱状图
+
+<h4>基础柱状图</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
+
+initVChartSemiTheme();
+
+const commonSpec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { type:'Date', month: 'Monday', sales: 22 },
+        { type:'Date', month: 'Tuesday', sales: 13 },
+        { type:'Date', month: 'Wednesday', sales: 25 },
+        { type:'Date', month: 'Thursday', sales: 29 },
+        { type:'Date', month: 'Friday', sales: 38 }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Bar chart',
+    subtext: 'This is a bar chart',
+  },
+  legends: {
+    visible: true,
+  },
+  xField: 'month',
+  yField: 'sales',
+  seriesField: 'type',
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+    return {
+      ...commonSpec,
+      xField: isVertical ? 'month' : 'sales',
+      yField: isVertical ? 'sales' : 'month',
+      direction: direction,
+    };
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+          key={direction}
+          spec={spec}
+          option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<h4>分组柱状图</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { type: 'Autocracies', year: '1930', value: 129 },
+        { type: 'Autocracies', year: '1940', value: 133 },
+        { type: 'Autocracies', year: '1950', value: 130 },
+        { type: 'Autocracies', year: '1960', value: 126 },
+        { type: 'Autocracies', year: '1970', value: 117 },
+        { type: 'Autocracies', year: '1980', value: 114 },
+        { type: 'Autocracies', year: '1990', value: 111 },
+        { type: 'Autocracies', year: '2000', value: 89 },
+        { type: 'Autocracies', year: '2010', value: 80 },
+        { type: 'Autocracies', year: '2018', value: 80 },
+        { type: 'Democracies', year: '1930', value: 22 },
+        { type: 'Democracies', year: '1940', value: 13 },
+        { type: 'Democracies', year: '1950', value: 25 },
+        { type: 'Democracies', year: '1960', value: 29 },
+        { type: 'Democracies', year: '1970', value: 38 },
+        { type: 'Democracies', year: '1980', value: 41 },
+        { type: 'Democracies', year: '1990', value: 57 },
+        { type: 'Democracies', year: '2000', value: 87 },
+        { type: 'Democracies', year: '2010', value: 98 },
+        { type: 'Democracies', year: '2018', value: 99 }
+      ]
+    }
+  ],
+  seriesField: 'type',
+  title: {
+    visible: true,
+    text: 'Grouped bar chart',
+    subtext: 'This is a grouped bar chart',
+  },
+  legends: {
+    visible: true,
+  }
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+    return {
+      ...commonSpec,
+      xField: isVertical ? ['year', 'type'] : 'value',
+      yField: isVertical ? 'value' : ['year', 'type'],
+      direction: direction,
+    };
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={direction}
+            spec={spec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<h4>堆叠柱状图</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'bar',
+  stack: true,
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { State: 'WY', Age: 'Under 5 Years', Population: 25635 },
+        { State: 'WY', Age: '5 to 13 Years', Population: 1890 },
+        { State: 'WY', Age: '14 to 17 Years', Population: 9314 },
+        { State: 'DC', Age: 'Under 5 Years', Population: 30352 },
+        { State: 'DC', Age: '5 to 13 Years', Population: 20439 },
+        { State: 'DC', Age: '14 to 17 Years', Population: 10225 },
+        { State: 'VT', Age: 'Under 5 Years', Population: 38253 },
+        { State: 'VT', Age: '5 to 13 Years', Population: 42538 },
+        { State: 'VT', Age: '14 to 17 Years', Population: 15757 },
+        { State: 'ND', Age: 'Under 5 Years', Population: 51896 },
+        { State: 'ND', Age: '5 to 13 Years', Population: 67358 },
+        { State: 'ND', Age: '14 to 17 Years', Population: 18794 },
+        { State: 'AK', Age: 'Under 5 Years', Population: 72083 },
+        { State: 'AK', Age: '5 to 13 Years', Population: 85640},
+        { State: 'AK', Age: '14 to 17 Years', Population: 22153 }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Stacked bar chart',
+    subtext: 'This is a stacked bar chart',
+  },
+  seriesField: 'Age',
+  legends: {
+    visible: true
+  },
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+    return {
+      ...commonSpec,
+      xField: isVertical ? 'State' : 'Population',
+      yField: isVertical ? 'Population' : 'State',
+      direction: direction,
+    };
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={direction}
+            spec={spec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<h4>百分比堆叠柱状图</h4>
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'bar',
+  percent: true,
+  stack: true,
+  data: [
+    {
+      id: 'barData',
+      values: [
+        { State: 'WY', Age: 'Under 5 Years', Population: 25635 },
+        { State: 'WY', Age: '5 to 13 Years', Population: 1890 },
+        { State: 'WY', Age: '14 to 17 Years', Population: 9314 },
+        { State: 'DC', Age: 'Under 5 Years', Population: 30352 },
+        { State: 'DC', Age: '5 to 13 Years', Population: 20439 },
+        { State: 'DC', Age: '14 to 17 Years', Population: 10225 },
+        { State: 'VT', Age: 'Under 5 Years', Population: 38253 },
+        { State: 'VT', Age: '5 to 13 Years', Population: 42538 },
+        { State: 'VT', Age: '14 to 17 Years', Population: 15757 },
+        { State: 'ND', Age: 'Under 5 Years', Population: 51896 },
+        { State: 'ND', Age: '5 to 13 Years', Population: 67358 },
+        { State: 'ND', Age: '14 to 17 Years', Population: 18794 },
+        { State: 'AK', Age: 'Under 5 Years', Population: 72083 },
+        { State: 'AK', Age: '5 to 13 Years', Population: 85640},
+        { State: 'AK', Age: '14 to 17 Years', Population: 22153 }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Percentage stacked bar chart',
+    subtext: 'This is a percentage stacked bar chart',
+  },
+  seriesField: 'Age',
+  legends: { visible: true },
+  axes: [
+    {
+      orient: 'left',
+      label: {
+        formatMethod: val => {
+          return `${(val * 100).toFixed(2)}%`;
+        }
+      }
+    }
+  ],
+};
+
+function App() {
+  const [direction, setDirection] = useState("vertical");
+  const onChange = useCallback((e) => setDirection(e.target.value), []);
+  const spec = useMemo(() => {
+    const isVertical = direction === 'vertical';
+    const spec = {
+      ...commonSpec,
+      xField: isVertical ? 'State' : 'Population',
+      yField: isVertical ? 'Population' : 'State',
+      direction: direction,
+    };
+    spec.axes[0].orient = isVertical ? 'left': 'top';
+    return spec;
+  }, [direction]);
+  return (
+    <>
+     <RadioGroup onChange={onChange} value={direction} >
+        <Radio value={'vertical'}>vertical</Radio>
+        <Radio value={'horizontal'}>horizontal</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={direction}
+            spec={spec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+### 折线图
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'line',
+  xField: 'year',
+  yField: 'count',
+  seriesField: 'medalType',
+  legends: { visible: true }
+};
+
+const data = [[40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
+  [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
+  [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29]].map((arr, outer) => {
+  const type = ['Gold', 'Silver', 'Bronze'][outer];
+  return arr.map((item, inner) => ({
+    year: `${inner * 4 + 1952}`,
+    count: item,
+    medalType: type,
+  }));
+});
+
+function App() {
+  const [type, setType] = useState('multiple');
+  const onChange = useCallback((e) => setType(e.target.value), []);
+  const spec = useMemo(() => {
+    return {
+      ...commonSpec,
+      title: {
+        visible: true,
+        text: `${type === "multiple" ? "Multi-series" : "Basic"} line chart`,
+        subtext: `This is a ${type === "multiple" ? "multi-series" : "basic"} line chart`,
+      },
+      data: { values: type === 'multiple' ? data[0].concat(data[1]).concat(data[2]) : data[0] }
+    };
+  }, [type])
+
+  return (
+    <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'multiple'}>multiple</Radio>
+        <Radio value={'single'}>single</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            key={type}
+            spec={spec}
+            option={{ mode: "desktop-browser"}}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+### 面积图
+
+```jsx live=true dir="row" noInline=true half=true
 import React from "react";
 import { VChart } from "@visactor/react-vchart";
 
-const chart = {
-  spec: {
-    type: 'pie',
-    data: [
-      {
-        id: 'id0',
-        values: [
-          { type: 'oxygen', value: '46.60' },
-          { type: 'silicon', value: '27.72' },
-          { type: 'aluminum', value: '8.13' },
-          { type: 'iron', value: '5' },
-          { type: 'calcium', value: '3.63' },
-          { type: 'sodium', value: '2.83' },
-          { type: 'potassium', value: '2.59' },
-          { type: 'others', value: '3.5' }
-        ]
+const commonSpec = {
+  type: 'area',
+  stack: true,
+  title: {
+    visible: true,
+    text: 'Stacked area chart',
+    subtext: 'This is a stacked area chart',
+  },
+  xField: 'type',
+  yField: 'value',
+  seriesField: 'country',
+  legends: { visible: true },
+  tooltip: {
+    dimension: {
+      updateContent: data => {
+        let sum = 0;
+        data.forEach(datum => {
+          sum += +datum.value;
+        });
+        data.push({
+          hasShape: 'false',
+          key: 'Total',
+          value: sum
+        });
+        return data;
       }
-    ],
-    valueField: 'value',
-    categoryField: 'type',
+    }
+  }
+};
+
+const values = [[4229, 4376, 3054, 12814], [3932, 3987, 5067, 13012], 
+ [5221, 3574, 7004, 11624], [9256, 4376, 9054, 8814],[3308, 4572, 12043, 12998], 
+ [5432, 3417, 15067, 12321],[13701, 5231, 10119, 10342],[4008, 4572, 12043, 22998], 
+ [18712, 6134, 10419, 11261]].reduce((acc, arr, index) => {
+  const type = ['Nail polish', 'Eyebrow pencil', 'Rouge', 'Lipstick', 'Eyeshadows', 
+ 'Eyeliner', 'Foundation', 'Lip gloss', 'Mascara'][index];
+  const result = ['Africa', 'EU', 'China', 'USA'].map((item, innerIndex) => ({
+      country: item,
+      type: type,
+      value: arr[innerIndex],
+    }));
+    return acc.concat(result);
+ }, []);
+
+const data = {
+  fields: {
+    country: {
+      domain: ['Africa', 'EU', 'China', 'USA'].reverse(),
+      lockStatisticsByDomain: true
+    }
+  },
+  values: values,
+}
+
+function App() {
+  return (
+    <div style={{ height: 460 }}>
+      <VChart
+          spec={{ ...commonSpec,  data: data }}
+          option={{ mode: "desktop-browser"}}
+      />
+    </div>
+  )
+}
+
+render(App);
+```
+
+### 饼图
+
+```jsx live=true dir="column" noInline=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const commonSpec = {
+  type: 'pie',
+  data: [
+    {
+      id: 'id0',
+      values: [{ type: 'oxygen', value: '46.60' }, { type: 'silicon', value: '27.72' },
+        { type: 'aluminum', value: '8.13' }, { type: 'iron', value: '5' },
+        { type: 'calcium', value: '3.63' }, { type: 'sodium', value: '2.83' },
+        { type: 'potassium', value: '2.59' }, { type: 'others', value: '3.5' }]
+    }
+  ],
+  valueField: 'value',
+  categoryField: 'type',
+  label: {
+    visible: true
+  },
+  tooltip: {
+    mark: {
+      content: [
+        {
+          key: datum => datum['type'],
+          value: datum => datum['value'] + '%'
+        }
+      ]
+    }
+  }
+};
+
+const donutChart = {
+  title: {
+    visible: true,
+    text: 'Pie chart',
+    subtext: 'This is a pie chart',
+  },
+  legends: {
+    visible: true,
+    orient: 'right'
+  },
+}
+
+const donutWithIndicator = {
+  title: {
+    visible: true,
+    text: 'Donut chart with indicator',
+    subtext: 'This is a donut chart with indicator',
+  },
+  legends: {
+    visible: true,
+    orient: 'right'
+  },
+  indicator: {
+    visible: true,
+    trigger: 'select',
     title: {
       visible: true,
-      text: 'Statistics of Surface Element Content'
+      style: {
+        fontSize: 12,
+        fontWeight: 'normal',
+        text: data => {
+          if (data) {
+            const value = data['type'];
+            return value ? value : null;
+          }
+          return '总和';
+        }
+      }
     },
-    legends: {
-      visible: true,
-      orient: 'left',
-      title: {
+    content: [
+      {
         visible: true,
-        text: 'Elements'
+        fontWeight: 'bold',
+        style: {
+          fontSize: 20,
+          text: data => {
+            if (data) {
+              const value = data['value'];
+              return value ? `${value}%` : null;
+            }
+            return 1234;
+          }
+        }
       }
+    ]
+  }
+}
+
+function App() {
+  const [type, setType] = useState('donut');
+  const onChange = useCallback((e) => setType(e.target.value), []);
+  return (
+    <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'donut'}>饼图</Radio>
+        <Radio value={'donutWithIndicator'}>带指标卡饼图</Radio>
+      </RadioGroup>
+      <div style={{ display: 'flex', alignItem: 'center', justifyContent: 'center'}}>
+        <VChart
+            spec={{
+                ...commonSpec,
+                ...(type === 'donut' ? donutChart : donutWithIndicator),
+            }}
+            option={{ mode: "desktop-browser" }}
+            style={{ height: 440, width:680 }}
+        />
+      </div>
+    </>
+  )
+}
+
+render(App);
+```
+
+<!-- ### 漏斗图
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const basicSpec = {
+  type: 'funnel',
+  categoryField: 'name',
+  valueField: 'value',
+  data: [
+    {
+      id: 'funnel',
+      values: [
+        { value: 100, name: 'Step1' },
+        { value: 80, name: 'Step2' },
+        { value: 60, name: 'Step3' },
+        { value: 40, name: 'Step4'},
+        { value: 20, name: 'Step5' }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Basic funnel chart',
+    subtext: 'This is a basic funnel chart',
+  },
+  label: { visible: true },
+  legends: { visible: true }
+};
+
+const RectangularSpec = {
+  type: 'funnel',
+  maxSize: '75%',
+  minSize: '10%',
+  isTransform: true,
+  shape: 'rect',
+  funnel: {
+    style: { cornerRadius: 4, stroke: 'white', lineWidth: 2 },
+    state: {
+      hover: { stroke: '#4e83fd', lineWidth: 1 }
+    }
+  },
+  transform: {
+    style: { stroke: 'white', lineWidth: 2 },
+    state: {
+      hover: { stroke: '#4e83fd', lineWidth: 1 }
+    }
+  },
+  label: {
+    visible: true,
+    style: {
+      lineHeight: 16,
+      limit: Infinity,
+      text: datum => [`${datum.name}`, `${datum.value}`]
+    }
+  },
+  outerLabel: {
+    visible: true,
+    position: 'right',
+    alignLabel: false,
+    style: {
+      text: datum => `${datum.percent * 100}%`
     },
-    label: {
-      visible: true
+    line: { style: { lineDash: [2, 2] } }
+  },
+  transformLabel: {
+    visible: true,
+    style: { fill: 'black' }
+  },
+  data: [
+    {
+      name: 'funnel',
+      values: [
+        { value: 100, name: 'Resume Screening',  percent: 1},
+        { value: 80, name: 'Resume Evaluation', percent: 0.8 },
+        { value: 50, name: 'Evaluation Passed', percent: 0.5 },
+        { value: 30, name: 'Interview', percent: 0.3 },
+        { value: 10, name: 'Final Pass', percent: 0.1 }
+      ]
     }
+  ],
+  categoryField: 'name',
+  valueField: 'value',
+  title: {
+    visible: true,
+    text: 'Rectangular conversion funnel chart',
+    subtext: 'This is a rectangular conversion funnel chart',
+  },
+  legends: {
+    visible: true,
   }
+};
+
+function App() {
+  const [type, setType] = useState('rectangular');
+  const onChange = useCallback((e) => setType(e.target.value), []);
+  return (
+    <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'basic'}>基础漏斗图</Radio>
+        <Radio value={'rectangular'}>矩形转化漏斗图</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            spec={type === 'basic' ? basicSpec : RectangularSpec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
+  )
 }
 
-const App = () => {
+render(App);
+``` -->
+
+### 雷达图
+
+```jsx live=true dir="row" noInline=true half=true
+import React, { useState, useCallback } from "react";
+import { VChart } from "@visactor/react-vchart";
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+
+const basicSpec = {
+  type: 'radar',
+  data: [
+    {
+      id: 'radarData',
+      values: [
+        { key: 'Strength', value: 5 },
+        { key: 'Speed', value: 5 },
+        { key: 'Shooting', value: 3 },
+        { key: 'Endurance', value: 5 },
+        { key: 'Precision', value: 5 },
+        { key: 'Growth', value: 5 }
+      ]
+    }
+  ],
+  categoryField: 'key',
+  valueField: 'value',
+  point: { visible: true },
+  area: { visible: true },
+  axes: [
+    {
+      orient: 'radius', // radius axis
+      zIndex: 100,
+      min: 0,
+      max: 8,
+      domainLine: { visible: false },
+      label: {
+        visible: true,
+        space: 0,
+        style: { textAlign: 'center', stroke: '#fff', lineWidth: 4 }
+      },
+      grid: { smooth: false },
+    },
+    {
+      orient: 'angle', // angle axis
+      zIndex: 50,
+      tick: { visible: false },
+      domainLine: { visible: false },
+      label: { space: 20 },
+    }
+  ]
+};
+
+const groupSpec = {
+  type: 'radar',
+  data: [{
+    values: [[45, 61, 92, 57, 46, 36, 33, 63, 57, 53, 69, 40], 
+            [31, 39, 81, 39, 64, 21, 58, 72, 47, 37, 80, 74],
+            [90, 95, 62, 52, 74, 87, 80, 69, 74, 84, 94, 23]]
+            .reduce((acc, cur, index) => {
+              const type = ['A', 'B', 'C'];
+              const month = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'Jun.', 
+              'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.']
+              const result = cur.map((item, innerIndex) => ({
+                month: month[innerIndex],
+                value: item,
+                type: type[index]
+              }))
+              return acc.concat(result);
+            }, []),
+  }],
+  categoryField: 'month',
+  valueField: 'value',
+  seriesField: 'type',
+  stack: true,
+  area: { visible: true },
+  legends: { visible: true, orient: 'right'}
+}
+
+function App() {
+  const [type, setType] = useState('group');
+  const onChange = useCallback((e) => setType(e.target.value), []);
   return (
-    <VChart
-        spec={{
-            height: 400,
-            ...chart.spec,
-        }}
-        option={{
-            mode: "desktop-browser",
-        }}
-    />
+    <>
+      <RadioGroup onChange={onChange} value={type} >
+        <Radio value={'basic'}>基础雷达图</Radio>
+        <Radio value={'group'}>分组雷达图</Radio>
+      </RadioGroup>
+      <div style={{ height: 440 }}>
+        <VChart
+            spec={type === 'basic' ? basicSpec : groupSpec}
+            option={{ mode: "desktop-browser" }}
+        />
+      </div>
+    </>
   )
 }
+
+render(App);
 ```
 
->主题包的更多信息见 [@visactor/vchart-semi-theme](https://www.npmjs.com/package/@visactor/vchart-semi-theme) <br />
-绘制图表以及更详细的指引详见 [VChart 教程文档](https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/react)。
+### 散点图
+
+```jsx live=true dir="row" noInline=true half=true
+import React from "react";
+import { VChart } from "@visactor/react-vchart";
+
+const data = [
+  { continent: 'Americas', Country: 'Argentina', LifeExpectancy: 75.32, GDP: 12779.37964, Population: 40301927 },
+  { continent: 'Americas', Country: 'Brazil', LifeExpectancy: 72.39, GDP: 9065.800825, Population: 190010647 },
+  { continent: 'Americas', Country: 'Canada', LifeExpectancy: 80.653, GDP: 36319.23501, Population: 33390141 },
+  { continent: 'Americas', Country: 'Chile', LifeExpectancy: 78.553, GDP: 13171.63885, Population: 16284741 },
+  { continent: 'Americas', Country: 'Colombia', LifeExpectancy: 72.889, GDP: 7006.580419, Population: 44227550 },
+  { continent: 'Americas', Country: 'Costa Rica', LifeExpectancy: 78.782, GDP: 9645.06142, Population: 4133884 },
+  { continent: 'Americas', Country: 'Cuba', LifeExpectancy: 78.273, GDP: 8948.102923, Population: 11416987 },
+  { continent: 'Americas', Country: 'Dominican Republic', LifeExpectancy: 72.235, GDP: 6025.374752, Population: 9319622 },
+  { continent: 'Americas', Country: 'Ecuador', LifeExpectancy: 74.994, GDP: 6873.262326, Population: 13755680 },
+  { continent: 'Americas', Country: 'El Salvador', LifeExpectancy: 71.878, GDP: 5728.353514, Population: 6939688 },
+  { continent: 'Americas', Country: 'Guatemala', LifeExpectancy: 70.259, GDP: 5186.050003, Population: 12572928 },
+  { continent: 'Americas', Country: 'Honduras', LifeExpectancy: 70.198, GDP: 3548.330846, Population: 7483763 },
+  { continent: 'Americas', Country: 'Jamaica', LifeExpectancy: 72.567, GDP: 7320.880262, Population: 2780132 },
+  { continent: 'Americas', Country: 'Mexico', LifeExpectancy: 76.195, GDP: 11977.57496, Population: 108700891 },
+  { continent: 'Americas', Country: 'Nicaragua', LifeExpectancy: 72.899, GDP: 2749.320965, Population: 5675356 },
+  { continent: 'Americas', Country: 'Panama', LifeExpectancy: 75.537, GDP: 9809.185636, Population: 3242173 },
+  { continent: 'Americas', Country: 'Paraguay', LifeExpectancy: 71.752, GDP: 4172.838464, Population: 6667147 },
+  { continent: 'Americas', Country: 'Peru', LifeExpectancy: 71.421, GDP: 7408.905561, Population: 28674757 },
+  { continent: 'Americas', Country: 'Puerto Rico', LifeExpectancy: 78.746, GDP: 19328.70901, Population: 3942491 },
+  { continent: 'Americas', Country: 'Trinidad and Tobago', LifeExpectancy: 69.819, GDP: 18008.50924, Population: 1056608 },
+  { continent: 'Americas', Country: 'United States', LifeExpectancy: 78.242, GDP: 42951.65309, Population: 301139947 },
+  { continent: 'Americas', Country: 'Uruguay', LifeExpectancy: 76.384, GDP: 10611.46299, Population: 3447496 },
+  { continent: 'Americas', Country: 'Venezuela', LifeExpectancy: 73.747, GDP: 11415.80569, Population: 26084662 },
+  { continent: 'Asia', Country: 'China', LifeExpectancy: 72.961, GDP: 4959.114854, Population: 1318683096 },
+  { continent: 'Asia', Country: 'Hong Kong, China', LifeExpectancy: 82.208, GDP: 39724.97867, Population: 6980412 },
+  { continent: 'Asia', Country: 'Japan', LifeExpectancy: 82.603, GDP: 31656.06806, Population: 127467972 },
+  { continent: 'Asia', Country: 'Korea, Dem. Rep.', LifeExpectancy: 67.297, GDP: 1593.06548, Population: 23301725 },
+  { continent: 'Asia', Country: 'Korea, Rep.', LifeExpectancy: 78.623, GDP: 23348.13973, Population: 49044790 },
+  { continent: 'Europe', Country: 'Albania', LifeExpectancy: 76.423, GDP: 5937.029526, Population: 3600523 },
+  { continent: 'Europe', Country: 'Austria', LifeExpectancy: 79.829, GDP: 36126.4927, Population: 8199783 },
+  { continent: 'Europe', Country: 'Belgium', LifeExpectancy: 79.441, GDP: 33692.60508, Population: 10392226 },
+  { continent: 'Europe', Country: 'Bosnia and Herzegovina', LifeExpectancy: 74.852, GDP: 7446.298803, Population: 4552198 },
+  { continent: 'Europe', Country: 'Bulgaria', LifeExpectancy: 73.005, GDP: 10680.79282, Population: 7322858 },
+  { continent: 'Europe', Country: 'Croatia', LifeExpectancy: 75.748, GDP: 14619.22272, Population: 4493312 },
+  { continent: 'Europe', Country: 'Czech Republic', LifeExpectancy: 76.486, GDP: 22833.30851, Population: 10228744 },
+  { continent: 'Europe', Country: 'Denmark', LifeExpectancy: 78.332, GDP: 35278.41874, Population: 5468120 },
+  { continent: 'Europe', Country: 'Finland', LifeExpectancy: 79.313, GDP: 33207.0844, Population: 5238460 },
+  { continent: 'Europe', Country: 'France', LifeExpectancy: 80.657, GDP: 30470.0167, Population: 61083916 },
+  { continent: 'Europe', Country: 'Germany', LifeExpectancy: 79.406, GDP: 32170.37442, Population: 82400996 },
+  { continent: 'Europe', Country: 'Greece', LifeExpectancy: 79.483, GDP: 27538.41188, Population: 10706290 },
+  { continent: 'Europe', Country: 'Hungary', LifeExpectancy: 73.338, GDP: 18008.94444, Population: 9956108 },
+  { continent: 'Europe', Country: 'Iceland', LifeExpectancy: 81.757, GDP: 36180.78919, Population: 301931 },
+  { continent: 'Europe', Country: 'Ireland', LifeExpectancy: 78.885, GDP: 40675.99635, Population: 4109086 },
+  { continent: 'Europe', Country: 'Italy', LifeExpectancy: 80.546, GDP: 28569.7197, Population: 58147733 },
+  { continent: 'Europe', Country: 'Montenegro', LifeExpectancy: 74.543, GDP: 9253.896111, Population: 684736 },
+  { continent: 'Europe', Country: 'Netherlands', LifeExpectancy: 79.762, GDP: 36797.93332, Population: 16570613 },
+  { continent: 'Europe', Country: 'Norway', LifeExpectancy: 80.196, GDP: 49357.19017, Population: 4627926 },
+  { continent: 'Europe', Country: 'Poland', LifeExpectancy: 75.563, GDP: 15389.92468, Population: 38518241 },
+  { continent: 'Europe', Country: 'Portugal', LifeExpectancy: 78.098, GDP: 20509.64777, Population: 10642836 },
+  { continent: 'Europe', Country: 'Romania', LifeExpectancy: 72.476, GDP: 10808.47561, Population: 22276056 },
+  { continent: 'Europe', Country: 'Serbia', LifeExpectancy: 74.002, GDP: 9786.534714, Population: 10150265 },
+  { continent: 'Europe', Country: 'Slovak Republic', LifeExpectancy: 74.663, GDP: 18678.31435, Population: 5447502 },
+  { continent: 'Europe', Country: 'Slovenia', LifeExpectancy: 77.926, GDP: 25768.25759, Population: 2009245 },
+  { continent: 'Europe', Country: 'Spain', LifeExpectancy: 80.941, GDP: 28821.0637, Population: 40448191 },
+  { continent: 'Europe', Country: 'Sweden', LifeExpectancy: 80.884, GDP: 33859.74835, Population: 9031088 },
+  { continent: 'Europe', Country: 'Switzerland', LifeExpectancy: 81.701, GDP: 37506.41907, Population: 7554661 },
+  { continent: 'Europe', Country: 'Turkey', LifeExpectancy: 71.777, GDP: 8458.276384, Population: 71158647 },
+  { continent: 'Europe', Country: 'United Kingdom', LifeExpectancy: 79.425, GDP: 33203.26128, Population: 60776238 },
+  { continent: 'Oceania', Country: 'Australia', LifeExpectancy: 81.235, GDP: 34435.36744, Population: 20434176 },
+  { continent: 'Oceania', Country: 'New Zealand', LifeExpectancy: 80.204, GDP: 25185.00911, Population: 4115771 }
+];
+
+function logScale(value, domain, range) {
+  // Calculate the logarithm of the domain and range
+  const logDomain = domain.map(x => (x !== 0 ? Math.log10(x) : 0));
+  const logRange = range.map(x => Math.log10(x));
+  // Calculate the position of the value in the domain, map it to the range
+  const t = (Math.log10(value) - logDomain[0]) / (logDomain[1] - logDomain[0]);
+  const newValue = (logRange[1] - logRange[0]) * t + logRange[0];
+  // Return the mapped value and restore the logarithmic scaling
+  return Math.pow(10, newValue);
+}
+
+// chart spec
+const spec = {
+  type: 'common',
+  series: [
+    {
+      type: 'scatter',
+      xField: 'GDP',
+      yField: 'LifeExpectancy',
+      seriesField: 'continent',
+      sizeField: 'Population',
+      size: d => logScale(d.Population, [0, Math.max(...data.map(d => d.Population))], [1, 20])
+    }
+  ],
+  crosshair: {
+    yField: {
+      visible: true,
+      line: { visible: true, type: 'line' },
+      label: { visible: true }
+    },
+    xField: {
+      visible: true,
+      line: { visible: true, type: 'line' },
+      label: { visible: true }
+    }
+  },
+  data: [{ id: 'data', values: data }],
+  title: {
+    visible: true,
+    text: 'Basic scatter chart',
+    subtext: 'This is a basic scatter chart',
+  },
+  axes: [
+    {
+      orient: 'left',
+      type: 'linear',
+      range: {
+        min: Math.min(...data.map(d => d.LifeExpectancy)),
+        max: Math.max(...data.map(d => d.LifeExpectancy))
+      },
+      domainLine: { visible: true }
+    },
+    {
+      orient: 'bottom',
+      type: 'linear',
+      domainLine: { visible: true }
+    }
+  ],
+  legends: [{ visible: true,}]
+};
+
+function App() {
+  return (
+    <div style={{ height: 460 }}>
+      <VChart
+        spec={spec}
+        option={{ mode: "desktop-browser" }}
+      />
+    </div>
+  )
+}
+
+render(App);
+```
+
+## 设计规范
 
+### 选用指南
 
-## 配置 VChart 主题
+为了帮助设计师进行图表选择，我们对常用的 11 种图表进行了深度解析，并归纳出图表选用方案，见[图表选用规范](https://bytedance.sg.larkoffice.com/docx/N10zdVn7AovY2kxFj8ulPiFYgUh)。
 
-VChart 支持对图表主题的整体配置和复用，详见 [VChart 主题概念和设计规范](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Concept_and_Design_Rules)。 主题配置中最主要的是色板的配置。VChart 支持的色板分为两大类，数据色板和语义色板。VChart 通过 `@visactor/vchart-semi-theme` 获取 Semi 主题/用户自定义主题中的 token，并映射到 VChart 主题的数据色板和语义色板中，从而实现和 Semi 默认主题/用户自定义主题的适配。基于 Semi 的项目如果想要配置 VCharts 主题，可以通过 [DSM](https://semi.design/dsm/) 设置数据色板和语义色板相应的 token。
+### 颜色规范
 
-### 数据色板
+`@visactor/vchart-semi-theme` 中定义了 20 个离散数据色板的色值。色值从已有的 Semi 色板中按照分裂互补配色和暗亮交替的原则进行排序。对于离散数据色板，Semi Design 侧已声明了 20 个 Token，如果需要自定义离散数据色板，用户可以在 [DSM](https://semi.design/dsm) 自定义主题时配置这些 Token。色值的具体生成步骤如下：
 
-数据色板是在图表中用于区分数据组的离散色板，也通常用于区分图例项。如以下两个图表中不同数据组的色板，在颜色队列中按顺序取色：
+<h4>Step1: 遵从分裂互补取色，生成初版色稿</h4>
 
-![demo](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/vchart-demo.png)
+我们参考了经典配色理论，采用<strong>分裂互补</strong>取色原则，按照三个一组的方式进行取色。
 
-VChart 数据色板也可以是动态的、渐进式的。在一般情况下，色板会根据数据项数量的范围来动态调整。数据组不超过 10 个时，采用 10 色的色板；数据组超过 10 个时，采用 20 色的色板。如果数据组超过 20 个，则会从第 1 个色值开始重复应用色板颜色。
+![分裂取色](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/slitColor.png)
 
-![数据色板](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/vchart-data-color.png)
+<h4>Step2: 基线矫正，降低歧义提升对比</h4>
 
-Semi Design 为 VChart 声明了数据色板对应的 20 个 token， 详见下表。用户可以在 DSM 自定义主题时配置这些 token，来自定义 VChart 的数据色板。这 20 个 token 值是 20 色的色板，其中的名称为 --semi-color-data-n(n 为 0, 2, 4, 6, 8, 10, 12, 14, 16, 18)的 token 值是 10 色的色板。
+1. 规避红绿等易引起歧义的色彩。
+2. 为保证区分度， 增强色彩对比，相邻颜色按照“<strong>暗-亮-暗-亮</strong>”的节奏进行灰度调整。
 
-<DesignToken componentName='global' reg={/--semi-color-data/} hasTab={false}/>
+![基线矫正](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/betterColor.png)
 
-### 语义色板
 
-语义色板中主要定义了图表组件的公共样式，比如背景色、边框、滑块、弹层、字体、字色等。`@visactor/vchart-semi-theme` 也会自动在页面环境爬取当前 Semi 主题的类似场景的 token 值来自动生成 VChart 图表主题。在 DSM 配置主题的用户，<strong>通常无需额外考虑此部分的配置</strong>。
+<h4>Step3: 感性调整，提升视觉美学</h4>
 
-更多信息可以参阅以下两篇文档：
+为了让色彩体系更加和谐，在科学理论支撑之外，还需在真实业务场景下进行美学修正。
+
+![视觉美学](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/beautyColor.png)
+
+<h4>Step4: 色板延展，适应广泛场景</h4>
+
+在 10 色色板的基础上，我们拓展到 20 色色板以适应更为广泛的业务场景。
+
+![数据色板](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/data-chart.png)
+
+在 VChart 中，还有许多应用于图表组件的语义颜色，比如背景色、边框、滑块、弹层、字体、字色等。`@visactor/vchart-semi-theme` 会读取 body 上的 Semi CSS Variables 的 Token 值来自动生成 VChart 图表主题，<strong>通常无需额外考虑此部分的规范</strong>。如果需要了解详细的语义颜色映射关系可以参阅以下两篇文档：
 
 - [VChart 主题概念和设计规范](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Concept_and_Design_Rules)
 - [VChart 扩展主题包](https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Extension)
 
-联系 VChart：
-```chartcontact 
-```
+## Design Token
+
+Semi Design 为 VChart 声明的 20 个 Token 详见下表。
+
+<DesignToken componentName='global' reg={/--semi-color-data/} sameWidth={true}/>
+
+<Notice title='Note'>
+    在 @visactor/vchart-semi-theme 1.10.2 版本前，其中的名称为 --semi-color-data-n(n 为 0, 2, 4, 6, 8, 10, 12, 14, 16, 18)的 Token 值作为 10 色的色板。
+    在 @visactor/vchart-semi-theme 1.10.2 版本后，其中的名称为 --semi-color-data-n(n 从 0 到 9)的 Token 作为 10 色的色板。
+</Notice>
+
+
+
+使用问题咨询/建议，可加入 VChart 用户群进行反馈
+<ChartContact
+  name1="微信号"
+  name2="飞书用户群"
+></ChartContact>

package.json

@@ -55,8 +55,8 @@
         "@storybook/react-webpack5": "^7.0.7",
         "@svgr/core": "^5.5.0",
         "@types/react-window": "^1.8.5",
-        "@visactor/react-vchart": "^1.7.2",
-        "@visactor/vchart-semi-theme": "^1.7.2",
+        "@visactor/react-vchart": "^1.10.4",
+        "@visactor/vchart-semi-theme": "^1.10.4",
         "aos": "^2.3.4",
         "camelcase": "^6.2.0",
         "chroma-js": "^2.1.2",

src/components/ChartContact/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const ChartContact = (props) => {
+    return <div style={{ display: 'flex', flexDirection: 'row'}}>
+    <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+        <img src={'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/contact_wechat.jpeg'} style={{width:250, height:250}}/>
+        <span>{props.name1}</span>
+    </span>
+    <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+        <img src={'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/contact_lark.jpeg'} style={{width:250, height:250}}/>
+        <span>{props.name2}</span>
+    </span>
+</div>};
+
+export default ChartContact;

src/components/DesignToken/index.tsx

@@ -9,7 +9,8 @@ interface Props {
     isColorPalette?: boolean;
     reg?: RegExp;
     isAnimation?: boolean;
-    hasTab?: boolean
+    hasTab?: boolean;
+    sameWidth?: boolean
 }
 
 interface Token {
@@ -60,7 +61,7 @@ const JumpLink = ({ value, availableKeySet }: { value: string; availableKeySet:
     }
 };
 
-const TokenTable = ({ tokenList, designToken, currentTab, mode = 'light' }: { mode?: 'light' | 'dark'; tokenList: TokenMayWithColor[]; designToken: DesignToken; currentTab?: string }): React.ReactElement => {
+const TokenTable = ({ tokenList, designToken, currentTab, mode = 'light', sameWidth }: { mode?: 'light' | 'dark'; tokenList: TokenMayWithColor[]; designToken: DesignToken; currentTab?: string; sameWidth?: boolean }): React.ReactElement => {
     const intl = useIntl();
     const globalTokenJumpAvailableSet = useMemo(() => {
         const global = designToken?.global;
@@ -87,16 +88,19 @@ const TokenTable = ({ tokenList, designToken, currentTab, mode = 'light' }: { mo
                     return <div data-token={lodash.trim(text, '$')} style={{ fontWeight: 600 }}>{text}</div>;
                 }
 
-            }
+            },
+            width: sameWidth ? '33%': 'undefined'
         },
         {
             title: intl.formatMessage({ id: 'designToken.defaultValue' }),
             dataIndex: 'value',
-            render: (text: string): React.ReactElement => <JumpLink availableKeySet={globalTokenJumpAvailableSet} value={text} />
+            render: (text: string): React.ReactElement => <JumpLink availableKeySet={globalTokenJumpAvailableSet} value={text} />,
+            width: sameWidth ? '33%': 'undefined'
         },
         {
             title: intl.formatMessage({ id: 'designToken.usage' }),
             dataIndex: 'comment',
+            width: sameWidth ? '33%': 'undefined',
             render: (text: string): React.ReactElement =>
                 <div>{text || intl.formatMessage({ id: 'designToken.WIP' })}</div>
         },
@@ -129,7 +133,7 @@ const TokenTab = ({ designToken, componentName }: { designToken: DesignToken; co
     );
 };
 
-const GlobalTokenTab = ({ designToken, isColorPalette = false, reg, hasTab: hasTabInProps = true }: { designToken: DesignToken; isColorPalette?: boolean; reg: RegExp; hasTab?: boolean }): React.ReactElement => {
+const GlobalTokenTab = ({ designToken, isColorPalette = false, reg, hasTab: hasTabInProps = true, sameWidth }: { designToken: DesignToken; isColorPalette?: boolean; reg: RegExp; hasTab?: boolean; sameWidth?: boolean }): React.ReactElement => {
     const { global, palette, normal } = designToken.global;
     const [currentTab, setCurrentTab] = useState<'light' | 'dark'>('light');
     const [hasTab, setHasTab] = useState(true);
@@ -155,7 +159,7 @@ const GlobalTokenTab = ({ designToken, isColorPalette = false, reg, hasTab: hasT
         <>
             {hasTab && hasTabInProps? (
                 <Tabs defaultActiveKey={'light'} tabList={[{ tab: 'Light', itemKey: 'light' }, { tab: 'Dark', itemKey: 'dark' }]} onChange={(key: typeof currentTab): void => setCurrentTab(key)}>
-                    <TokenTable designToken={designToken} tokenList={tokenList} mode={currentTab} />
+                    <TokenTable designToken={designToken} tokenList={tokenList} mode={currentTab} sameWidth={sameWidth}/>
                 </Tabs>
             ) : <TokenTable designToken={designToken} tokenList={tokenList} mode={currentTab} />}
         </>
@@ -229,7 +233,7 @@ const DesignToken = (props: Props): React.ReactElement => {
     return (
         <div>
             {designToken && componentName && !props.isAnimation && (props.componentName === 'global' ?
-                <GlobalTokenTab designToken={designToken} reg={props.reg} isColorPalette={props.isColorPalette} hasTab={props?.hasTab}/> :
+                <GlobalTokenTab designToken={designToken} reg={props.reg} isColorPalette={props.isColorPalette} hasTab={props?.hasTab} sameWidth={props?.sameWidth}/> :
                 <TokenTab designToken={designToken} componentName={componentName} />)}
 
             {

src/components/PageAnchor/index.jsx

@@ -31,7 +31,10 @@ const PageAnchor = props => {
             }
             if (Array.isArray(anchorItem.items) && anchorItem.items.length > 0) {
                 if (['Voice and Tone', '语法', 'Grammar and Mechanics',
-                    'Installing and Using VChart', '安装和使用 VChart'].includes(anchorItem.title)) {
+                    'Installation and Usage', '安装和使用',
+                    'Common Chart Types Examples', '常用图表类型示例', 
+                    '设计规范', 'Design Guidelines'
+                ].includes(anchorItem.title)) {
                     anchorList.push(<Anchor.Link
                         href={`#${makeAnchorId(anchorItem.title)}`}
                         title={anchorItem.title}
@@ -39,7 +42,7 @@ const PageAnchor = props => {
                     > 
                         {makeAnchor(anchorItem.items)}
                     </Anchor.Link>);
-                } else if (['与其他方案的差异', 'Comparisons', '配置 VChart 主题', 'Configuring VChart Theme'].includes(anchorItem.title)) {
+                } else if (['与其他方案的差异', 'Comparisons'].includes(anchorItem.title)) {
                     anchorList.push(<Anchor.Link
                         href={`#${makeAnchorId(anchorItem.title)}`}
                         title={anchorItem.title}

src/components/VChartDemo/data/area.js

@@ -1,65 +0,0 @@
-export default {
-    title: 'Area Chart',
-    titleZh: "面积图",
-    spec: {
-        type: 'area',
-        data: {
-            values: [
-                { type: 'Nail polish', country: 'Africa', value: 4229 },
-                { type: 'Nail polish', country: 'EU', value: 4376 },
-                { type: 'Nail polish', country: 'China', value: 3054 },
-                { type: 'Nail polish', country: 'USA', value: 12814 },
-                { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
-                { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
-                { type: 'Eyebrow pencil', country: 'China', value: 5067 },
-                { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
-                { type: 'Rouge', country: 'Africa', value: 5221 },
-                { type: 'Rouge', country: 'EU', value: 3574 },
-                { type: 'Rouge', country: 'China', value: 7004 },
-                { type: 'Rouge', country: 'USA', value: 11624 },
-                { type: 'Lipstick', country: 'Africa', value: 9256 },
-                { type: 'Lipstick', country: 'EU', value: 4376 },
-                { type: 'Lipstick', country: 'China', value: 9054 },
-                { type: 'Lipstick', country: 'USA', value: 8814 },
-                { type: 'Eyeshadows', country: 'Africa', value: 3308 },
-                { type: 'Eyeshadows', country: 'EU', value: 4572 },
-                { type: 'Eyeshadows', country: 'China', value: 12043 },
-                { type: 'Eyeshadows', country: 'USA', value: 12998 },
-                { type: 'Eyeliner', country: 'Africa', value: 5432 },
-                { type: 'Eyeliner', country: 'EU', value: 3417 },
-                { type: 'Eyeliner', country: 'China', value: 15067 },
-                { type: 'Eyeliner', country: 'USA', value: 12321 },
-                { type: 'Foundation', country: 'Africa', value: 13701 },
-                { type: 'Foundation', country: 'EU', value: 5231 },
-                { type: 'Foundation', country: 'China', value: 10119 },
-                { type: 'Foundation', country: 'USA', value: 10342 },
-                { type: 'Lip gloss', country: 'Africa', value: 4008 },
-                { type: 'Lip gloss', country: 'EU', value: 4572 },
-                { type: 'Lip gloss', country: 'China', value: 12043 },
-                { type: 'Lip gloss', country: 'USA', value: 22998 },
-                { type: 'Mascara', country: 'Africa', value: 18712 },
-                { type: 'Mascara', country: 'EU', value: 6134 },
-                { type: 'Mascara', country: 'China', value: 10419 },
-                { type: 'Mascara', country: 'USA', value: 11261 }
-            ]
-        },
-        title: {
-            visible: true,
-            text: 'Stacked area chart of cosmetic products sales',
-            subtext: 'Stacked area chart of cosmetic products sales'
-        },
-        // stack: true,
-        xField: 'type',
-        yField: 'value',
-        seriesField: 'country',
-        legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
-        crosshair: {
-            xField: { visible: true, label: { visible: true } },
-            yField: { visible: true, label: { visible: true } }
-        },
-        axes: [
-            { type: 'band', orient: 'bottom', title: { visible: true } },
-            { type: 'linear', orient: 'left', title: { visible: true } }
-        ]
-    }
-};

src/components/VChartDemo/data/bar.js

@@ -1,49 +0,0 @@
-export default {
-    title: 'Bar Chart',
-    titleZh: "条形图",
-    spec: {
-        type: 'bar',
-        direction: 'horizontal',
-        data: [
-            {
-                id: 'barData',
-                values: [
-                    { type: 'Autocracies', year: '1930', value: 129 },
-                    { type: 'Autocracies', year: '1940', value: 133 },
-                    { type: 'Autocracies', year: '1950', value: 130 },
-                    { type: 'Autocracies', year: '1960', value: 126 },
-                    { type: 'Autocracies', year: '1970', value: 117 },
-                    { type: 'Autocracies', year: '1980', value: 114 },
-                    { type: 'Autocracies', year: '1990', value: 111 },
-                    { type: 'Autocracies', year: '2000', value: 89 },
-                    { type: 'Autocracies', year: '2010', value: 80 },
-                    { type: 'Autocracies', year: '2018', value: 80 },
-                    { type: 'Democracies', year: '1930', value: 22 },
-                    { type: 'Democracies', year: '1940', value: 13 },
-                    { type: 'Democracies', year: '1950', value: 25 },
-                    { type: 'Democracies', year: '1960', value: 29 },
-                    { type: 'Democracies', year: '1970', value: 38 },
-                    { type: 'Democracies', year: '1980', value: 41 },
-                    { type: 'Democracies', year: '1990', value: 57 },
-                    { type: 'Democracies', year: '2000', value: 87 },
-                    { type: 'Democracies', year: '2010', value: 98 },
-                    { type: 'Democracies', year: '2018', value: 99 }
-                ]
-            }
-        ],
-        yField: ['year', 'type'],
-        xField: 'value',
-        seriesField: 'type',
-        label: {
-            visible: true
-        },
-        legends: {
-            visible: true,
-            orient: 'right'
-        },
-        scrollBar: {
-            start: 0,
-            end: 0.5
-        }
-    }
-};

src/components/VChartDemo/data/column.js

@@ -1,99 +0,0 @@
-export default {
-    title: 'Bar Chart',
-    titleZh: "柱状图",
-    spec: {
-        type: 'bar',
-        data: [
-            {
-                id: 'barData',
-                values: [
-                    {
-                        State: 'WY',
-                        Age: 'Under 5 Years',
-                        Population: 25635
-                    },
-                    {
-                        State: 'WY',
-                        Age: '5 to 13 Years',
-                        Population: 1890
-                    },
-                    {
-                        State: 'WY',
-                        Age: '14 to 17 Years',
-                        Population: 9314
-                    },
-                    {
-                        State: 'DC',
-                        Age: 'Under 5 Years',
-                        Population: 30352
-                    },
-                    {
-                        State: 'DC',
-                        Age: '5 to 13 Years',
-                        Population: 20439
-                    },
-                    {
-                        State: 'DC',
-                        Age: '14 to 17 Years',
-                        Population: 10225
-                    },
-                    {
-                        State: 'VT',
-                        Age: 'Under 5 Years',
-                        Population: 38253
-                    },
-                    {
-                        State: 'VT',
-                        Age: '5 to 13 Years',
-                        Population: 42538
-                    },
-                    {
-                        State: 'VT',
-                        Age: '14 to 17 Years',
-                        Population: 15757
-                    },
-                    {
-                        State: 'ND',
-                        Age: 'Under 5 Years',
-                        Population: 51896
-                    },
-                    {
-                        State: 'ND',
-                        Age: '5 to 13 Years',
-                        Population: 67358
-                    },
-                    {
-                        State: 'ND',
-                        Age: '14 to 17 Years',
-                        Population: 18794
-                    },
-                    {
-                        State: 'AK',
-                        Age: 'Under 5 Years',
-                        Population: 72083
-                    },
-                    {
-                        State: 'AK',
-                        Age: '5 to 13 Years',
-                        Population: 85640
-                    },
-                    {
-                        State: 'AK',
-                        Age: '14 to 17 Years',
-                        Population: 22153
-                    }
-                ]
-            }
-        ],
-        xField: 'State',
-        yField: 'Population',
-        seriesField: 'Age',
-        stack: true,
-        legends: {
-            visible: true
-        },
-        dataZoom: {
-            orient: 'bottom'
-        }
-    }
-};

src/components/VChartDemo/data/funnel.js

@@ -1,52 +0,0 @@
-export default {
-    title: 'Funnel Chart',
-    titleZh: "漏斗图",
-    spec: {
-        type: 'funnel',
-        categoryField: 'name',
-        valueField: 'value',
-        isTransform: true,
-        isCone: false,
-        data: [
-            {
-                id: 'funnel',
-                values: [
-                    {
-                        value: 5676,
-                        name: 'Sent'
-                    },
-                    {
-                        value: 3872,
-                        name: 'Viewed'
-                    },
-                    {
-                        value: 1668,
-                        name: 'Clicked'
-                    },
-                    {
-                        value: 610,
-                        name: 'Add to Cart'
-                    },
-                    {
-                        value: 565,
-                        name: 'Purchased'
-                    }
-                ]
-            }
-        ],
-        label: {
-            visible: true
-        },
-        transformLabel: {
-            visible: true
-        },
-        outerLabel: {
-            position: 'right',
-            visible: true
-        },
-        legends: {
-            visible: true,
-            orient: 'top'
-        }
-    }
-};

src/components/VChartDemo/data/gauge.js

@@ -1,89 +0,0 @@
-export default {
-    title: "Gauge Chart",
-    titleZh: "仪表图",
-    spec: {
-        type: "gauge",
-        data: [
-            {
-                id: "pointer",
-                values: [
-                    {
-                        type: "A",
-                        value: 0.6,
-                    },
-                ],
-            },
-            {
-                id: "segment",
-                values: [
-                    {
-                        type: "Level 1",
-                        value: 0.4,
-                    },
-                    {
-                        type: "Level 2",
-                        value: 0.6,
-                    },
-                    {
-                        type: "Level 3",
-                        value: 0.8,
-                    },
-                ],
-            },
-        ],
-        gauge: {
-            type: "gauge",
-            dataIndex: 1,
-            categoryField: "type",
-            valueField: "value",
-            seriesField: "type",
-            label: {
-                visible: true,
-                position: "inside-outer",
-                offsetRadius: 10,
-                style: {
-                    text: (datum) => datum["type"],
-                },
-            },
-        },
-        pointer: {
-            style: {
-                fill: "#666666",
-            },
-        },
-        categoryField: "type",
-        valueField: "value",
-        outerRadius: 0.9,
-        innerRadius: 0.6,
-        startAngle: -225,
-        endAngle: 45,
-        axes: [
-            {
-                type: "linear",
-                orient: "angle",
-                inside: true,
-                outerRadius: 0.9,
-                innerRadius: 0.6,
-                grid: { visible: false },
-            },
-        ],
-        indicator: [
-            {
-                visible: true,
-                offsetY: "65%",
-                title: {
-                    style: {
-                        text: "60%",
-                    },
-                },
-                content: [
-                    {
-                        style: {
-                            text: "Level 2",
-                        },
-                    },
-                ],
-            },
-        ],
-    },
-};

src/components/VChartDemo/data/heatmap.js

@@ -1,111 +0,0 @@
-const items = [
-    'Asset Liability Ratio',
-    'Asset Liability Ratio (Deducting Advance Payments)',
-    'Debt-to-long Capital Ratio',
-    'Long Term Asset Suitability Ratio',
-    'Equity Multiplier',
-    'Equity Ratio of Current Liability',
-    'Interest Bearing Debt / Fully Invested Capital',
-    'Current Liability / Total Liabilities',
-    'Capital Fixation Ratio',
-    'Expected Default Frequency'
-];
-const rawData = [
-    1.0, 0.594527, 0.492963, -0.160995, 0.723664, 0.658646, -0.857474, 0.320706, -0.284634, -0.091423, 0.594527, 1.0,
-    0.724546, -0.099318, 0.540639, 0.49214, -0.554039, 0.17127, -0.265259, 0.068577, 0.492963, 0.724546, 1.0, -0.091338,
-    0.450542, 0.375839, -0.524955, 0.300627, -0.198362, 0.033209, -0.160995, -0.099318, -0.091338, 1.0, -0.049872,
-    -0.028452, 0.157157, 0.009742, -0.162374, 0.155095, 0.723664, 0.540639, 0.450542, -0.049872, 1.0, 0.951933, -0.651767,
-    0.079052, -0.535984, 0.00798, 0.658646, 0.49214, 0.375839, -0.028452, 0.951933, 1.0, -0.543147, -0.106139, -0.52232,
-    0.011466, -0.857474, -0.554039, -0.524955, 0.157157, -0.651767, -0.543147, 1.0, -0.595016, 0.310521, 0.066397,
-    0.320706, 0.17127, 0.300627, 0.009742, 0.079052, -0.106139, -0.595016, 1.0, -0.105199, -0.064886, -0.284634,
-    -0.265259, -0.198362, -0.162374, -0.535984, -0.52232, 0.310521, -0.105199, 1.0, -0.080153, -0.091423, 0.068577,
-    0.033209, 0.155095, 0.00798, 0.011466, 0.066397, -0.064886, -0.080153, 1.0
-];
-const data = [];
-for (let i = 0; i < items.length; i++) {
-    for (let j = 0; j < items.length; j++) {
-        data.push({
-            var1: items[i],
-            var2: items[j],
-            value: rawData[i * items.length + j]
-        });
-    }
-}
-
-const spec = {
-    type: 'heatmap',
-    data: [
-        {
-            id: 'data0',
-            values: data
-        }
-    ],
-    xField: 'var1',
-    yField: 'var2',
-    valueField: 'value',
-    cell: {
-        style: {
-            fill: {
-                field: 'value',
-                scale: 'color'
-            }
-        }
-    },
-    color: {
-        type: 'linear',
-        domain: [
-            {
-                dataId: 'data0',
-                fields: ['value']
-            }
-        ],
-        range: ['#07A35A', '#ffffff', '#E33232']
-    },
-    axes: [
-        {
-            orient: 'bottom',
-            type: 'band',
-            grid: {
-                visible: false
-            },
-            domainLine: {
-                visible: false
-            },
-            label: {
-                visible: false
-            },
-            tick: {
-                visible: false
-            },
-            bandPadding: 0
-        },
-        {
-            orient: 'left',
-            type: 'band',
-            grid: {
-                visible: false
-            },
-            domainLine: {
-                visible: false
-            },
-            bandPadding: 0
-        }
-    ],
-    legends: {
-        visible: true,
-        orient: 'right',
-        position: 'start',
-        type: 'color',
-        field: 'value'
-    },
-    title: {
-        visible: true,
-        text: `Correlation Coefficient`
-    }
-};
-
-export default {
-    title: 'Heatmap Chart',
-    titleZh: "热力图",
-    spec
-};

src/components/VChartDemo/data/index.js

@@ -1,29 +0,0 @@
-import area from "./area";
-import column from "./column";
-import pie from "./pie";
-import bar from "./bar";
-import rose from "./rose";
-import radar from "./radar";
-import scatter from "./scatter";
-import heatmap from "./heatmap";
-import markArea from "./mark-area";
-import markLine from "./mark-line";
-import markPoint from "./mark-point";
-import gauge from "./gauge";
-import funnel from "./funnel";
-
-export const charts = [
-    area,
-    column,
-    pie,
-    bar,
-    rose,
-    radar,
-    scatter,
-    // heatmap,
-    gauge,
-    funnel,
-    markArea,
-    markLine,
-    markPoint
-];

src/components/VChartDemo/data/mark-area.js

@@ -1,200 +0,0 @@
-export default {
-    title: 'Mark Area',
-    titleZh: "数据标注区域",
-    spec: {
-        type: 'line',
-        xField: 'Date',
-        yField: 'Price',
-        point: {
-            visible: false // disable point
-        },
-        axes: [
-            {
-                orient: 'left',
-                min: 0.12,
-                max: 0.18,
-                tick: {
-                    visible: false
-                },
-                domainLine: {
-                    visible: false
-                },
-                label: {
-                    // format tick label, the last label add unit
-                    formatMethod: (value, datum) => {
-                        if (value === 0.18) {
-                            return `$${value}`;
-                        }
-                        return value;
-                    }
-                }
-            }, // configure y-axis 配置 y 轴
-            {
-                orient: 'bottom',
-                label: {
-                    formatMethod: (value, datum) => {
-                        if (value.startsWith('Jan-')) {
-                            return `20${value.split('-')[1]}`;
-                        }
-
-                        return '';
-                    }
-                }
-            }
-        ],
-        markArea: [
-            {
-                coordinates: [
-                    {
-                        Date: 'Jan-20',
-                        Price: 0.18
-                    },
-                    {
-                        Date: 'Mar-23',
-                        Price: 0.18
-                    },
-                    {
-                        Date: 'Mar-23',
-                        Price: 0.12
-                    },
-                    {
-                        Date: 'Jan-20',
-                        Price: 0.12
-                    }
-                ],
-                label: {
-                    text: ['Electricite prices', 'have surged since 2020'],
-                    position: 'insideTop'
-                }
-            }
-        ],
-        data: {
-            id: 'data',
-            values: [
-                { Date: 'Jan-13', Price: 0.129 },
-                { Date: 'Feb-13', Price: 0.129 },
-                { Date: 'Mar-13', Price: 0.128 },
-                { Date: 'Apr-13', Price: 0.128 },
-                { Date: 'May-13', Price: 0.131 },
-                { Date: 'Jun-13', Price: 0.137 },
-                { Date: 'Jul-13', Price: 0.137 },
-                { Date: 'Aug-13', Price: 0.137 },
-                { Date: 'Sep-13', Price: 0.137 },
-                { Date: 'Oct-13', Price: 0.132 },
-                { Date: 'Nov-13', Price: 0.13 },
-                { Date: 'Dec-13', Price: 0.131 },
-                { Date: 'Jan-14', Price: 0.134 },
-                { Date: 'Feb-14', Price: 0.134 },
-                { Date: 'Mar-14', Price: 0.135 },
-                { Date: 'Apr-14', Price: 0.131 },
-                { Date: 'May-14', Price: 0.136 },
-                { Date: 'Jun-14', Price: 0.143 },
-                { Date: 'Jul-14', Price: 0.143 },
-                { Date: 'Aug-14', Price: 0.143 },
-                { Date: 'Sep-14', Price: 0.141 },
-                { Date: 'Oct-14', Price: 0.136 },
-                { Date: 'Nov-14', Price: 0.134 },
-                { Date: 'Dec-14', Price: 0.135 },
-                { Date: 'Jan-15', Price: 0.138 },
-                { Date: 'Feb-15', Price: 0.138 },
-                { Date: 'Mar-15', Price: 0.136 },
-                { Date: 'Apr-15', Price: 0.137 },
-                { Date: 'May-15', Price: 0.137 },
-                { Date: 'Jun-15', Price: 0.143 },
-                { Date: 'Jul-15', Price: 0.142 },
-                { Date: 'Aug-15', Price: 0.142 },
-                { Date: 'Sep-15', Price: 0.141 },
-                { Date: 'Oct-15', Price: 0.136 },
-                { Date: 'Nov-15', Price: 0.134 },
-                { Date: 'Dec-15', Price: 0.133 },
-                { Date: 'Jan-16', Price: 0.134 },
-                { Date: 'Feb-16', Price: 0.134 },
-                { Date: 'Mar-16', Price: 0.134 },
-                { Date: 'Apr-16', Price: 0.134 },
-                { Date: 'May-16', Price: 0.133 },
-                { Date: 'Jun-16', Price: 0.138 },
-                { Date: 'Jul-16', Price: 0.139 },
-                { Date: 'Aug-16', Price: 0.139 },
-                { Date: 'Sep-16', Price: 0.139 },
-                { Date: 'Oct-16', Price: 0.134 },
-                { Date: 'Nov-16', Price: 0.131 },
-                { Date: 'Dec-16', Price: 0.133 },
-                { Date: 'Jan-17', Price: 0.134 },
-                { Date: 'Feb-17', Price: 0.135 },
-                { Date: 'Mar-17', Price: 0.134 },
-                { Date: 'Apr-17', Price: 0.135 },
-                { Date: 'May-17', Price: 0.137 },
-                { Date: 'Jun-17', Price: 0.142 },
-                { Date: 'Jul-17', Price: 0.143 },
-                { Date: 'Aug-17', Price: 0.142 },
-                { Date: 'Sep-17', Price: 0.142 },
-                { Date: 'Oct-17', Price: 0.137 },
-                { Date: 'Nov-17', Price: 0.136 },
-                { Date: 'Dec-17', Price: 0.136 },
-                { Date: 'Jan-18', Price: 0.135 },
-                { Date: 'Feb-18', Price: 0.135 },
-                { Date: 'Mar-18', Price: 0.135 },
-                { Date: 'Apr-18', Price: 0.134 },
-                { Date: 'May-18', Price: 0.136 },
-                { Date: 'Jun-18', Price: 0.139 },
-                { Date: 'Jul-18', Price: 0.139 },
-                { Date: 'Aug-18', Price: 0.139 },
-                { Date: 'Sep-18', Price: 0.138 },
-                { Date: 'Oct-18', Price: 0.136 },
-                { Date: 'Nov-18', Price: 0.134 },
-                { Date: 'Dec-18', Price: 0.135 },
-                { Date: 'Jan-19', Price: 0.135 },
-                { Date: 'Feb-19', Price: 0.136 },
-                { Date: 'Mar-19', Price: 0.135 },
-                { Date: 'Apr-19', Price: 0.135 },
-                { Date: 'May-19', Price: 0.136 },
-                { Date: 'Jun-19', Price: 0.139 },
-                { Date: 'Jul-19', Price: 0.14 },
-                { Date: 'Aug-19', Price: 0.139 },
-                { Date: 'Sep-19', Price: 0.139 },
-                { Date: 'Oct-19', Price: 0.136 },
-                { Date: 'Nov-19', Price: 0.133 },
-                { Date: 'Dec-19', Price: 0.133 },
-                { Date: 'Jan-20', Price: 0.134 },
-                { Date: 'Feb-20', Price: 0.134 },
-                { Date: 'Mar-20', Price: 0.134 },
-                { Date: 'Apr-20', Price: 0.133 },
-                { Date: 'May-20', Price: 0.134 },
-                { Date: 'Jun-20', Price: 0.137 },
-                { Date: 'Jul-20', Price: 0.137 },
-                { Date: 'Aug-20', Price: 0.137 },
-                { Date: 'Sep-20', Price: 0.137 },
-                { Date: 'Oct-20', Price: 0.135 },
-                { Date: 'Nov-20', Price: 0.136 },
-                { Date: 'Dec-20', Price: 0.136 },
-                { Date: 'Jan-21', Price: 0.136 },
-                { Date: 'Feb-21', Price: 0.137 },
-                { Date: 'Mar-21', Price: 0.138 },
-                { Date: 'Apr-21', Price: 0.139 },
-                { Date: 'May-21', Price: 0.14 },
-                { Date: 'Jun-21', Price: 0.142 },
-                { Date: 'Jul-21', Price: 0.143 },
-                { Date: 'Aug-21', Price: 0.144 },
-                { Date: 'Sep-21', Price: 0.144 },
-                { Date: 'Oct-21', Price: 0.142 },
-                { Date: 'Nov-21', Price: 0.142 },
-                { Date: 'Dec-21', Price: 0.142 },
-                { Date: 'Jan-22', Price: 0.147 },
-                { Date: 'Feb-22', Price: 0.148 },
-                { Date: 'Mar-22', Price: 0.15 },
-                { Date: 'Apr-22', Price: 0.151 },
-                { Date: 'May-22', Price: 0.154 },
-                { Date: 'Jun-22', Price: 0.16 },
-                { Date: 'Jul-22', Price: 0.164 },
-                { Date: 'Aug-22', Price: 0.167 },
-                { Date: 'Sep-22', Price: 0.167 },
-                { Date: 'Oct-22', Price: 0.166 },
-                { Date: 'Nov-22', Price: 0.163 },
-                { Date: 'Dec-22', Price: 0.165 },
-                { Date: 'Jan-23', Price: 0.168 },
-                { Date: 'Feb-23', Price: 0.168 },
-                { Date: 'Mar-23', Price: 0.166 }
-            ]
-        }
-    }
-};

src/components/VChartDemo/data/mark-line.js

@@ -1,77 +0,0 @@
-export default {
-    title: 'Mark Line',
-    titleZh: "数据标注线",
-    spec: {
-        type: 'scatter',
-        xField: 'x',
-        yField: 'y',
-        sizeField: 'z',
-        size: {
-            type: 'linear',
-            range: [20, 80]
-        },
-        axes: [
-            { orient: 'bottom', type: 'linear', min: 60, max: 95 },
-            { orient: 'left', type: 'linear', min: 0, max: 200 }
-        ],
-        label: {
-            visible: true,
-            position: 'center',
-            overlap: {
-                avoidBaseMark: false
-            }
-        },
-        markLine: [
-            {
-                x: 65,
-                label: {
-                    visible: true,
-                    position: 'end',
-                    text: 'Safe fat intake 65g/day',
-                    style: {
-                        textAlign: 'left',
-                        textBaseline: 'top',
-                        dx: 15
-                    },
-                    labelBackground: {
-                        style: {
-                            dx: 15
-                        }
-                    }
-                }
-            },
-            {
-                y: 50,
-                label: {
-                    visible: true,
-                    position: 'end',
-                    text: 'Safe sugar intake 50g/day',
-                    style: {
-                        textAlign: 'right',
-                        textBaseline: 'bottom'
-                    }
-                }
-            }
-        ],
-        data: {
-            id: 'data',
-            values: [
-                { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
-                { x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
-                { x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
-                { x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
-                { x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
-                { x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
-                { x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
-                { x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
-                { x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
-                { x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
-                { x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
-                { x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
-                { x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
-                { x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
-                { x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
-            ]
-        }
-    }
-};

src/components/VChartDemo/data/mark-point.js

@@ -1,772 +0,0 @@
-export default {
-    title: 'Mark Point',
-    titleZh: "数据标注点",
-    spec: {
-        type: 'line',
-        xField: 'year',
-        yField: 'population',
-        axes: [
-            {
-                orient: 'bottom',
-                type: 'linear',
-                min: 1868,
-                max: 2016
-            }
-        ],
-        markPoint: [
-            {
-                coordinate: {
-                    year: '1878',
-                    population: 100
-                },
-                itemContent: {
-                    offsetY: -100,
-                    type: 'text',
-                    autoRotate: false,
-                    text: {
-                        style: {
-                            dx: -50,
-                            dy: -10,
-                            text: ['1878', 'population was 148'],
-                            fill: { type: 'palette', key: 'primaryFontColor' },
-                            textAlign: 'left',
-                            fontSize: 14
-                        }
-                    }
-                },
-                itemLine: {
-                    decorativeLine: {
-                        visible: true
-                    }
-                }
-            },
-            {
-                coordinate: {
-                    year: '2016',
-                    population: 899447
-                },
-                itemContent: {
-                    offsetY: 40,
-                    offsetX: -200,
-                    type: 'text',
-                    autoRotate: false,
-                    position: 'insideBottom',
-                    text: {
-                        style: {
-                            dy: -16,
-                            text: ['2016', 'population was 899447'],
-                            fill: { type: 'palette', key: 'primaryFontColor' },
-                            textAlign: 'right',
-                            fontSize: 14
-                        }
-                    }
-                },
-                itemLine: {
-                    type: 'type-do',
-                    decorativeLine: {
-                        visible: true
-                    }
-                }
-            }
-        ],
-        point: {
-            style: {
-                visible: false
-            }
-        },
-        title: {
-            text: 'Population History - Line Chart'
-        },
-        data: {
-            id: 'data2',
-            values: [
-                {
-                    census_year: true,
-                    year: 2016,
-                    source: 'CoE',
-                    population: 899447
-                },
-                {
-                    census_year: true,
-                    year: 2014,
-                    source: 'CoE',
-                    population: 877926
-                },
-                {
-                    year: 2013,
-                    source: 'CoE 6',
-                    population: 847712
-                },
-                {
-                    census_year: true,
-                    year: 2012,
-                    source: 'CoE',
-                    population: 817498
-                },
-                {
-                    year: 2010,
-                    source: 'CoE 6',
-                    population: 797320
-                },
-                {
-                    census_year: true,
-                    year: 2009,
-                    source: 'CoE',
-                    population: 782439
-                },
-                {
-                    census_year: true,
-                    year: 2008,
-                    source: 'CoE',
-                    population: 752412
-                },
-                {
-                    year: 2007,
-                    source: 'CoE 6',
-                    population: 741392
-                },
-                {
-                    census_year: true,
-                    year: 2005,
-                    source: 'CoE',
-                    population: 712391
-                },
-                {
-                    year: 2004,
-                    source: 'CoE 6',
-                    population: 698631
-                },
-                {
-                    year: 2003,
-                    source: 'CoE 6',
-                    population: 684871
-                },
-                {
-                    year: 2002,
-                    source: 'CoE 6',
-                    population: 671110
-                },
-                {
-                    year: 2000,
-                    source: 'CoE 6',
-                    population: 652817
-                },
-                {
-                    census_year: true,
-                    year: 1999,
-                    source: 'CoE',
-                    population: 648284
-                },
-                {
-                    year: 1998,
-                    source: 'CoE 6',
-                    population: 637625
-                },
-                {
-                    year: 1997,
-                    source: 'CoE 6',
-                    population: 626965
-                },
-                {
-                    year: 1995,
-                    source: 'CoE 6',
-                    population: 619870
-                },
-                {
-                    year: 1994,
-                    source: 'CoE 6',
-                    population: 623435
-                },
-                {
-                    census_year: true,
-                    year: 1993,
-                    source: 'CoE',
-                    population: 626999
-                },
-                {
-                    census_year: true,
-                    year: 1992,
-                    source: 'CoE',
-                    population: 618195
-                },
-                {
-                    census_year: true,
-                    year: 1990,
-                    source: 'CoE',
-                    population: 605538
-                },
-                {
-                    census_year: true,
-                    year: 1989,
-                    source: 'CoE',
-                    population: 583872
-                },
-                {
-                    year: 1988,
-                    source: 'CoE',
-                    population: 580061
-                },
-                {
-                    census_year: true,
-                    year: 1987,
-                    source: 'CoE',
-                    population: 576249
-                },
-                {
-                    year: 1985,
-                    source: 'CoE 6',
-                    population: 567699
-                },
-                {
-                    year: 1984,
-                    source: 'CoE 6',
-                    population: 563892
-                },
-                {
-                    census_year: true,
-                    year: 1983,
-                    source: 'CoE',
-                    population: 560085
-                },
-                {
-                    census_year: true,
-                    year: 1982,
-                    source: 'CoE 1',
-                    population: 551314
-                },
-                {
-                    census_year: true,
-                    year: 1980,
-                    source: 'CoE',
-                    population: 505773
-                },
-                {
-                    census_year: true,
-                    year: 1979,
-                    source: 'CoE',
-                    population: 491359
-                },
-                {
-                    census_year: true,
-                    year: 1978,
-                    source: 'CoE',
-                    population: 478066
-                },
-                {
-                    census_year: true,
-                    year: 1977,
-                    source: 'CoE',
-                    population: 471474
-                },
-                {
-                    census_year: true,
-                    year: 1975,
-                    source: 'CoE',
-                    population: 451635
-                },
-                {
-                    census_year: true,
-                    year: 1974,
-                    source: 'CoE',
-                    population: 445691
-                },
-                {
-                    census_year: true,
-                    year: 1973,
-                    source: 'CoE',
-                    population: 442365
-                },
-                {
-                    census_year: true,
-                    year: 1972,
-                    source: 'CoE',
-                    population: 441530
-                },
-                {
-                    census_year: true,
-                    year: 1970,
-                    source: 'CoE',
-                    population: 429750
-                },
-                {
-                    census_year: true,
-                    year: 1969,
-                    source: 'CoE',
-                    population: 422418
-                },
-                {
-                    census_year: true,
-                    year: 1968,
-                    source: 'CoE',
-                    population: 410105
-                },
-                {
-                    census_year: true,
-                    year: 1967,
-                    source: 'CoE',
-                    population: 393593
-                },
-                {
-                    census_year: true,
-                    year: 1965,
-                    source: 'CoE',
-                    population: 371265
-                },
-                {
-                    census_year: true,
-                    year: 1964,
-                    source: 'CoE 2',
-                    population: 311804
-                },
-                {
-                    census_year: true,
-                    year: 1963,
-                    source: 'CoE',
-                    population: 303756
-                },
-                {
-                    census_year: true,
-                    year: 1962,
-                    source: 'CoE',
-                    population: 294967
-                },
-                {
-                    census_year: true,
-                    year: 1960,
-                    source: 'CoE',
-                    population: 269314
-                },
-                {
-                    census_year: true,
-                    year: 1959,
-                    source: 'CoE',
-                    population: 260733
-                },
-                {
-                    census_year: true,
-                    year: 1958,
-                    source: 'CoE',
-                    population: 252131
-                },
-                {
-                    census_year: true,
-                    year: 1957,
-                    source: 'CoE',
-                    population: 238353
-                },
-                {
-                    census_year: true,
-                    year: 1955,
-                    source: 'CoE',
-                    population: 209353
-                },
-                {
-                    census_year: true,
-                    year: 1954,
-                    source: 'CoE',
-                    population: 197836
-                },
-                {
-                    census_year: true,
-                    year: 1953,
-                    source: 'CoE',
-                    population: 183411
-                },
-                {
-                    census_year: true,
-                    year: 1952,
-                    source: 'CoE',
-                    population: 169196
-                },
-                {
-                    census_year: true,
-                    year: 1950,
-                    source: 'CoE',
-                    population: 148861
-                },
-                {
-                    census_year: true,
-                    year: 1949,
-                    source: 'CoE',
-                    population: 137469
-                },
-                {
-                    census_year: true,
-                    year: 1948,
-                    source: 'CoE',
-                    population: 126609
-                },
-                {
-                    census_year: true,
-                    year: 1947,
-                    source: 'CoE',
-                    population: 118541
-                },
-                {
-                    census_year: true,
-                    year: 1946,
-                    source: 'CoE',
-                    population: 114976
-                },
-                {
-                    census_year: true,
-                    year: 1945,
-                    source: 'CoE',
-                    population: 111745
-                },
-                {
-                    census_year: true,
-                    year: 1944,
-                    source: 'CoE',
-                    population: 108416
-                },
-                {
-                    census_year: true,
-                    year: 1943,
-                    source: 'CoE',
-                    population: 105536
-                },
-                {
-                    census_year: true,
-                    year: 1942,
-                    source: 'CoE',
-                    population: 96725
-                },
-                {
-                    census_year: true,
-                    year: 1940,
-                    source: 'CoE',
-                    population: 91723
-                },
-                {
-                    census_year: true,
-                    year: 1939,
-                    source: 'CoE',
-                    population: 90419
-                },
-                {
-                    census_year: true,
-                    year: 1938,
-                    source: 'CoE',
-                    population: 88887
-                },
-                {
-                    census_year: true,
-                    year: 1937,
-                    source: 'CoE',
-                    population: 87034
-                },
-                {
-                    census_year: true,
-                    year: 1936,
-                    source: 'CoE',
-                    population: 85470
-                },
-                {
-                    census_year: true,
-                    year: 1935,
-                    source: 'CoE',
-                    population: 82634
-                },
-                {
-                    census_year: true,
-                    year: 1934,
-                    source: 'CoE',
-                    population: 79773
-                },
-                {
-                    census_year: true,
-                    year: 1933,
-                    source: 'CoE',
-                    population: 79231
-                },
-                {
-                    census_year: true,
-                    year: 1932,
-                    source: 'CoE',
-                    population: 78387
-                },
-                {
-                    census_year: true,
-                    year: 1930,
-                    source: 'CoE',
-                    population: 77557
-                },
-                {
-                    census_year: true,
-                    year: 1929,
-                    source: 'CoE',
-                    population: 74298
-                },
-                {
-                    census_year: true,
-                    year: 1928,
-                    source: 'CoE',
-                    population: 69744
-                },
-                {
-                    census_year: true,
-                    year: 1927,
-                    source: 'CoE',
-                    population: 67083
-                },
-                {
-                    census_year: true,
-                    year: 1926,
-                    source: 'CoE',
-                    population: 65163
-                },
-                {
-                    census_year: true,
-                    year: 1925,
-                    source: 'CoE',
-                    population: 65378
-                },
-                {
-                    census_year: true,
-                    year: 1924,
-                    source: 'CoE',
-                    population: 63160
-                },
-                {
-                    census_year: true,
-                    year: 1923,
-                    source: 'CoE*',
-                    population: 60000
-                },
-                {
-                    census_year: true,
-                    year: 1922,
-                    source: 'CoE*',
-                    population: 60000
-                },
-                {
-                    census_year: true,
-                    year: 1920,
-                    source: 'CoE',
-                    population: 61045
-                },
-                {
-                    census_year: true,
-                    year: 1919,
-                    source: 'CoE*',
-                    population: 60000
-                },
-                {
-                    census_year: true,
-                    year: 1918,
-                    source: 'CoE*',
-                    population: 53000
-                },
-                {
-                    census_year: true,
-                    year: 1917,
-                    source: 'CoE* 4',
-                    population: 51000
-                },
-                {
-                    census_year: true,
-                    year: 1916,
-                    source: 'CoE',
-                    population: 53846
-                },
-                {
-                    census_year: true,
-                    year: 1915,
-                    source: 'CoE',
-                    population: 59339
-                },
-                {
-                    census_year: true,
-                    year: 1914,
-                    source: 'CoE',
-                    population: 72516
-                },
-                {
-                    census_year: true,
-                    year: 1913,
-                    source: 'CoE',
-                    population: 67243
-                },
-                {
-                    census_year: true,
-                    year: 1912,
-                    source: 'CoE 5',
-                    population: 53611
-                },
-                {
-                    year: 1910,
-                    source: 'CoE 6',
-                    population: 23950
-                },
-                {
-                    census_year: true,
-                    year: 1909,
-                    source: 'CoE*',
-                    population: 23000
-                },
-                {
-                    census_year: true,
-                    year: 1908,
-                    source: 'CoE',
-                    population: 18500
-                },
-                {
-                    year: 1907,
-                    source: 'CoE 6',
-                    population: 16294
-                },
-                {
-                    census_year: true,
-                    year: 1906,
-                    source: 'CoE',
-                    population: 14088
-                },
-                {
-                    year: 1905,
-                    source: 'CoE 6',
-                    population: 11219
-                },
-                {
-                    census_year: true,
-                    year: 1904,
-                    source: 'CoE',
-                    population: 8350
-                },
-                {
-                    census_year: true,
-                    year: 1903,
-                    source: 'CoE',
-                    population: 6995
-                },
-                {
-                    year: 1902,
-                    source: 'CoE 6',
-                    population: 4811
-                },
-                {
-                    year: 1900,
-                    source: 'CoE 6',
-                    population: 2419
-                },
-                {
-                    census_year: true,
-                    year: 1899,
-                    source: 'CoE',
-                    population: 2212
-                },
-                {
-                    year: 1898,
-                    source: 'CoE 6',
-                    population: 2212
-                },
-                {
-                    census_year: true,
-                    year: 1897,
-                    source: 'CoE',
-                    population: 2212
-                },
-                {
-                    year: 1896,
-                    source: 'CoE 6',
-                    population: 1689
-                },
-                {
-                    census_year: true,
-                    year: 1895,
-                    source: 'CoE',
-                    population: 1165
-                },
-                {
-                    year: 1894,
-                    source: 'CoE 6',
-                    population: 1010
-                },
-                {
-                    year: 1893,
-                    source: 'CoE 6',
-                    population: 855
-                },
-                {
-                    census_year: true,
-                    year: 1892,
-                    source: 'CoE',
-                    population: 700
-                },
-                {
-                    year: 1891,
-                    source: 'CoE 6',
-                    population: 630
-                },
-                {
-                    year: 1890,
-                    source: 'CoE 6',
-                    population: 560
-                },
-                {
-                    year: 1889,
-                    source: 'CoE 6',
-                    population: 490
-                },
-                {
-                    year: 1888,
-                    source: 'CoE 6',
-                    population: 420
-                },
-                {
-                    census_year: true,
-                    year: 1887,
-                    source: 'CoE*',
-                    population: 350
-                },
-                {
-                    year: 1886,
-                    source: 'CoE',
-                    population: 307
-                },
-                {
-                    census_year: true,
-                    year: 1885,
-                    source: 'CoE',
-                    population: 263
-                },
-                {
-                    year: 1884,
-                    source: 'CoE 6',
-                    population: 247
-                },
-                {
-                    year: 1883,
-                    source: 'CoE 6',
-                    population: 230
-                },
-                {
-                    year: 1882,
-                    source: 'CoE 6',
-                    population: 214
-                },
-                {
-                    year: 1881,
-                    source: 'CoE 6',
-                    population: 197
-                },
-                {
-                    year: 1880,
-                    source: 'CoE 6',
-                    population: 181
-                },
-                {
-                    year: 1879,
-                    source: 'CoE 6',
-                    population: 164
-                },
-                {
-                    census_year: true,
-                    year: 1878,
-                    source: 'CoE',
-                    population: 148
-                }
-            ].reverse()
-        }
-    }
-};

src/components/VChartDemo/data/pie.js

@@ -1,39 +0,0 @@
-export default {
-    title: 'Pie Chart',
-    titleZh: "饼图",
-    spec: {
-        type: 'pie',
-        data: [
-            {
-                id: 'id0',
-                values: [
-                    { type: 'oxygen', value: '46.60' },
-                    { type: 'silicon', value: '27.72' },
-                    { type: 'aluminum', value: '8.13' },
-                    { type: 'iron', value: '5' },
-                    { type: 'calcium', value: '3.63' },
-                    { type: 'sodium', value: '2.83' },
-                    { type: 'potassium', value: '2.59' },
-                    { type: 'others', value: '3.5' }
-                ]
-            }
-        ],
-        valueField: 'value',
-        categoryField: 'type',
-        title: {
-            visible: true,
-            text: 'Statistics of Surface Element Content'
-        },
-        legends: {
-            visible: true,
-            orient: 'left',
-            title: {
-                visible: true,
-                text: 'Elements'
-            }
-        },
-        label: {
-            visible: true
-        }
-    }
-};

src/components/VChartDemo/data/radar.js

@@ -1,228 +0,0 @@
-export default {
-    title: 'Radar Chart',
-    titleZh: "雷达图",
-    spec: {
-        type: 'radar',
-        data: [
-            {
-                values: [
-                    {
-                        month: 'Jan.',
-                        value: 45,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Feb.',
-                        value: 61,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Mar.',
-                        value: 92,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Apr.',
-                        value: 57,
-                        type: 'A'
-                    },
-                    {
-                        month: 'May.',
-                        value: 46,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Jun.',
-                        value: 36,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Jul.',
-                        value: 33,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Aug.',
-                        value: 63,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Sep.',
-                        value: 57,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Oct.',
-                        value: 53,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Nov.',
-                        value: 69,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Dec.',
-                        value: 40,
-                        type: 'A'
-                    },
-                    {
-                        month: 'Jan.',
-                        value: 31,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Feb.',
-                        value: 39,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Mar.',
-                        value: 81,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Apr.',
-                        value: 39,
-                        type: 'B'
-                    },
-                    {
-                        month: 'May.',
-                        value: 64,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Jun.',
-                        value: 21,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Jul.',
-                        value: 58,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Aug.',
-                        value: 72,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Sep.',
-                        value: 47,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Oct.',
-                        value: 37,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Nov.',
-                        value: 80,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Dec.',
-                        value: 74,
-                        type: 'B'
-                    },
-                    {
-                        month: 'Jan.',
-                        value: 90,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Feb.',
-                        value: 95,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Mar.',
-                        value: 62,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Apr.',
-                        value: 52,
-                        type: 'C'
-                    },
-                    {
-                        month: 'May.',
-                        value: 74,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Jun.',
-                        value: 87,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Jul.',
-                        value: 80,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Aug.',
-                        value: 69,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Sep.',
-                        value: 74,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Oct.',
-                        value: 84,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Nov.',
-                        value: 94,
-                        type: 'C'
-                    },
-                    {
-                        month: 'Dec.',
-                        value: 23,
-                        type: 'C'
-                    }
-                ]
-            }
-        ],
-        categoryField: 'month',
-        valueField: 'value',
-        seriesField: 'type',
-        stack: true,
-        outerRadius: 0.8,
-        area: {
-            visible: true
-        },
-        legends: {
-            visible: true,
-            orient: 'right'
-        }
-        /*
-        crosshair: {
-          categoryField: {
-            visible: true,
-            line: {
-              type: 'rect'
-            },
-            label: {
-              visible: true
-            }
-          },
-          valueField: {
-            visible: true,
-            line: {
-              type: 'line',
-              smooth: true
-            },
-            label: {
-              visible: true
-            }
-          }
-        }
-        */
-    }
-};

src/components/VChartDemo/data/rose.js

@@ -1,122 +0,0 @@
-export default {
-    title: 'Rose Chart',
-    titleZh: "玫瑰图",
-    spec: {
-        type: 'rose',
-        data: {
-            id: '0',
-            values: [
-                {
-                    time: '2:00',
-                    value: 27,
-                    type: 'Sales'
-                },
-                {
-                    time: '6:00',
-                    value: 25,
-                    type: 'Sales'
-                },
-                {
-                    time: '10:00',
-                    value: 18,
-                    type: 'Sales'
-                },
-                {
-                    time: '14:00',
-                    value: 15,
-                    type: 'Sales'
-                },
-                {
-                    time: '18:00',
-                    value: 10,
-                    type: 'Sales'
-                },
-                {
-                    time: '22:00',
-                    value: 5,
-                    type: 'Sales'
-                },
-                {
-                    time: '2:00',
-                    value: 7,
-                    type: 'Discount'
-                },
-                {
-                    time: '6:00',
-                    value: 5,
-                    type: 'Discount'
-                },
-                {
-                    time: '10:00',
-                    value: 38,
-                    type: 'Discount'
-                },
-                {
-                    time: '14:00',
-                    value: 5,
-                    type: 'Discount'
-                },
-                {
-                    time: '18:00',
-                    value: 20,
-                    type: 'Discount'
-                },
-                {
-                    time: '22:00',
-                    value: 15,
-                    type: 'Discount'
-                }
-            ]
-        },
-        categoryField: ['time', 'type'],
-        valueField: 'value',
-        seriesField: 'type',
-        outerRadius: 0.8,
-        axes: [
-            {
-                orient: 'angle',
-                domainLine: { visible: true },
-                grid: { visible: true },
-                label: {
-                    visible: true
-                }
-            },
-            {
-                orient: 'radius',
-                grid: { visible: true, smooth: true },
-                label: {
-                    visible: true
-                }
-            }
-        ],
-        crosshair: {
-            categoryField: {
-                visible: true,
-                line: {
-                    type: 'rect'
-                }
-                /*
-                label: {
-                  visible: true
-                }
-                */
-            },
-            valueField: {
-                visible: true,
-                line: {
-                    type: 'line',
-                    smooth: true
-                }
-                /*
-                label: {
-                  visible: true
-                }
-                */
-            }
-        },
-        legends: {
-            visible: true,
-            orient: 'left'
-        }
-    }
-};

src/components/VChartDemo/data/scatter.js

@@ -1,106 +0,0 @@
-const yearData = {};
-const firstYear = 1950;
-const lastYear = 2023;
-
-for (let year = firstYear; year <= lastYear; year++) {
-    const data = [];
-    yearData[year] = data;
-
-    for (let i = 0; i < 50; i++) {
-        if (year === firstYear) {
-            data.push({
-                x: Math.round(Math.random() * 100 - 90),
-                y: Math.round(Math.random() * 100 - 90),
-                value: Math.round(Math.random() * 1000),
-                index: i
-            });
-        } else {
-            const previous = yearData[year - 1][i];
-            data.push({
-                x: previous.x + Math.round(Math.random() * 5 - 2 + i / 50),
-                y: previous.y + Math.round(Math.random() * 5 - 2 + i / 50),
-                value: Math.abs(previous.value + Math.round(Math.random() * 100 - 45)),
-                index: i
-            });
-        }
-    }
-}
-
-const specs = Object.values(yearData).map((data, index) => {
-    return {
-        data: [
-            {
-                id: 'id',
-                values: data
-            },
-            {
-                id: 'year',
-                values: [{ year: Object.keys(yearData)[index] }]
-            }
-        ]
-    };
-});
-
-const DURATION = 300;
-
-export default {
-    title: 'Scatter Chart',
-    titleZh: "散点图",
-    spec: {
-        type: 'common',
-        player: {
-            orient: 'bottom',
-            auto: true,
-            interval: DURATION,
-            dy: 10,
-            specs
-        },
-        data: specs[0].data,
-        axes: [
-            {
-                orient: 'left',
-                type: 'linear',
-                range: { min: -100, max: 100 }
-            },
-            {
-                orient: 'bottom',
-                type: 'linear',
-                range: { min: -100, max: 100 }
-            }
-        ],
-        series: [
-            {
-                type: 'scatter',
-                // 通过数据中的 index 进行数据匹配
-                dataKey: 'index',
-                // 声明点半径大小
-                sizeField: 'value',
-                size: {
-                    type: 'linear',
-                    range: [5, 30]
-                },
-                xField: 'x',
-                yField: 'y',
-                animationAppear: {
-                    duration: DURATION,
-                    easing: 'linear'
-                },
-                animationUpdate: {
-                    duration: DURATION,
-                    easing: 'linear'
-                }
-            }
-        ],
-        crosshair: {
-            xField: { visible: true },
-            yField: { visible: true }
-        },
-        legends: {
-            visible: true,
-            type: 'size',
-            orient: 'right',
-            field: 'value',
-            width: 100
-        }
-    }
-};

src/components/VChartDemo/index.js

@@ -1,52 +0,0 @@
-import React from "react";
-// import { isMobile } from "react-device-detect";
-import { charts } from "./data/index";
-import { VChart } from "@visactor/react-vchart";
-import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
-
-typeof window !== 'undefined' && initVChartSemiTheme();
-
-const chartHeight = 400;
-
-const Charts = (props) => {
-    return (
-        <div style={{ display: 'flex', flexWrap: 'wrap', columnGap: 30, rowGap: 10, padding: '30px 0 30px 30px' }}>
-            {charts.map((chart, i) => {
-                return (
-                    <div
-                        key={i}
-                        className="card"
-                        style={{
-                            width: 'calc(50% - 30px)',
-                            display: "inline-block",
-                            boxSizing: "border-box"
-                        }}
-                    >
-                        <h4>{props.zh ? chart.titleZh : chart.title}</h4>
-                        <div
-                            className="chartContainer"
-                            style={{ outline: `1px solid #404349` }}
-                        >
-                            <VChart
-                                spec={{
-                                    height: chartHeight,
-                                    ...chart.spec,
-                                }}
-                                option={{
-                                    ...chart.option,
-                                    // mode: isMobile ? "mobile-browser" : "desktop-browser",
-                                    mode: "desktop-browser",
-                                    onError: null,
-                                    logLevel: 5,
-                                }}
-                            />
-                        </div>
-                    </div>
-                );
-            })}
-        </div>
-
-    );
-};
-
-export default Charts;

src/images/docIcons/doc-vchart.svg

@@ -1,3 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C18.0751 1 23 5.92487 23 12C23 12.9809 22.8716 13.9318 22.6307 14.8367L16.4319 4.60107H16.4246C15.8677 3.75338 14.9083 3.1937 13.8183 3.1937C12.7282 3.1937 11.7688 3.75338 11.2119 4.60107H11.2045L11.1273 4.7374C11.1124 4.76291 11.0977 4.78863 11.0835 4.81459L4.28926 16.8044C4.02032 17.2651 3.86623 17.8011 3.86623 18.3731C3.86623 18.8614 3.97854 19.3235 4.17872 19.7349C2.21346 17.7478 1 15.0156 1 12C1 5.92487 5.92487 1 12 1ZM6.31177 21.417C6.52781 21.4644 6.75226 21.4894 6.98253 21.4894C8.70361 21.4894 10.0989 20.0941 10.0989 18.3731C10.0989 17.821 9.95527 17.3026 9.70354 16.8529L9.70515 16.8523L8.18662 14.2244C7.36844 12.8072 7.85398 10.9951 9.27112 10.177C10.6883 9.35876 12.5003 9.84434 13.3185 11.2615L18.6751 20.3396L18.6772 20.3387C18.7329 20.4294 18.7933 20.517 18.8577 20.6012C16.9772 22.1026 14.5934 23 12 23C9.91821 23 7.97153 22.4217 6.31177 21.417Z" fill="#0040FF"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path d="M21.9052 11.25C22.484 11.25 22.9461 10.7587 22.8514 10.1877C22.085 5.56448 18.4355 1.91497 13.8123 1.14858C13.2414 1.05394 12.75 1.51604 12.75 2.09476V6.19505C12.75 6.68989 13.1168 7.09994 13.5861 7.25681C15.0717 7.75336 16.2467 8.92832 16.7432 10.4139C16.9001 10.8833 17.3101 11.25 17.805 11.25H21.9052Z" fill="#4CC3FA" style="fill:#4CC3FA;fill:color(display-p3 0.2980 0.7647 0.9804);fill-opacity:1;"/>
+<path d="M17.8049 12.75C17.3101 12.75 16.9001 13.1168 16.7432 13.5861C16.08 15.57 14.207 17 12 17C11.1976 17 10.4393 16.811 9.76731 16.475C9.32485 16.2538 8.7759 16.2847 8.42612 16.6345L6.24097 18.8196C5.82968 19.2309 5.85285 19.9094 6.33177 20.2395C7.94275 21.3499 9.89545 22 12 22C16.902 22 20.9802 18.4728 21.8351 13.818C21.9402 13.2462 21.4768 12.75 20.8954 12.75H17.8049Z" fill="#6A6F7F" style="fill:#6A6F7F;fill:color(display-p3 0.4157 0.4353 0.4980);fill-opacity:1;"/>
+<path d="M8.42616 7.36551C8.77594 7.71529 9.32488 7.74614 9.76734 7.52497C9.97507 7.42112 10.1911 7.33132 10.414 7.2568C10.8833 7.09994 11.25 6.68992 11.25 6.19508V3.10463C11.25 2.52321 10.7542 2.05982 10.1823 2.16483C8.7733 2.42357 7.46761 2.97764 6.33179 3.76049C5.85287 4.09058 5.82972 4.76906 6.24101 5.18036L8.42616 7.36551Z" fill="#DDE3E8" style="fill:#DDE3E8;fill:color(display-p3 0.8667 0.8902 0.9098);fill-opacity:1;"/>
+<path d="M7.36546 15.5738C7.71524 15.2241 7.74609 14.6751 7.52492 14.2327C7.189 13.5607 7 12.8024 7 12C7 11.1976 7.18901 10.4394 7.52494 9.76737C7.74612 9.32491 7.71528 8.77597 7.36549 8.42618L5.18034 6.24103C4.76905 5.82974 4.09056 5.85291 3.76047 6.33183C2.65011 7.94281 2 9.89551 2 12C2 14.1046 2.6501 16.0572 3.76043 17.6682C4.09052 18.1471 4.76901 18.1703 5.18031 17.759L7.36546 15.5738Z" fill="#AAB2BF" style="fill:#AAB2BF;fill:color(display-p3 0.6667 0.6980 0.7490);fill-opacity:1;"/>
+</svg>

src/templates/postTemplate.js

@@ -18,6 +18,7 @@ import PageAnchor from 'components/PageAnchor';
 import PrevAndNext from 'components/PrevAndNext';
 import SEO from 'components/seo';
 import DesignToken from 'components/DesignToken';
+import ChartContact from '../components/ChartContact';
 import { makeAnchorId } from '../utils';
 import ComponentOverview from 'components/ComponentOverview';
 import { get, isString, capitalize, noop } from 'lodash-es';
@@ -53,7 +54,6 @@ import './toUEDUtils/toUED.scss';
 import { debounce } from 'lodash';
 import StickyHeaderTable from '../demos/StickyHeaderTable';
 import { useIsIde } from '../components/useIde';
-import Charts from '../components/VChartDemo';
 
 const Text = ({ lang, letterSpacing, size, lineHeight, text }) => {
     letterSpacing = letterSpacing || 'auto';
@@ -117,7 +117,8 @@ const SemiComponents = {
     Card,
     Space,
     Avatar,
-    IconPlus
+    IconPlus,
+    ChartContact
 };
 
 const pre = ({ ...props }) => {
@@ -153,17 +154,6 @@ const code = ({ ...props }) => {
         return <ComponentOverview code={props.children} />;
     }
 
-    if (props.className === 'language-chart') {
-        return <Charts code={props.children} zh={props.zh} />;
-    }
-
-    if (props.className === 'language-chartcontact') {
-        return <>
-        <img src={'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/contact_wechat.jpeg'} style={{width:250, height:250}}/>
-        <img src={'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/contact_lark.jpeg'} style={{width:250, height:250}}/>
-     </>;
-    }
-
     const scope = {
         useEffect,
         useMemo,
@@ -186,6 +176,10 @@ const code = ({ ...props }) => {
 
     newProps.lineNumber = false;
 
+    if (props.half) {
+        newProps.width = '50%';
+    }
+
     const Placeholder = () => (
         <>
             <Skeleton

src/templates/scope.js

@@ -226,4 +226,7 @@ export {
     // IconUpload,
     IconVersionTwo,
     IconWheelChair
-} from '@douyinfe/semi-icons-lab';
+} from '@douyinfe/semi-icons-lab';
+
+export { VChart } from "@visactor/react-vchart";
+export { initVChartSemiTheme } from '@visactor/vchart-semi-theme';

yarn.lock

@@ -5840,52 +5840,59 @@
     "@typescript-eslint/types" "4.33.0"
     eslint-visitor-keys "^2.0.0"
 
-"@visactor/react-vchart@^1.7.2":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@visactor/react-vchart/-/react-vchart-1.7.2.tgz#c5525713571d67f8ecc23721bc4e7abd531625de"
-  integrity sha512-VB3lnB8/NPCxCzDsCvjeRwK57mhu8/W6z63voJExkbsPH7/NVk0G/Jvh/6Qag792S3d0w3Kr3g8dA2ftm6QikA==
-  dependencies:
-    "@visactor/vchart" "1.7.2"
-    "@visactor/vgrammar-core" "~0.9.4"
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vutils" "~0.16.18"
+"@visactor/react-vchart@^1.10.4":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@visactor/react-vchart/-/react-vchart-1.10.4.tgz#ffa77f639269f872443034c27e289557e0693b00"
+  integrity sha512-krmEyY+GXBAbrJ6HGOyhEtnz+R7K9szcfJHVGygs9fOPb779ym/1H1oeuzpC5rOUB5RgRK/fmCVDRlW7U7tgkA==
+  dependencies:
+    "@visactor/vchart" "1.10.4"
+    "@visactor/vgrammar-core" "0.12.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vutils" "~0.18.1"
     react-is "^18.2.0"
 
-"@visactor/vchart-semi-theme@^1.7.2":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@visactor/vchart-semi-theme/-/vchart-semi-theme-1.7.2.tgz#a7371d4275226ed9046d30c285771a4d7a374083"
-  integrity sha512-ypqWX71Q+nnPH38WdWCJJBSkKSBBPqb8EGmchJB3pRjUTQvhT+Rom5iaFylq9+GStFE6Cgfm34Y61T4yd9hQvQ==
-
-"@visactor/[email protected]":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@visactor/vchart/-/vchart-1.7.2.tgz#b918802166b6174341b4edcd92440ba579c14aa2"
-  integrity sha512-ndNZSK/A0XQHrpbZZpYSH3cEeMynyXrSWbuknszojtjLuO21UlVe6pV03a5oKIAcnuQvzkOSHS276sFe0cXUbg==
-  dependencies:
-    "@visactor/vdataset" "~0.16.18"
-    "@visactor/vgrammar-core" "~0.9.4"
-    "@visactor/vgrammar-hierarchy" "~0.9.4"
-    "@visactor/vgrammar-projection" "~0.9.4"
-    "@visactor/vgrammar-sankey" "~0.9.4"
-    "@visactor/vgrammar-util" "~0.9.4"
-    "@visactor/vgrammar-wordcloud" "~0.9.4"
-    "@visactor/vgrammar-wordcloud-shape" "~0.9.4"
-    "@visactor/vrender-components" "~0.16.17"
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vscale" "~0.16.18"
-    "@visactor/vutils" "~0.16.18"
-    "@visactor/vutils-extension" "1.7.2"
-
-"@visactor/vdataset@~0.16.18":
-  version "0.16.18"
-  resolved "https://registry.yarnpkg.com/@visactor/vdataset/-/vdataset-0.16.18.tgz#2c8d7e83c5b8a217f568143d0cbbae367dfe6f56"
-  integrity sha512-Ex3tRykogiIcr9KXTSMxcUAXXIBbZnOqM66s/8akydngOTKo+QXn85hKEoPClMES43U0dHt/026P10E2/GEG5Q==
+"@visactor/vchart-semi-theme@^1.10.4":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@visactor/vchart-semi-theme/-/vchart-semi-theme-1.10.4.tgz#bb30f6e12dc8eaf0cec98dfdd8421a43140a1694"
+  integrity sha512-weNpB2o1JPwVfyNdj/V5EuGDwn/KF+8JNOO2sPzCBKXN0JzIlAfiRQ+HcEim+vcXyowGoPff29gQCGNLJ3LwOA==
+  dependencies:
+    "@visactor/vchart-theme-utils" "1.10.4"
+
+"@visactor/[email protected]":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@visactor/vchart-theme-utils/-/vchart-theme-utils-1.10.4.tgz#130de9a04503b3b2b5d3b79f2478ac9499a8eef7"
+  integrity sha512-fiXwbIH3Bc2ieCkqHKHJvYayvlJjm/inGP2OayVLhbv4bDt3Smj6QWiLGQVPaFgBCMGdaauMbJpSwBLEDimkdw==
+
+"@visactor/[email protected]":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@visactor/vchart/-/vchart-1.10.4.tgz#eb56f2814f0725c226afc531c8ed806ecdcaf649"
+  integrity sha512-vKX+y0H/fvWcOsKqxgFThkGQ220cKDod4vuFURo4osR9frnRqjXtrXi5RT6gYpjveDDVMKHy9wD2T898d9IIug==
+  dependencies:
+    "@visactor/vdataset" "~0.18.1"
+    "@visactor/vgrammar-core" "0.12.8"
+    "@visactor/vgrammar-hierarchy" "0.12.8"
+    "@visactor/vgrammar-projection" "0.12.8"
+    "@visactor/vgrammar-sankey" "0.12.8"
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vgrammar-wordcloud" "0.12.8"
+    "@visactor/vgrammar-wordcloud-shape" "0.12.8"
+    "@visactor/vrender-components" "0.18.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vscale" "~0.18.1"
+    "@visactor/vutils" "~0.18.1"
+    "@visactor/vutils-extension" "1.10.4"
+
+"@visactor/vdataset@~0.18.1":
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/@visactor/vdataset/-/vdataset-0.18.1.tgz#a202af859c7b6111cf9174e657ae25f1c6b2f585"
+  integrity sha512-ByrBt2kgLvYRve+Q+9oo3Ibav5WVSyWPuxdDJHK7kDTJGtTuV8z4qKcqArB86PcAOJS1s5L0TtHlV4Femm2xoA==
   dependencies:
     "@turf/flatten" "^6.5.0"
     "@turf/helpers" "^6.5.0"
     "@turf/rewind" "^6.5.0"
-    "@visactor/vutils" "0.16.18"
+    "@visactor/vutils" "0.18.1"
     d3-dsv "^2.0.0"
     d3-geo "^1.12.1"
     d3-hexbin "^0.2.2"
@@ -5900,139 +5907,157 @@
     simplify-geojson "^1.0.4"
     topojson-client "^3.1.0"
 
-"@visactor/vgrammar-coordinate@0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-coordinate/-/vgrammar-coordinate-0.9.4.tgz#4f4e6bafcd2c5118f837b9cff7fc7b27f9bd0b20"
-  integrity sha512-Lhzs1SpBM/Uw7EVMDlObD9wwhK/WTFvRagphwb9KwC4aRAeotI1lCsH647gr6rOGoEV5s3j1jhqQ9han/l+ygA==
-  dependencies:
-    "@visactor/vgrammar-util" "0.9.4"
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/vgrammar-core@0.9.4", "@visactor/vgrammar-core@~0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-core/-/vgrammar-core-0.9.4.tgz#89098b2ae912bb4e5830a875012e3a094535e4c3"
-  integrity sha512-b1FqHG8AVOQlsPYNLYdYlhxJh12WHhSBMTdSevfGVbVgn/qB4hBG1my+yugf0uwEIiwushJBVvs7yVuTmhZrSg==
-  dependencies:
-    "@visactor/vdataset" "~0.16.18"
-    "@visactor/vgrammar-coordinate" "0.9.4"
-    "@visactor/vgrammar-util" "0.9.4"
-    "@visactor/vrender-components" "~0.16.17"
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vscale" "~0.16.18"
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/vgrammar-hierarchy@~0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-hierarchy/-/vgrammar-hierarchy-0.9.4.tgz#7ff12236c2f42516b3a43de6292499d38ba36e3f"
-  integrity sha512-mYHABCa68dM+kBZtFq+hdrRD7y4HnsTLbjonMO2iaOlhviGypoSr6fnebtgsTgs7MZiFegHdCAHJDAi/pVbLSw==
-  dependencies:
-    "@visactor/vgrammar-core" "0.9.4"
-    "@visactor/vgrammar-util" "0.9.4"
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/vgrammar-projection@~0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-projection/-/vgrammar-projection-0.9.4.tgz#d9dd80f3ff07e88bdc16d3e7a8867cc0388f513e"
-  integrity sha512-sC82dOByPBWipsOfkfCnYDGUvHutaHyDa92TqWE+NoQKEZcWZJrzau49FN61qfDNNbkWstgO0hy0NubuH8807Q==
-  dependencies:
-    "@visactor/vgrammar-core" "0.9.4"
-    "@visactor/vgrammar-util" "0.9.4"
-    "@visactor/vutils" "~0.16.18"
+"@visactor/vgrammar-coordinate@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-coordinate/-/vgrammar-coordinate-0.12.8.tgz#30f1e24f611c7500f5f692c2ffbfc80d7fe5e91d"
+  integrity sha512-e4/Qc6xVkzDFbPShQ9T7kNa16vELfrE6iwzP5sFHiHOxp3U5nRajYffPK4SSAS6/my9sGplhKK4HC2gpasd0EQ==
+  dependencies:
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/vgrammar-core@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-core/-/vgrammar-core-0.12.8.tgz#11a105a39091a4946c46b0eef4de49d4bd343b25"
+  integrity sha512-RcvLxYcYK9xJC/vs2IndsVdmtOevqOJ3NWsinO4AGfed/AzWxXKxVTQ30XhylBtOSF3nz8fLdg8vRP8pZYjtng==
+  dependencies:
+    "@visactor/vdataset" "~0.18.1"
+    "@visactor/vgrammar-coordinate" "0.12.8"
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vrender-components" "0.18.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vscale" "~0.18.1"
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/vgrammar-hierarchy@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-hierarchy/-/vgrammar-hierarchy-0.12.8.tgz#a6b15f8a4f508490c4b4482153881b32e0ac8960"
+  integrity sha512-NNYrYRAqa0iGlMdpZPK1yexdmTE2HCmPzz52CotoopLVzzrJ1L7LqO4fTUwT21nZAMsQ2iPHh4AX1bwdQ2IRCQ==
+  dependencies:
+    "@visactor/vgrammar-core" "0.12.8"
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/vgrammar-projection@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-projection/-/vgrammar-projection-0.12.8.tgz#c1f5e72830ae5e5d197189a165175f41adbde42e"
+  integrity sha512-sDrsMoTticsopUQ4Rtn0uywY6JdCEgF1fresAGOTmLCGPy1AYXNIKXQIi2DYxmNsUb+XUWJNOaml+lHX5YeBbQ==
+  dependencies:
+    "@visactor/vgrammar-core" "0.12.8"
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vutils" "~0.18.1"
     d3-geo "^1.12.1"
 
-"@visactor/vgrammar-sankey@~0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-sankey/-/vgrammar-sankey-0.9.4.tgz#ce74ea8e31e652c74e3382346d68357eb6aa8811"
-  integrity sha512-tO38gWS0SSJBU3qILscBPITqub95NbK9up+nvWjZgwqOoj1N4/NPqpAvFwxOg4EF7g48saC5QJvt4gyQWikIKg==
-  dependencies:
-    "@visactor/vgrammar-core" "0.9.4"
-    "@visactor/vgrammar-util" "0.9.4"
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/vgrammar-util@0.9.4", "@visactor/vgrammar-util@~0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-util/-/vgrammar-util-0.9.4.tgz#8177ee1363fb3d33b6fd7e27cc1e5d4401100b76"
-  integrity sha512-i+74qgnEjqdNceLf7qFtiqwhU8Dw5VrG5C7dwG7JF+lBIvLqDvQQ+8m3g0oUW0UfvgDu+9qcPCSht4uXqoM04Q==
-  dependencies:
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/vgrammar-wordcloud-shape@~0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-wordcloud-shape/-/vgrammar-wordcloud-shape-0.9.4.tgz#7178d80f922c2f4cd2dd63e530a79a28fed81a4d"
-  integrity sha512-VhG8BnUtBwzJ5PMpT0wql8ymaVhXzLo3h7+5IljfaV1cUTV3f+sAbyPZziYVsbxmPOyJZNNbhMcEHNTexayMnw==
-  dependencies:
-    "@visactor/vgrammar-core" "0.9.4"
-    "@visactor/vgrammar-util" "0.9.4"
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vscale" "~0.16.18"
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/vgrammar-wordcloud@~0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-wordcloud/-/vgrammar-wordcloud-0.9.4.tgz#e8d832694f4990913573b9b48d0b6afe36a758bf"
-  integrity sha512-v5geBndJaJQnGbm4kmVl1pQlcRPd6atIq1aTBKLOFpzFK30c0/VFqLy6E3fMrZ7DB2DfoOn5rU3EYq/hllUkzA==
-  dependencies:
-    "@visactor/vgrammar-core" "0.9.4"
-    "@visactor/vgrammar-util" "0.9.4"
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/vrender-components@~0.16.17":
-  version "0.16.18"
-  resolved "https://registry.yarnpkg.com/@visactor/vrender-components/-/vrender-components-0.16.18.tgz#927a689f96550a684e837b03ab59a7258e1bd008"
-  integrity sha512-3lmXBd4No08yH7y5f0xzI/xb8gRdoy3ZBVQPP+8S+ttfi2PpZ42Q/URhxIurSSKEDnA8vGloou17iDj4cShq4w==
-  dependencies:
-    "@visactor/vrender-core" "0.16.18"
-    "@visactor/vrender-kits" "0.16.18"
-    "@visactor/vscale" "~0.16.18"
-    "@visactor/vutils" "~0.16.18"
-
-"@visactor/[email protected]6.18", "@visactor/vrender-core@~0.16.17":
-  version "0.16.18"
-  resolved "https://registry.yarnpkg.com/@visactor/vrender-core/-/vrender-core-0.16.18.tgz#384bd6d8af1f2c63d232ef7ea60b7600a89d16d1"
-  integrity sha512-+OPmG/l1Eq0O3g0cSH5fUNVDxb9SfaimXd9qH48kTyN636nFY11PqW5eu3kgg+oi+0T1L73Ic2RRMhET7zGUQw==
-  dependencies:
-    "@visactor/vutils" "~0.16.18"
+"@visactor/vgrammar-sankey@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-sankey/-/vgrammar-sankey-0.12.8.tgz#f229184a783448256b3b5a2818715fbbfc8202a8"
+  integrity sha512-+Cf8pb8HKcRk/06t+DNbf+EPjPmRdTLI0LefY+QzViWu7+tzEJCH7B79Y4o1pXF4ECWKCx3poiMp8+3I1FWrig==
+  dependencies:
+    "@visactor/vgrammar-core" "0.12.8"
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/vgrammar-util@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-util/-/vgrammar-util-0.12.8.tgz#f403caea572657491f6c1dba9caed41217099b2a"
+  integrity sha512-To1YW+oL/zhiIPzRcgjt1TrrSOyKT/kaDh1Agn8w1NpRcac2LZ930QTm9QPAeMHMZC9HjuT8UnJC9GeHbhVlNw==
+  dependencies:
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/vgrammar-wordcloud-shape@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-wordcloud-shape/-/vgrammar-wordcloud-shape-0.12.8.tgz#55efc1bb114968b8e2db2eaadd85d61df20b2dcc"
+  integrity sha512-GaLLEHz/Ru+AyctmD3HcqGbxE+mQsncEY8VQH6F+jf3n0sFZpphWptbSL2Ld2RCf3oo7XERMEPki954XHfuL0A==
+  dependencies:
+    "@visactor/vgrammar-core" "0.12.8"
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vscale" "~0.18.1"
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/vgrammar-wordcloud@0.12.8":
+  version "0.12.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vgrammar-wordcloud/-/vgrammar-wordcloud-0.12.8.tgz#91631f8145ef2036dcc7816ba26e3e119d4e3ef5"
+  integrity sha512-WhZCaUc1C0xW5caMHuFsuRPI5Q+4JPkoQdkgNfw1HkJ0oPZUuqnpj++j4h2w+B87yFZ9pAbvyp2VeKZh6Avj2w==
+  dependencies:
+    "@visactor/vgrammar-core" "0.12.8"
+    "@visactor/vgrammar-util" "0.12.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/vrender-components@0.18.8":
+  version "0.18.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vrender-components/-/vrender-components-0.18.8.tgz#4339222951d6374d12c1e27609b8c75dd8309dda"
+  integrity sha512-/P7MSXIYFzg++zw/jg+Fqogknp17BJWhaoVrCBIZgF45O+qGkCbxZGa2kMR4dGs05lqLvb6/Zle8D3g3Pr2/qg==
+  dependencies:
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vscale" "~0.17.3"
+    "@visactor/vutils" "~0.18.1"
+
+"@visactor/[email protected]8.8":
+  version "0.18.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vrender-core/-/vrender-core-0.18.8.tgz#3c7bd365413db0ee43b9a56d543bc9dc36b6df44"
+  integrity sha512-b3NgF89qsX1DvYAAR/YUIWqZVjjyXt5HF5+xfNh1VGhti6l8CLCa70Hxkg2Hnw3RBVP+o9t2T54U+Mwjg7RBuQ==
+  dependencies:
+    "@visactor/vutils" "~0.18.1"
     color-convert "2.0.1"
 
-"@visactor/[email protected]6.18", "@visactor/vrender-kits@~0.16.17":
-  version "0.16.18"
-  resolved "https://registry.yarnpkg.com/@visactor/vrender-kits/-/vrender-kits-0.16.18.tgz#fcae127ade1bd23b507849ac4cf2573f39cebcc2"
-  integrity sha512-L+vO7ddhx1tdfBRZlwp4ahYLfYwBizNeCVhNI8aND7nDuPyUGB00xg+C816yFRnP/ZTfZ4xh22R+YbF67MYfoQ==
+"@visactor/[email protected]8.8":
+  version "0.18.8"
+  resolved "https://registry.yarnpkg.com/@visactor/vrender-kits/-/vrender-kits-0.18.8.tgz#8e09daaa07f9d9fc2df7f5fecf4f7a6378d179d1"
+  integrity sha512-cJppsZOuFB2BPFKn5Lq3uXDZ0SBQErMblwXdeL70f25MDgv1+FZm+TDoHjo9452rA7nHGSM4GaKoN47gb7HhIg==
   dependencies:
     "@resvg/resvg-js" "2.4.1"
-    "@visactor/vrender-core" "0.16.18"
-    "@visactor/vutils" "~0.16.18"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vutils" "~0.18.1"
     roughjs "4.5.2"
 
-"@visactor/vscale@~0.16.18":
-  version "0.16.18"
-  resolved "https://registry.yarnpkg.com/@visactor/vscale/-/vscale-0.16.18.tgz#7f871877296851554e4d8206d0c835dfa94084f4"
-  integrity sha512-ManadKP48XzZ3IWIOGqIL4Z0G56u73mZ4TQ/m/SvheL63FEfC9NvbcbsMr0VPgabEvOSM4+5F9L6BaABXDBN2A==
+"@visactor/vscale@~0.17.3":
+  version "0.17.5"
+  resolved "https://registry.yarnpkg.com/@visactor/vscale/-/vscale-0.17.5.tgz#0e0247844f3b237b6ad6ca010dc8953bd2b576e6"
+  integrity sha512-2dkS1IlAJ/IdTp8JElbctOOv6lkHKBKPDm8KvwBo0NuGWQeYAebSeyN3QCdwKbj76gMlCub4zc+xWrS5YiA2zA==
+  dependencies:
+    "@visactor/vutils" "0.17.5"
+
+"@visactor/vscale@~0.18.1":
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/@visactor/vscale/-/vscale-0.18.1.tgz#4eef978d9c9ccc668c22c60295b175a4d344f6c4"
+  integrity sha512-0wpd0avbFLvuDKNHt2PxdKdqLSU9+zUkM6GJYWbXsUUYOiKaFkt2xTkdwUHKq66v23C7Iy14Pm7VVr0wVgflbA==
+  dependencies:
+    "@visactor/vutils" "0.18.1"
+
+"@visactor/[email protected]":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@visactor/vutils-extension/-/vutils-extension-1.10.4.tgz#37ce3bdc0d898c240fdeb05c56fbb9cd3b969349"
+  integrity sha512-1qoZ+oEz+Ms3/iQrx8AudWi58IFPqjxcRE72Vam5xZN5jxrIdbQftN3BAvmQrcjteDMeSS1HgE0j/mUnxxDR8A==
   dependencies:
-    "@visactor/vutils" "0.16.18"
+    "@visactor/vdataset" "~0.18.1"
+    "@visactor/vrender-components" "0.18.8"
+    "@visactor/vrender-core" "0.18.8"
+    "@visactor/vrender-kits" "0.18.8"
+    "@visactor/vscale" "~0.18.1"
+    "@visactor/vutils" "~0.18.1"
 
-"@visactor/[email protected]":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@visactor/vutils-extension/-/vutils-extension-1.7.2.tgz#d35af7b92d0bb1501f732a935698a51f3538c710"
-  integrity sha512-A7jkqnkLTiRYhF2ODpvHdJZBEcuYcRjMQjiExhXyiPhcgm/DcgJwE0a6eHnPeo36hH0jeC3PMYwAKcmhFHofSA==
+"@visactor/vutils@0.17.5":
+  version "0.17.5"
+  resolved "https://registry.yarnpkg.com/@visactor/vutils/-/vutils-0.17.5.tgz#443bf7e58394912c4eb86ca9b46f527ede7bac32"
+  integrity sha512-HFN6Pk1Wc1RK842g02MeKOlvdri5L7/nqxMVTqxIvi0XMhHXpmoqN4+/9H+h8LmJpVohyrI/MT85TRBV/rManw==
   dependencies:
-    "@visactor/vrender-core" "~0.16.17"
-    "@visactor/vrender-kits" "~0.16.17"
-    "@visactor/vscale" "~0.16.18"
-    "@visactor/vutils" "~0.16.18"
+    "@turf/helpers" "^6.5.0"
+    "@turf/invariant" "^6.5.0"
+    eventemitter3 "^4.0.7"
 
-"@visactor/[email protected]", "@visactor/vutils@~0.16.18":
-  version "0.16.18"
-  resolved "https://registry.yarnpkg.com/@visactor/vutils/-/vutils-0.16.18.tgz#69cf24fcf93ea511b789b6e84401b8e2a99c8d97"
-  integrity sha512-7AjMDKZq+482oFxnYY4bihFhlK3JqEhCu6R/HQnnX6IufTxqCH3OQAvphE/kbt8w9Iuwhx5o/caBOUMt3J2KRA==
+"@visactor/[email protected]8.1", "@visactor/vutils@~0.18.1":
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/@visactor/vutils/-/vutils-0.18.1.tgz#47314cb7ac9bae42a4b50c9da995c19033a06720"
+  integrity sha512-XGq9a85HrVP3Rbby1qO2/JS9GewJtZv6y35Xujcb2ZGLEjnpCK61Y1OXwSC5SZOKmtsH4SjYMf5czlnNhQ3GeA==
   dependencies:
     "@turf/helpers" "^6.5.0"
     "@turf/invariant" "^6.5.0"