feat: 柱图/条形图/饼图/散点图示例迁移 (#1235)

* feat:条形图案例补充 * feat:散点图示例 Co-authored-by: acery.ycy <acery.ycy@antgroup.com>
antvis · Nov 8, 2021 · e65f5fc · e65f5fc
1 parent c2e7462
commit e65f5fc
Show file tree

Hide file tree

Showing 9 changed files with 242 additions and 368 deletions.
diff --git a/packages/site/examples/bar/basic/demo/basic.js b/packages/site/examples/bar/basic/demo/basic.js
@@ -1,4 +1,4 @@
-import F2 from '@antv/f2';
+import { Canvas, Chart, Interval, Axis } from '@antv/f2';
 
 const data = [{
   year: '1951 年',
@@ -25,27 +25,27 @@ const data = [{
   year: '1962 年',
   sales: 38
 }];
-const chart = new F2.Chart({
-  id: 'container',
-  pixelRatio: window.devicePixelRatio
-});
 
-chart.source(data, {
-  sales: {
-    tickCount: 5
-  }
-});
-chart.coord({
-  transposed: true
-});
-chart.tooltip({
-  showItemMarker: false,
-  onShow: function onShow(ev) {
-    const items = ev.items;
-    items[0].name = null;
-    items[0].name = items[0].title;
-    items[0].value = '¥ ' + items[0].value;
-  }
-});
-chart.interval().position('year*sales');
+const context = document.getElementById('container').getContext('2d');
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart
+      data={data}
+      coord={{
+        transposed: true
+      }}
+      scale={{
+        sales: {
+          tickCount: 5
+        }
+      }}
+    >
+      <Axis field="year" />
+      <Axis field="sales" />
+      <Interval x="year" y="sales" />
+    </Chart>
+  </Canvas>
+);
+
+const chart = new Canvas(props);
 chart.render();
diff --git a/packages/site/examples/bar/basic/demo/range.js b/packages/site/examples/bar/basic/demo/range.js
@@ -1,4 +1,4 @@
-import F2 from '@antv/f2';
+import { Canvas, Chart, Interval, Axis } from '@antv/f2';
 
 const data = [{
   x: '分类一',
@@ -25,30 +25,22 @@ const data = [{
   x: '分类八',
   y: [ 18, 34 ]
 }];
-const chart = new F2.Chart({
-  id: 'container',
-  pixelRatio: window.devicePixelRatio
-});
-chart.source(data, {
-  y: {
-    tickCount: 5
-  }
-});
-chart.coord({
-  transposed: true
-});
-chart.tooltip({
-  showItemMarker: false,
-  onShow: function onShow(ev) {
-    const items = ev.items;
-    items[0].name = '范围';
-    const value = items[0].value;
-    items[0].value = value[0] + ' 至 ' + value[1];
-  }
-});
-chart.interval().position('x*y').animate({
-  appear: {
-    animation: 'shapesScaleInY'
-  }
-});
+
+const context = document.getElementById('container').getContext('2d');
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart
+      data={data}
+      coord={{
+        transposed: true
+      }}
+    >
+      <Axis field="x" />
+      <Axis field="y" />
+      <Interval x="x" y="y" />
+    </Chart>
+  </Canvas>
+);
+
+const chart = new Canvas(props);
 chart.render();
diff --git a/packages/site/examples/bar/dodge/demo/dodge.js b/packages/site/examples/bar/dodge/demo/dodge.js
@@ -1,5 +1,4 @@
-import F2 from '@antv/f2';
-import _ from 'lodash';
+import { Canvas, Chart, Interval, Axis } from '@antv/f2';
 
 const data = [{
   name: 'London',
@@ -66,44 +65,30 @@ const data = [{
   月份: 'Aug.',
   月均降雨量: 42.4
 }];
-const chart = new F2.Chart({
-  id: 'container',
-  pixelRatio: window.devicePixelRatio
-});
-chart.source(data);
-chart.coord({
-  transposed: true
-});
-chart.tooltip({
-  custom: true, // 自定义 tooltip 内容框
-  onChange: function onChange(obj) {
-    const legend = chart.get('legendController').legends.top[0];
-    const tooltipItems = obj.items;
-    const legendItems = legend.items;
-    const map = {};
-    legendItems.forEach(function(item) {
-      map[item.name] = _.clone(item);
-    });
-    tooltipItems.forEach(function(item) {
-      const name = item.name;
-      const value = item.value;
-      if (map[name]) {
-        map[name].value = value;
-      }
-    });
-    legend.setItems(_.values(map));
-  },
-  onHide: function onHide() {
-    const legend = chart.get('legendController').legends.top[0];
-    legend.setItems(chart.getLegendItems().country);
-  }
-});
 
-chart.interval()
-  .position('月份*月均降雨量')
-  .color('name')
-  .adjust({
-    type: 'dodge',
-    marginRatio: 0.05 // 设置分组间柱子的间距
-  });
+const context = document.getElementById('container').getContext('2d');
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart
+      data={data}
+      coord={{
+        transposed: true
+      }}
+    >
+      <Axis field="月份" />
+      <Axis field="月均降雨量" />
+      <Interval
+        x="月份"
+        y="月均降雨量"
+        color="name"
+        adjust={{
+          type: 'dodge',
+          marginRatio: 0.05 // 设置分组间柱子的间距
+        }}
+      />
+    </Chart>
+  </Canvas>
+);
+
+const chart = new Canvas(props);
 chart.render();
diff --git a/packages/site/examples/bar/dodge/demo/negetive.js b/packages/site/examples/bar/dodge/demo/negetive.js
@@ -1,4 +1,4 @@
-import F2 from '@antv/f2';
+import { Canvas, Chart, Interval, Axis, Legend } from '@antv/f2';
 
 const data = [{
   gender: 'Male',
@@ -89,38 +89,28 @@ const data = [{
   value: 0.1,
   cate: '100 +'
 }];
-const chart = new F2.Chart({
-  id: 'container',
-  pixelRatio: window.devicePixelRatio
-});
 
-chart.source(data);
-chart.coord({
-  transposed: true
-});
-chart.legend({
-  align: 'right',
-  itemWidth: 50
-});
-chart.axis('cate', {
-  line: F2.Global._defaultAxis.line,
-  grid: null
-});
-chart.axis('value', {
-  line: null,
-  grid: F2.Global._defaultAxis.grid,
-  label: function label(text, index, total) {
-    const textCfg = {};
-    if (index === 0) {
-      textCfg.textAlign = 'left';
-    } else if (index === total - 1) {
-      textCfg.textAlign = 'right';
-    }
-    return textCfg;
-  }
-});
-chart.interval()
-  .position('cate*value')
-  .color('gender')
-  .adjust('stack');
+const context = document.getElementById('container').getContext('2d');
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart
+      data={data}
+      coord={{
+        transposed: true
+      }}
+      scale={{
+        sales: {
+          tickCount: 5
+        }
+      }}
+    >
+      <Axis field="cate" />
+      <Axis field="value" />
+      <Interval x="cate" y="value" adjust="stack" color="gender" />
+      <Legend align="right" field="gender"/>
+    </Chart>
+  </Canvas>
+);
+
+const chart = new Canvas(props);
 chart.render();
diff --git a/packages/site/examples/bar/stack/demo/percent.js b/packages/site/examples/bar/stack/demo/percent.js
@@ -1,5 +1,4 @@
-import F2 from '@antv/f2';
-import _ from 'lodash';
+import { Canvas, Chart, Interval, Axis } from '@antv/f2';
 
 const data = [{
   country: 'Europe',
@@ -82,47 +81,27 @@ const data = [{
   value: 7268,
   percent: 0.8977272727272727
 }];
-const chart = new F2.Chart({
-  id: 'container',
-  pixelRatio: window.devicePixelRatio
-});
-chart.source(data, {
-  percent: {
-    min: 0,
-    formatter: function formatter(val) {
-      return (val * 100).toFixed(0) + '%';
-    }
-  }
-});
-chart.coord({
-  transposed: true
-});
-chart.tooltip({
-  custom: true, // 自定义 tooltip 内容框
-  onChange: function onChange(obj) {
-    const legend = chart.get('legendController').legends.top[0];
-    const tooltipItems = obj.items;
-    const legendItems = legend.items;
-    const map = {};
-    legendItems.forEach(function(item) {
-      map[item.name] = _.clone(item);
-    });
-    tooltipItems.forEach(function(item) {
-      const name = item.name;
-      const value = item.value;
-      if (map[name]) {
-        map[name].value = value;
-      }
-    });
-    legend.setItems(_.values(map));
-  },
-  onHide: function onHide() {
-    const legend = chart.get('legendController').legends.top[0];
-    legend.setItems(chart.getLegendItems().country);
-  }
-});
-chart.interval()
-  .position('year*percent')
-  .color('country')
-  .adjust('stack');
+
+const context = document.getElementById('container').getContext('2d');
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart
+      data={data}
+      coord={{
+        transposed: true
+      }}
+      scale={{
+        percent: {
+          min: 0
+        }
+      }}
+    >
+      <Axis field="year" />
+      <Axis field="percent" />
+      <Interval x="year" y="percent" color="country" adjust="stack"/>
+    </Chart>
+  </Canvas>
+);
+
+const chart = new Canvas(props);
 chart.render();