feat(examples): 新增子弹图案例 (#5530)

Co-authored-by: hustcc <[email protected]>

__tests__/plots/static/index.ts

@@ -290,4 +290,7 @@ export { liquidTriangle } from './liquid-triangle';
 export { liquidCustomShape } from './liquid-custom-shape';
 export { alphabetIntervalAxisOptions } from './alphabet-interval-axis-options';
 export { profitIntervalAxisTransform } from './profit-interval-axis-transform';
+export { intervalPointBullet } from './interval-point-bullet';
+export { intervalPointBullets } from './interval-point-bullets';
+export { intervalPointBulletDatas } from './interval-point-bullet-datas';
 export { mockIntervalLine } from './mock-interval-line';

__tests__/plots/static/interval-point-bullet-datas.ts

@@ -0,0 +1,48 @@
+import { G2Spec } from '../../../src';
+
+export function intervalPointBulletDatas(): G2Spec {
+  const colors = {
+    ranges: ['#bfeec8', '#FFe0b0', '#FFbcb8'],
+    measures: ['#61DDAA', '#5B8FF9'],
+    target: '#39a3f4',
+  };
+
+  return {
+    type: 'view',
+    data: [
+      { title: '满意度', ranges: 100, measures: 60, target: 90 },
+      { title: '满意度', ranges: 80, measures: 10 },
+      { title: '满意度', ranges: 30 },
+    ],
+    coordinate: { transform: [{ type: 'transpose' }] },
+    legend: false,
+    children: [
+      {
+        type: 'interval',
+        encode: { y: 'ranges', x: 'title', color: 'ranges' },
+        style: { maxWidth: 30, fill: (d, i) => colors['ranges'][i] },
+        axis: { y: { grid: true, gridLineWidth: 2 }, x: { title: false } },
+      },
+      {
+        type: 'interval',
+        encode: { y: 'measures', color: '#5B8FF9', x: 'title' },
+        style: { maxWidth: 20, fill: (d, i) => colors['measures'][i] },
+        labels: [
+          { text: 'measures', position: 'right', textAlign: 'left', dx: 5 },
+        ],
+      },
+      {
+        type: 'point',
+        encode: {
+          size: 8,
+          y: 'target',
+          x: 'title',
+          shape: 'line',
+          color: '#39a3f4',
+        },
+        style: { lineWidth: 1 },
+        tooltip: { title: false, items: [{ channel: 'y' }] },
+      },
+    ],
+  };
+}

__tests__/plots/static/interval-point-bullet.ts

@@ -0,0 +1,36 @@
+import { G2Spec } from '../../../src';
+
+export function intervalPointBullet(): G2Spec {
+  return {
+    type: 'view',
+    data: [{ title: '满意度', ranges: 100, measures: 80, target: 85 }],
+    coordinate: { transform: [{ type: 'transpose' }] },
+    children: [
+      {
+        type: 'interval',
+        encode: { x: 'title', y: 'ranges', color: '#f0efff' },
+        style: { maxWidth: 30 },
+        axis: { y: { grid: true, gridLineWidth: 2 }, x: { title: false } },
+      },
+      {
+        type: 'interval',
+        encode: { x: 'title', y: 'measures', color: '#5B8FF9' },
+        style: { maxWidth: 20 },
+        labels: [
+          { text: 'measures', position: 'right', textAlign: 'left', dx: 5 },
+        ],
+      },
+      {
+        type: 'point',
+        encode: {
+          size: 8,
+          x: 'title',
+          y: 'target',
+          shape: 'line',
+          color: '#3D76DD',
+        },
+        tooltip: { title: false, items: [{ channel: 'y' }] },
+      },
+    ],
+  };
+}

__tests__/plots/static/interval-point-bullets.ts

@@ -0,0 +1,41 @@
+import { G2Spec } from '../../../src';
+
+export function intervalPointBullets(): G2Spec {
+  return {
+    type: 'view',
+    data: [
+      { title: '5🌟', ranges: 100, measures: 40, target: 85 },
+      { title: '4🌟', ranges: 100, measures: 80, target: 40 },
+      { title: '3🌟', ranges: 100, measures: 20, target: 22 },
+      { title: '0-2🌟', ranges: 100, measures: 30, target: 10 },
+    ],
+    coordinate: { transform: [{ type: 'transpose' }] },
+    children: [
+      {
+        type: 'interval',
+        encode: { x: 'title', y: 'ranges', color: '#f0efff' },
+        style: { maxWidth: 30 },
+        axis: { y: { grid: true, gridLineWidth: 2 }, x: { title: false } },
+      },
+      {
+        type: 'interval',
+        encode: { x: 'title', y: 'measures', color: '#5B8FF9' },
+        style: { maxWidth: 20 },
+        labels: [
+          { text: 'measures', position: 'right', textAlign: 'left', dx: 5 },
+        ],
+      },
+      {
+        type: 'point',
+        encode: {
+          size: 15,
+          x: 'title',
+          y: 'target',
+          shape: 'line',
+          color: 'red',
+        },
+        tooltip: { title: false, items: [{ channel: 'y' }] },
+      },
+    ],
+  };
+}

site/examples/general/bullet/demo/bullet-datas.ts

@@ -0,0 +1,79 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+});
+
+const colors = {
+  ranges: ['#bfeec8', '#FFe0b0', '#FFbcb8'],
+  measures: ['#61DDAA', '#5B8FF9'],
+  target: '#39a3f4',
+};
+
+const data = [
+  {
+    title: '满意度',
+    ranges: 100,
+    measures: 60,
+    target: 90,
+  },
+  {
+    title: '满意度',
+    ranges: 80,
+    measures: 10,
+  },
+  {
+    title: '满意度',
+    ranges: 30,
+  },
+];
+
+chart.coordinate({ transform: [{ type: 'transpose' }] });
+
+chart.data(data).legend(false);
+
+chart
+  .interval()
+  .style('maxWidth', 30)
+  .axis({
+    y: {
+      grid: true,
+      gridLineWidth: 2,
+    },
+    x: {
+      title: false,
+    },
+  })
+  .encode('y', 'ranges')
+  .encode('x', 'title')
+  .style('fill', (d, i) => colors['ranges'][i])
+  .encode('color', 'ranges');
+
+chart
+  .interval()
+  .style('maxWidth', 20)
+  .encode('y', 'measures')
+  .encode('color', '#5B8FF9')
+  .encode('x', 'title')
+  .style('fill', (d, i) => colors['measures'][i])
+  .label({
+    text: 'measures',
+    position: 'right',
+    textAlign: 'left',
+    dx: 5,
+  });
+
+chart
+  .point()
+  .encode('size', 8)
+  .style('lineWidth', 1)
+  .encode('y', 'target')
+  .encode('x', 'title')
+  .encode('shape', 'line')
+  .encode('color', colors['target'])
+  .tooltip({
+    title: false,
+    items: [{ channel: 'y' }],
+  });
+
+chart.render();

