某产品新老用户对比分析

仪表盘

某产品新老用户对比分析

<!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>
<style>
    .g2-guide-html {
        width: 80px;
        height: 80px;
        vertical-align: middle;
        text-align: center;
        line-height: 0.4
    }

.g2-guide-html .title {
        font-size: 14px;
        color: #8c8c8c;
        font-weight: 300;
    }

.g2-guide-html .value {
        font-size: 24px;
        color: #000;
        font-weight: bold;
    }
</style>
<script>
  var Shape = G2.Shape;
  Shape.registerShape('point', 'pointer', {
    drawShape: function drawShape(cfg, group) {
      var point = cfg.points[0];
      var center = this.parsePoint({
        x: 0,
        y: 0
      });
      var target = this.parsePoint({
        x: point.x,
        y: 0.9
      });
      var dir_vec = {
        x: center.x - target.x,
        y: center.y - target.y
      };
      //normalize
      var length = Math.sqrt(dir_vec.x * dir_vec.x + dir_vec.y * dir_vec.y);
      dir_vec.x *= 1 / length;
      dir_vec.y *= 1 / length;
      //rotate dir_vector by -90 and scale
      var angle1 = -Math.PI / 2;
      var x_1 = Math.cos(angle1) * dir_vec.x - Math.sin(angle1) * dir_vec.y;
      var y_1 = Math.sin(angle1) * dir_vec.x + Math.cos(angle1) * dir_vec.y;
      //rotate dir_vector by 90 and scale
      var angle2 = Math.PI / 2;
      var x_2 = Math.cos(angle2) * dir_vec.x - Math.sin(angle2) * dir_vec.y;
      var y_2 = Math.sin(angle2) * dir_vec.x + Math.cos(angle2) * dir_vec.y;
      //polygon vertex
      var path = [['M', target.x + x_1 * 1, target.y + y_1 * 1], ['L', center.x + x_1 * 3, center.y + y_1 * 3], ['L', center.x + x_2 * 3, center.y + y_2 * 3], ['L', target.x + x_2 * 1, target.y + y_2 * 1], ['Z']];
      var tick = group.addShape('path', {
        attrs: {
          path: path,
          fill: cfg.color
        }
      });
      return tick;
    }
  });

<!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>
<style>
    .g2-guide-html {
        width: 80px;
        height: 80px;
        vertical-align: middle;
        text-align: center;
        line-height: 0.4
    }

.g2-guide-html .title {
        font-size: 14px;
        color: #8c8c8c;
        font-weight: 300;
    }

图表用法

数据来源：demo数据

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表用法

相关链接