某频道视频订阅数和月收入关系

区间面积图

某频道视频订阅数和月收入关系

<!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 data = [{
    "Date": "22 February",
    "订阅数": 50000,
    "月收入": 125000
}, {
    "Date": "28 February",
    "订阅数": 60000,
    "月收入": 150000
}, {
    "Date": "3 March",
    "订阅数": 100000,
    "月收入": 250000
}, {
    "Date": "20 March",
    "订阅数": 200000,
    "月收入": 500000
}, {
    "Date": "7 April",
    "订阅数": 250000,
    "月收入": 625000
}, {
    "Date": "13 June",
    "订阅数": 210000,
    "月收入": 525000
}];
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: 'auto'
  });
  chart.source(data);
  var ds = new DataSet();
  var dv = ds.createView().source(data).transform({
    type: 'fold',
    fields: ["订阅数", "月收入"],
    key: 'type',
    value: 'value',
    retains: ['Date']
  });
  var dv2 = ds.createView().source(data).transform({
    type: 'map',
    callback: function callback(row) {
      row.range = [row["订阅数"], row['月收入']];
      return row;
    }
  });
  chart.scale('Date', {
    range: [0, 1],
    tickCount: 10,
    type: 'timeCat'
  });
  chart.axis('Date', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      }
    }
  });
  chart.axis('value', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      },
      formatter: function formatter(text) {
        return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
      }
    }
  });
  chart.tooltip({
    crosshairs: 'y'
  });

//view1
  var view1 = chart.view();
  view1.source(dv2);
  view1.axis(false);
  view1.area().position('Date*range').color('#8d8d8d').opacity(0.1).tooltip(false);
  //view1
  var view2 = chart.view();
  view2.source(dv);
  view2.line().position('Date*value').color('type').opacity(1);
  view2.point().position('Date*value').color('type').opacity(1).shape('circle');

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 data = [{
    "Date": "22 February",
    "订阅数": 50000,
    "月收入": 125000
}, {
    "Date": "28 February",
    "订阅数": 60000,
    "月收入": 150000
}, {
    "Date": "3 March",
    "订阅数": 100000,
    "月收入": 250000
}, {
    "Date": "20 March",
    "订阅数": 200000,
    "月收入": 500000
}, {
    "Date": "7 April",
    "订阅数": 250000,
    "月收入": 625000
}, {
    "Date": "13 June",
    "订阅数": 210000,
    "月收入": 525000
}];
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: 'auto'
  });
  chart.source(data);
  var ds = new DataSet();
  var dv = ds.createView().source(data).transform({
    type: 'fold',
    fields: ["订阅数", "月收入"],
    key: 'type',
    value: 'value',
    retains: ['Date']
  });
  var dv2 = ds.createView().source(data).transform({
    type: 'map',
    callback: function callback(row) {
      row.range = [row["订阅数"], row['月收入']];
      return row;
    }
  });
  chart.scale('Date', {
    range: [0, 1],
    tickCount: 10,
    type: 'timeCat'
  });
  chart.axis('Date', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      }
    }
  });
  chart.axis('value', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      },
      formatter: function formatter(text) {
        return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
      }
    }
  });
  chart.tooltip({
    crosshairs: 'y'
  });

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

图表用法

数据来源：demo数据

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表用法

相关链接