site/examples/general/bullet/demo/bullet.ts

@@ -0,0 +1,61 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+});
+
+const data = [
+  {
+    title: '满意度',
+    ranges: 100,
+    measures: 80,
+    target: 85,
+  },
+];
+
+chart.coordinate({ transform: [{ type: 'transpose' }] });
+
+chart.data(data);
+
+chart
+  .interval()
+  .style('maxWidth', 30)
+  .axis({
+    y: {
+      grid: true,
+      gridLineWidth: 2,
+    },
+    x: {
+      title: false,
+    },
+  })
+  .encode('x', 'title')
+  .encode('y', 'ranges')
+  .encode('color', '#f0efff');
+
+chart
+  .interval()
+  .style('maxWidth', 20)
+  .encode('x', 'title')
+  .encode('y', 'measures')
+  .encode('color', '#5B8FF9')
+  .label({
+    text: 'measures',
+    position: 'right',
+    textAlign: 'left',
+    dx: 5,
+  });
+
+chart
+  .point()
+  .encode('size', 8)
+  .encode('x', 'title')
+  .encode('y', 'target')
+  .encode('shape', 'line')
+  .encode('color', '#3D76DD')
+  .tooltip({
+    title: false,
+    items: [{ channel: 'y' }],
+  });
+
+chart.render();

site/examples/general/bullet/demo/bullets.ts

@@ -0,0 +1,79 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+});
+
+const data = [
+  {
+    title: '5🌟',
+    ranges: 100,
+    measures: 40,
+    target: 85,
+  },
+  {
+    title: '4🌟',
+    ranges: 100,
+    measures: 80,
+    target: 40,
+  },
+  {
+    title: '3🌟',
+    ranges: 100,
+    measures: 20,
+    target: 22,
+  },
+  {
+    title: '0-2🌟',
+    ranges: 100,
+    measures: 30,
+    target: 10,
+  },
+];
+
+chart.coordinate({ transform: [{ type: 'transpose' }] });
+
+chart.data(data);
+
+chart
+  .interval()
+  .style('maxWidth', 30)
+  .axis({
+    y: {
+      grid: true,
+      gridLineWidth: 2,
+    },
+    x: {
+      title: false,
+    },
+  })
+  .encode('x', 'title')
+  .encode('y', 'ranges')
+  .encode('color', '#f0efff');
+
+chart
+  .interval()
+  .style('maxWidth', 20)
+  .encode('x', 'title')
+  .encode('y', 'measures')
+  .encode('color', '#5B8FF9')
+  .label({
+    text: 'measures',
+    position: 'right',
+    textAlign: 'left',
+    dx: 5,
+  });
+
+chart
+  .point()
+  .encode('size', 15)
+  .encode('x', 'title')
+  .encode('y', 'target')
+  .encode('shape', 'line')
+  .encode('color', 'red')
+  .tooltip({
+    title: false,
+    items: [{ channel: 'y' }],
+  });
+
+chart.render();

site/examples/general/bullet/demo/meta.json

@@ -0,0 +1,32 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "bullet.ts",
+      "title": {
+        "zh": "子弹图",
+        "en": "Bullet"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_za7we3/afts/img/A*rRZQQ6I4Ic4AAAAAAAAAAAAADo2bAQ/original"
+    },
+    {
+      "filename": "bullet-datas.ts",
+      "title": {
+        "zh": "子弹图 更多数据",
+        "en": "Bullet more data"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_za7we3/afts/img/A*fHiHTrdGO10AAAAAAAAAAAAADo2bAQ/original"
+    },
+    {
+      "filename": "bullets.ts",
+      "title": {
+        "zh": "多条子弹图",
+        "en": "Bullet charts"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_za7we3/afts/img/A*wTXUQoxeACgAAAAAAAAAAAAADo2bAQ/original"
+    }
+  ]
+}

site/examples/general/bullet/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Bullet
+order: 18
+---