gauge

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'gauge', // Set the chart type to gauge
  data: {
    value: {
      target: 120, // Target value of the gauge
      total: 400, // Total value of the gauge
      name: 'score', // Name of the gauge data
    },
  },
});

chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'gauge',
  data: {
    value: {
      target: 120,
      total: 400,
      name: 'score',
    },
  },
  scale: {
    color: { range: ['#FAAD14', 'green'] },
  },
});

chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'gauge',
  data: {
    value: {
      target: 120,
      total: 400,
      name: 'score',
      thresholds: [100, 200, 400],
    },
  },
  scale: {
    color: { range: ['#F4664A', '#FAAD14', 'green'] },
  },
});

chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'gauge',
  data: {
    value: {
      target: 159,
      total: 400,
      name: 'score',
      // thresholds: [200, 400],
    },
  },
  scale: {
    color: {
      range: ['l(0):0:#62CFF4 1:#2C67F2', 'l(0):0:#2C67F2 1:#00008B'],
    },
    y: {
      range: [1, -0.5],
    },
  },
  style: {
    // Configure gauge indicator text style
    textContent: (target, total) => `Ratio: ${(target / total) * 100}%`,
    textFill: '#000',
    textFontSize: 24,
    textfontWeight: 300,
    textX: '35%',
    textY: '75%',
    // Configure gauge pointer style
    pointerStroke: '#c5c5c5',
    pointershadowColor: '#333333',
    pointershadowBlur: 10,
    pointershadowOffsetX: 5,
    pointershadowOffsetY: 5,
    // Configure gauge pointer axis style
    pinStroke: '#d5d5d5',
    pinFill: '#d5d5d5',
    pinlinewidth: 6,
    pinshadowColor: '#333333',
    pinshadowBlur: 30,
    pinshadowOffsetX: 5,
    pinshadowOffsetY: 5,
    // Configure gauge arc style
    arcLineWidth: 2,
    arcStroke: '#fff',
    arcshadowColor: '#333333',
    arcshadowBlur: 30,
    arcshadowOffsetX: 5,
    arcshadowOffsetY: 5,
  },
  legend: false,
});

chart.render();

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  height: 350,
});

chart.options({
  type: 'gauge',
  data: {
    value: { target: 159, total: 400, name: 'score', thresholds: [200, 400] },
  },
  scale: {
    color: { range: ['l(0):0:#37b38e 1:#D9C652', 'l(0):0:#D9C652 1:#f96e3e'] },
  },
  style: {
    textContent: (target, total) => `得分：${target}
占比：${(target / total) * 100}%`,
  },
  legend: false,
});

chart.render();

import { Chart } from '@antv/g2';
import { Path } from '@antv/g';

const chart = new Chart({ container: 'container' });

function getOrigin(points) {
  if (points.length === 1) return points[0];
  const [[x0, y0, z0 = 0], [x2, y2, z2 = 0]] = points;
  return [(x0 + x2) / 2, (y0 + y2) / 2, (z0 + z2) / 2];
}
// 自定义指针形状
const customShape = (style) => {
  return (points, value, coordinate, theme) => {
    // 获取几何点中心坐标
    const [x, y] = getOrigin(points);
    const [cx, cy] = coordinate.getCenter();
    // 计算指针方向角度
    const angle = Math.atan2(y - cy, x - cx);
    const length = 100; // 指针长度
    const width = 8; // 指针底部宽度
    // 构造指针三角形路径
    return new Path({
      style: {
        d: [
          ['M', cx + Math.cos(angle) * length, cy + Math.sin(angle) * length], // 顶点
          [
            'L',
            cx + Math.cos(angle + Math.PI / 2) * width,
            cy + Math.sin(angle + Math.PI / 2) * width,
          ], // 底部左点
          [
            'L',
            cx + Math.cos(angle - Math.PI / 2) * width,
            cy + Math.sin(angle - Math.PI / 2) * width,
          ], // 底部右点
          ['Z'], // 闭合路径
        ],
        fill: '#30BF78', // 填充色
      },
    });
  };
};

chart.options({
  type: 'gauge',
  data: {
    value: {
      target: 159,
      total: 424,
      name: 'score',
    },
  },
  style: {
    pointerShape: customShape,
    pinShape: false,
    textContent: (target, total) => {
      return `得分：${target}\n占比：${(target / total) * 100}%`;
    },
  },
});

chart.render();