仪表盘（文字）

仪表盘

仪表盘（文字）

Gauge，仪表盘。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>仪表盘（文字）</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  var Shape = G2.Shape;
  // 自定义Shape 部分
  Shape.registerShape('point', 'pointer', {
    drawShape: function drawShape(cfg, group) {
      var center = this.parsePoint({ // 获取极坐标系下画布中心点
        x: 0,
        y: 0
      });
      // 绘制指针
      group.addShape('line', {
        attrs: {
          x1: center.x,
          y1: center.y,
          x2: cfg.x,
          y2: cfg.y,
          stroke: cfg.color,
          lineWidth: 5,
          lineCap: 'round'
        }
      });
      return group.addShape('circle', {
        attrs: {
          x: center.x,
          y: center.y,
          r: 9.75,
          stroke: cfg.color,
          lineWidth: 4.5,
          fill: '#fff'
        }
      });
    }
  });

var data = [{
    value: 6
  }];
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [0, 0, 30, 0]
  });
  chart.source(data);

chart.coord('polar', {
    startAngle: -9 / 8 * Math.PI,
    endAngle: 1 / 8 * Math.PI,
    radius: 0.75
  });
  chart.scale('value', {
    min: 0,
    max: 9,
    nice: false,
    ticks: [2.25, 3.75, 5.25, 6.75]
  });

chart.axis('1', false);
  chart.axis('value', {
    zIndex: 2,
    line: null,
    label: {
      offset: -20,
      formatter: function formatter(val) {
        if (val === '2.25') {
          return '差';
        } else if (val === '3.75') {
          return '中';
        } else if (val === '5.25') {
          return '良';
        }

return '优';
      },
      textStyle: {
        fontSize: 18,
        textAlign: 'center'
      }
    },
    tickLine: null,
    grid: null
  });
  chart.legend(false);
  chart.point().position('value*1').shape('pointer').color('#1890FF').active(false);

// 绘制仪表盘刻度线
  chart.guide().line({
    start: [3, 0.905],
    end: [3.0035, 0.85],
    lineStyle: {
      stroke: '#19AFFA', // 线的颜色
      lineDash: null, // 虚线的设置
      lineWidth: 3
    }
  });
  chart.guide().line({
    start: [4.5, 0.905],
    end: [4.5, 0.85],
    lineStyle: {
      stroke: '#19AFFA', // 线的颜色
      lineDash: null, // 虚线的设置
      lineWidth: 3
    }
  });

chart.guide().line({
    start: [6, 0.905],
    end: [6.0035, 0.85],
    lineStyle: {
      stroke: '#19AFFA', // 线的颜色
      lineDash: null, // 虚线的设置
      lineWidth: 3
    }
  });

// 绘制仪表盘背景
  chart.guide().arc({
    zIndex: 0,
    top: false,
    start: [0, 0.965],
    end: [9, 0.965],
    style: { // 底灰色
      stroke: '#CBCBCB',
      lineWidth: 18
    }
  });
  // 绘制指标
  chart.guide().arc({
    zIndex: 1,
    start: [0, 0.965],
    end: [data[0].value, 0.965],
    style: {
      stroke: '#1890FF',
      lineWidth: 20
    }
  });
  // 绘制指标数字
  chart.guide().html({
    position: ['50%', '95%'],
    html: '<div style="width: 300px;text-align: center;">' + '<p style="font-size: 20px; color: #545454;margin: 0;">合格率</p>' + '<p style="font-size: 36px;color: #545454;margin: 0;">' + data[0].value * 10 + '%</p>' + '</div>'
  });

chart.render();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>仪表盘（文字）</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  var Shape = G2.Shape;
  // 自定义Shape 部分
  Shape.registerShape('point', 'pointer', {
    drawShape: function drawShape(cfg, group) {
      var center = this.parsePoint({ // 获取极坐标系下画布中心点
        x: 0,
        y: 0
      });
      // 绘制指针
      group.addShape('line', {
        attrs: {
          x1: center.x,
          y1: center.y,
          x2: cfg.x,
          y2: cfg.y,
          stroke: cfg.color,
          lineWidth: 5,
          lineCap: 'round'
        }
      });
      return group.addShape('circle', {
        attrs: {
          x: center.x,
          y: center.y,
          r: 9.75,
          stroke: cfg.color,
          lineWidth: 4.5,
          fill: '#fff'
        }
      });
    }
  });

var data = [{
    value: 6
  }];
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [0, 0, 30, 0]
  });
  chart.source(data);

chart.guide().line({
    start: [6, 0.905],
    end: [6.0035, 0.85],
    lineStyle: {
      stroke: '#19AFFA', // 线的颜色
      lineDash: null, // 虚线的设置
      lineWidth: 3
    }
  });

chart.render();
</script>
</body>
</html>

图表简介

Gauge，仪表盘。

了解更多

图表用法

仪表盘(Gauge)是一种拟物化的图表，刻度表示度量，指针表示维度，指针角度表示数值。仪表盘图表就像汽车的速度表一样，有一个圆形的表盘及相应的刻度，有一个指针指向当前数值。目前很多的管理报表或报告上都是用这种图表，以直观的表现出某个指标的进度或实际情况。仪表盘的好处在于它能跟人们的常识结合，使大家马上能理解看什么、怎么看。拟物化的方式使图标变得更友好更人性化，正确使用可以提升用户体验。

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接