antvis · zengyue · Jan 3, 2023 · Jan 3, 2023
diff --git a/site/.dumirc.ts b/site/.dumirc.ts
@@ -22,6 +22,7 @@ export default defineConfig({
     showChartResize: true, // 是否在 demo 页展示图表视图切换
     showAPIDoc: true, // 是否在 demo 页展示API文档
     versions: {
+      [version]: 'https://f2.antv.antgroup.com',
       '4.x': 'https://f2.antv.vision',
       '3.x': 'https://f2-v3.antv.vision',
     },
@@ -306,14 +307,6 @@ export default defineConfig({
           en: 'Funnel Charts',
         },
       },
-      {
-        slug: 'candlestick',
-        icon: 'candlestick',
-        title: {
-          zh: '蜡烛图',
-          en: 'Candlestick Charts',
-        },
-      },
       {
         slug: 'relation',
         icon: 'relation',
@@ -322,14 +315,6 @@ export default defineConfig({
           en: 'Relation Charts',
         },
       },
-      {
-        slug: 'heatmap',
-        icon: 'heatmap',
-        title: {
-          zh: '热力图',
-          en: 'Heatmap Charts',
-        },
-      },
       {
         slug: 'component',
         icon: 'component',

diff --git a/site/examples/column/column/demo/pattern.jsx b/site/examples/column/column/demo/pattern.jsx
@@ -24,24 +24,27 @@ const data = [
   },
 ];
 
-const img = new Image();
-img.src = 'https://gw.alipayobjects.com/zos/rmsportal/cNOctfQVgZmwaXeBITuD.jpg';
-
-img.onload = function () {
   const context = document.getElementById('container').getContext('2d');
-  const pattern = context.createPattern(img, 'repeat');
 
   const { props } = (
     <Canvas context={context}>
       <Chart data={data}>
         <Axis field="year" />
         <Axis field="sales" />
-        <Interval x="year" y="sales" color={{ range: [pattern] }} />
+        <Interval x="year" y="sales"  
+        color={{
+              range: [
+                {
+                  image: 'https://gw.alipayobjects.com/zos/rmsportal/cNOctfQVgZmwaXeBITuD.jpg',
+                  repetition: 'repeat',
+                },
+              ],
+            }}/>
       </Chart>
     </Canvas>
   );
 
   const canvas = new Canvas(props);
 
   canvas.render();
-};
+
diff --git a/site/examples/component/guide/demo/custom.jsx b/site/examples/component/guide/demo/custom.jsx
@@ -23,7 +23,7 @@ const Guide = withGuide((props) => {
   return (
     <group>
       <text
-        attrs={{
+        style={{
           x,
           y,
           text: '文本',
@@ -32,7 +32,7 @@ const Guide = withGuide((props) => {
         }}
       />
       <rect
-        attrs={{
+        style={{
           x,
           y,
           width: Math.abs(end.x - start.x),

diff --git a/site/examples/component/legend/demo/custom.jsx b/site/examples/component/legend/demo/custom.jsx
@@ -8,6 +8,7 @@ const Legend = withLegend((props) => {
   return (
     <group
       style={{
+        display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
@@ -28,7 +29,7 @@ const Legend = withLegend((props) => {
             data-item={item}
           >
             <text
-              attrs={{
+              style={{
                 fill: color,
                 text: name,
               }}

diff --git a/site/examples/component/shape/demo/shape.jsx b/site/examples/component/shape/demo/shape.jsx
@@ -7,7 +7,7 @@ const Shape = () => {
   return (
     <group>
       <rect
-        attrs={{
+        style={{
           x: 10,
           y: 10,
           width: 40,
@@ -17,9 +17,9 @@ const Shape = () => {
           fill: 'red',
         }}
       />
-      <circle attrs={{ x: 80, y: 30, r: 20, lineWidth: '2px', stroke: '#000', fill: 'red' }} />
+      <circle style={{ cx: 80, cy: 30, r: 20, lineWidth: '2px', stroke: '#000', fill: 'red' }} />
       <text
-        attrs={{
+        style={{
           x: 120,
           y: 30,
           text: '文本',

diff --git a/site/examples/creative/case/demo/apple-watch.jsx b/site/examples/creative/case/demo/apple-watch.jsx
@@ -82,16 +82,16 @@ const Shell = (props, context) => {
 
 // 背景组件
 const ArcGuideGroup = (props) => {
-  const { attrs } = props;
+  const { style } = props;
   const { data, centerX, centerY, rUnit } = props;
   return (
     <group>
       {data.map((record, index) => {
         return (
           <arc
             key={'arc_' + index}
-            attrs={{
-              ...attrs,
+            style={{
+              ...style,
               x: centerX,
               y: centerY,
               r: rUnit * (1 * index + 1),
@@ -106,15 +106,15 @@ const ArcGuideGroup = (props) => {
 
 // 弧线组件
 const RoundArcGroup = (props) => {
-  const { data, centerX, centerY, rUnit, attrs, animation } = props;
+  const { data, centerX, centerY, rUnit, style, animation } = props;
   return (
     <group>
       {data.map((record, index) => {
         return (
           <arc
             key={'record_' + index}
-            attrs={{
-              ...attrs,
+            style={{
+              ...style,
               x: centerX,
               y: centerY,
               r: (1 * index + 1) * rUnit,
@@ -132,17 +132,17 @@ const RoundArcGroup = (props) => {
 
 // icon组件
 const ImgGuideGroup = (props) => {
-  const { data, centerX, centerY, rUnit, attrs } = props;
-  const { width, height } = attrs;
+  const { data, centerX, centerY, rUnit, style } = props;
+  const { width, height } = style;
   return (
     <group>
       {data.map((record, index) => {
         return (
           <image
             cacheImage
             key={'img_' + index}
-            attrs={{
-              ...attrs,
+            style={{
+              ...style,
               width,
               height,
               x: centerX - width / 2,
@@ -165,13 +165,13 @@ const { props } = (
         return (
           <Shell key={'shell_' + iter} context={context} data={records}>
             <ArcGuideGroup
-              attrs={{
+              style={{
                 lineWidth: bgArcWidth,
                 opacity: 0.9,
               }}
             />
             <RoundArcGroup
-              attrs={{
+              style={{
                 lineWidth: arcWidth,
                 lineCap: 'round',
                 shadowColor: 'rgba(0,0,0,0.8)',
@@ -193,7 +193,7 @@ const { props } = (
               }}
             />
             <ImgGuideGroup
-              attrs={{
+              style={{
                 width: 16,
                 height: 16,
               }}

diff --git a/site/examples/creative/case/demo/line-race.jsx b/site/examples/creative/case/demo/line-race.jsx
@@ -23,7 +23,7 @@ function EndView(props) {
       }}
     >
       <text
-        attrs={{
+        style={{
           fill: '#808080',
           fontSize: '24px',
           text: `${origin.emoji}${origin.country}`,

diff --git a/site/examples/creative/case/demo/race-country.jsx b/site/examples/creative/case/demo/race-country.jsx
@@ -15,7 +15,7 @@ function Year(props) {
   return (
     <group>
       <text
-        attrs={{
+        style={{
           x: right,
           y: bottom,
           text: year,

diff --git a/site/examples/other/area/demo/custom-gauge.jsx b/site/examples/other/area/demo/custom-gauge.jsx
@@ -10,24 +10,24 @@ const Gauge = withGauge((props) => {
   return (
     <group>
       <arc
-        attrs={{
-          x,
-          y,
+        style={{
+          cx:x,
+          cy:y,
           r,
-          startAngle,
-          endAngle,
+          startAngle: `${startAngle} rad`,
+          endAngle: `${endAngle} rad`,
           lineWidth: '20px',
           lineCap: 'round',
           stroke: '#e7e7e7',
         }}
       />
       <arc
-        attrs={{
-          x,
-          y,
+        style={{
+          cx:x,
+          cy:y,
           r,
-          startAngle,
-          endAngle: startAngle,
+          startAngle: `${startAngle} rad`,
+          endAngle: `${startAngle} rad `,
           lineWidth: '60px',
           lineCap: 'round',
           stroke: '#0075ff',
@@ -38,10 +38,10 @@ const Gauge = withGauge((props) => {
             duration: 500,
             property: ['endAngle'],
             start: {
-              endAngle: startAngle,
+              endAngle: `${startAngle} rad`,
             },
             end: {
-              endAngle: startAngle + diff * percent,
+              endAngle: `${startAngle + diff * percent} rad `,
             },
           },
         }}
@@ -50,7 +50,7 @@ const Gauge = withGauge((props) => {
         const { start, end } = tick;
         return (
           <line
-            attrs={{
+            style={{
               x1: start.x,
               y1: start.y,
               x2: end.x,

diff --git a/site/examples/pie/donut/demo/donut.jsx b/site/examples/pie/donut/demo/donut.jsx
@@ -31,21 +31,22 @@ const Text = (props, context) => {
   return (
     <group
       style={{
+        display: 'flex',
         left: center.x,
         top: center.y - context.px2hd('30px'),
         width: '100px',
       }}
     >
       <text
-        attrs={{
+        style={{
           text: '总资产',
           fill: '#000',
           textAlign: 'center',
         }}
       />
       <text
-        style={{ marginTop: '10px' }}
-        attrs={{
+        style={{
+          marginTop: '10px',
           text: '100.33亿元',
           fill: '#000',
           textAlign: 'center',

diff --git a/site/examples/pie/donut/demo/double-donut.jsx b/site/examples/pie/donut/demo/double-donut.jsx
@@ -31,21 +31,22 @@ const Text = (props, context) => {
   return (
     <group
       style={{
+        display: 'flex',
         left: center.x,
         top: center.y - context.px2hd('30px'),
         width: '100px',
       }}
     >
       <text
-        attrs={{
+        style={{
           text: '总资产',
           fill: '#000',
           textAlign: 'center',
         }}
       />
       <text
-        style={{ marginTop: '10px' }}
-        attrs={{
+        style={{
+          marginTop: '10px',
           text: '100.33亿元',
           fill: '#000',
           textAlign: 'center',

diff --git a/site/examples/pie/pie/demo/labelline-pie.jsx b/site/examples/pie/pie/demo/labelline-pie.jsx
@@ -51,10 +51,10 @@ const { props } = (
       />
       <PieLabel
         sidePadding={40}
-        label1={(data, color) => {
+        label1={(data, record) => {
           return {
             text: data.name,
-            fill: color,
+            fill: record.color,
           };
         }}
         label2={(data) => {

diff --git a/site/package.json b/site/package.json
@@ -14,7 +14,7 @@
   "scripts": {
     "site:build": "dumi build",
     "site:clean": "",
-    "site:deploy": "npm run site:build && gh-pages -d public",
+    "site:deploy": "gh-pages -d dist",
     "site:develop": "dumi dev",
     "site:start": "npm run site:develop"
   },