How to use the @antv/g2plot.Gauge function in @antv/g2plot

To help you get started, we’ve selected a few @antv/g2plot examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github antvis / G2Plot / examples / gauge / basic / demo / style.js View on Github external
import { Gauge } from '@antv/g2plot';

const gaugePlot = new Gauge(document.getElementById('container'), {
  title: {
    visible: true,
    text: '仪表盘样式',
  },
  value: 64,
  min: 0,
  max: 100,
  range: [20, 40, 60, 80],
  gaugeStyle: {
    colors: ['#1890FF', '#2FC25B', '#FACC14', '#223273', '#8543E0', '#13C2C2', '#3436C7', '#F04864'],
    // stripWidth: 30,
    // stripBackColor: '#ddd',
    // tickInterval: 20,
    // tickLabelPos: 'inner',
    // tickLabelSize: 16,
    // tickLabelColor: '#aaa',
github antvis / G2Plot / examples / gauge / basic / demo / half.js View on Github external
}

.g2plot-gauge-label .value {
  font-size: 16px;
  color: #8c8c8c;
  font-weight: 300;
}

.g2plot-gauge-label .title {
  font-size: 30px;
  color: #000000;
  font-weight: bold;
}
`);

const gaugePlot = new Gauge(document.getElementById('container'), {
  title: {
    visible: true,
    text: '半圆仪表盘',
  },
  width: 400,
  height: 400,
  value: 64,
  min: 0,
  max: 100,
  range: [0, 70],
  startAngle: -1,
  endAngle: 0,
  format: (v) => {
    if (v === 0 || v === 100) {
      return v + '%';
    }
github antvis / G2Plot / examples / gauge / basic / demo / basic.js View on Github external
import { Gauge } from '@antv/g2plot';

const gaugePlot = new Gauge(document.getElementById('container'), {
  title: {
    visible: true,
    text: '仪表盘',
  },
  value: 64,
  min: 0,
  max: 100,
  range: [20, 40, 60, 80],
});
gaugePlot.render();