How to use @antv/f2 - 10 common examples

name: 'HU',
  country: 'Hungary'
}, {
  x: 63.4,
  y: 51.8,
  z: 15.4,
  name: 'PT',
  country: 'Portugal'
}, {
  x: 64,
  y: 82.9,
  z: 31.3,
  name: 'NZ',
  country: 'New Zealand'
}];
const chart = new F2.Chart({
  id: 'container',
  pixelRatio: window.devicePixelRatio
});
chart.source(data, {
  x: {
    alias: 'Daily fat intake', // 定义别名
    tickInterval: 5, // 自定义刻度间距
    nice: false, // 不对最大最小值优化
    max: 96, // 自定义最大值
    min: 62 // 自定义最小是
  },
  y: {
    alias: 'Daily sugar intake',
    tickInterval: 50,
    nice: false,
    max: 165,

月份: 'May.',
  月均降雨量: 52.6
}, {
  name: 'Berlin',
  月份: 'Jun.',
  月均降雨量: 35.5
}, {
  name: 'Berlin',
  月份: 'Jul.',
  月均降雨量: 37.4
}, {
  name: 'Berlin',
  月份: 'Aug.',
  月均降雨量: 42.4
}];
const chart = new F2.Chart({
  id: 'container',
  pixelRatio: window.devicePixelRatio
});
chart.source(data, {
  月均降雨量: {
    tickCount: 5
  }
});
chart.tooltip({
  custom: true, // 自定义 tooltip 内容框
  onChange: function onChange(obj) {
    const legend = chart.get('legendController').legends.top[0];
    const tooltipItems = obj.items;
    const legendItems = legend.items;
    const map = {};
    legendItems.forEach(function(item) {

country: 'Asia',
  year: '2050',
  value: 5268,
  percent: 0.8934871099050203
}, {
  country: 'Europe',
  year: '2100',
  value: 828,
  percent: 0.10227272727272728
}, {
  country: 'Asia',
  year: '2100',
  value: 7268,
  percent: 0.8977272727272727
}];
const chart = new F2.Chart({
  id: 'container',
  pixelRatio: window.devicePixelRatio
});
chart.source(data, {
  percent: {
    min: 0,
    formatter: function formatter(val) {
      return (val * 100).toFixed(0) + '%';
    }
  }
});
chart.coord({
  transposed: true
});
chart.tooltip({
  custom: true, // 自定义 tooltip 内容框

user: '用户 A',
  score: 70
}, {
  item: 'Technology',
  user: '用户 B',
  score: 40
}, {
  item: 'Support',
  user: '用户 A',
  score: 60
}, {
  item: 'Support',
  user: '用户 B',
  score: 40
}];
const chart = new F2.Chart({
  id: 'container',
  pixelRatio: window.devicePixelRatio
});

chart.coord('polar');
chart.source(data, {
  score: {
    min: 0,
    max: 120,
    nice: false,
    tickCount: 4
  }
});
chart.tooltip({
  custom: true, // 自定义 tooltip 内容框
  onChange: function onChange(obj) {

import F2 from '@antv/f2';

// F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 }
];

// Step 1: 创建 Chart 对象
const chart = new F2.Chart({
  id: 'container',
  pixelRatio: window.devicePixelRatio // 指定分辨率
});

// Step 2: 载入数据源
chart.source(data);

// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart.interval()
  .position('genre*sold')
  .color('genre');

// Step 4: 渲染图表
chart.render();

});
// 开始配置坐标轴
chart.axis('x', {
  label: function label(text) {
    return {
      text: text + ' gr' // 格式化坐标轴显示文本
    };
  },
  grid: {
    stroke: '#d9d9d9',
    lineWidth: 1,
    lineDash: [ 2, 2 ]
  }
});
chart.axis('y', {
  line: F2.Util.mix({}, F2.Global._defaultAxis.line, {
    top: false
  }),
  label: function label(text) {
    if (text > 0) {
      return {
        text: text + ' gr'
      };
    }
  }
});
chart.tooltip(false);
chart.point().position('x*y').color('#1890ff')
  .size('z', [ 10, 40 ])
  .shape('circle')
  .style({
    lineWidth: 1,

function CommonChart(config) {
    this.viewInstance = {};
    this.config = _Commom.Util.deepClone(config);
    this.checkChartConfig(this.config);
    this.chartInstance = new F2.Chart(this.config.chart);
  }

tag: 0
}, {
  date: '2017-06-28',
  value: 9.3,
  tag: 0
}, {
  date: '2017-06-29',
  value: 8.5,
  tag: 0
}, {
  date: '2017-06-30',
  value: 7.3,
  tag: 0
}];

const chart = new F2.Chart({
  id: 'container',
  pixelRatio: window.devicePixelRatio,
  padding: [ 45, 'auto', 'auto' ]
});

chart.source(data, {
  value: {
    tickCount: 5,
    min: 0,
    formatter: function formatter(val) {
      return val.toFixed(2) + '%';
    }
  },
  date: {
    type: 'timeCat',
    range: [ 0, 1 ],

}, {
  date: '2018-05-19',
  steps: 3861
}, {
  date: '2018-05-20',
  steps: 8
}, {
  date: '2018-05-21',
  steps: 24365
}, {
  date: '2018-05-22',
  steps: 14271
}];


const chart = new F2.Chart({
  id: 'container',
  pixelRatio: window.devicePixelRatio,
  padding: [ 20, 30, 'auto', 'auto' ]
});
chart.source(data, {
  date: {
    type: 'timeCat',
    range: [ 0, 1 ],
    mask: 'MM-D'
  },
  steps: {
    ticks: [ 10000 ],
    formatter: function formatter(val) {
      return val === 10000 ? '1W' : 0;
    }
  }

.then(data => {
    const chart = new F2.Chart({
      id: 'container',
      pixelRatio: window.devicePixelRatio
    });
    chart.source(data);
    chart.scale('year', {
      tickCount: 5,
      range: [ 0, 1 ]
    });
    chart.axis('year', {
      label: function label(text, index, total) {
        const textCfg = {};
        if (index === 0) {
          textCfg.textAlign = 'left';
        } else if (index === total - 1) {
          textCfg.textAlign = 'right';
        }