How to use the @antv/g2plot.OverlappedComboPlot 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 / combo / basic / demo / column-scatter-line.js View on Github external
{ time: '2019-03', value: 220 },
  { time: '2019-04', value: 300 },
  { time: '2019-05', value: 250 },
  { time: '2019-06', value: 220 },
  { time: '2019-07', value: 362 },
];

const transformData = [
  { time: '2019-03', value: 800 },
  { time: '2019-04', value: 600 },
  { time: '2019-05', value: 400 },
  { time: '2019-06', value: 380 },
  { time: '2019-07', value: 220 },
];

const comboPlot = new OverlappedComboPlot(document.getElementById('container'), {
  layers: [
    {
      type: 'column',
      name: '浏览',
      data: uvData,
      xField: 'time',
      yField: 'value',
    },
    {
      type: 'scatter',
      name: '下单',
      data: billData,
      xField: 'time',
      yField: 'value',
      pointSize: 20,
      yAxis: {
github antvis / G2Plot / examples / combo / basic / demo / column-line.js View on Github external
{ time: '2019-03', value: 220, type: 'bill' },
  { time: '2019-04', value: 300, type: 'bill' },
  { time: '2019-05', value: 250, type: 'bill' },
  { time: '2019-06', value: 220, type: 'bill' },
  { time: '2019-07', value: 362, type: 'bill' },
];

const transformData = [
  { time: '2019-03', value: 800 },
  { time: '2019-04', value: 600 },
  { time: '2019-05', value: 400 },
  { time: '2019-06', value: 380 },
  { time: '2019-07', value: 220 },
];

const comboPlot = new OverlappedComboPlot(document.getElementById('container'), {
  layers: [
    {
      type: 'groupColumn',
      name: '订单量',
      data: uvBillData,
      xField: 'time',
      yField: 'value',
      groupField: 'type',
    },
    {
      type: 'line',
      name: '转化',
      data: transformData,
      xField: 'time',
      yField: 'value',
      color: '#f8ca45',