初始化

import F2 from '@antv/f2/lib/core';
import Tooltip from '@antv/f2/lib/plugin/tooltip';
import Guide from '@antv/f2/lib/plugin/guide';
this.chart = new F2.Chart({
  id: 'mountNode',
  width: window.innerWidth,
  height: window.innerHeight * 0.4,
  pixelRatio: window.devicePixelRatio,
  plugins: [Tooltip, Guide],
});

注入数据源

数据格式：

[{
	datetime: '2019-08-29 09:30:24',
  value: [100,110],
  type: 'systolic',
},{
  datetime: '2019-08-29 09:30:24',
  value: 70,
  type: 'pulse rate',
},{
  datetime: '2019-08-29 09:30:24',
  value: [90, 99],
  type: 'diastolic',
}]

import '@antv/f2/lib/scale/time-cat';
import moment from 'moment';
this.chart.source(data, {
  datetime: {
    type: 'timeCat', //度量，eg：identity，linear，cat，timeCat
    nice: true,
    formatter: iValue => moment(iValue).format(unit),
  },
  value: {
    tickCount: 7,
    min: 60,
    max: 180,
    formatter: iValue => `${iValue}`,
  },
});

画图

this.chart
  .interval() //几何图形， eg：line，point，path
  .position('datetime*value')
  .color('type*value', type => {
    if (type === 'systolic') return '#fa605f';
    if (type === 'pulse rate') return '#888';
    return '#7cd07a';
  })
  .shape('type*value', type => {
    if (type === 'pulse rate') return 'empty';
    return 'pointOrline';
  });

自定义shape

import F2 from '@antv/f2/lib/core';
import '@antv/f2/lib/geom/line';
import '@antv/f2/lib/geom/interval';
const { Shape } = F2;
Shape.registerShape('interval', 'pointOrline', {
  getPoints(cfg) {
    const { x } = cfg;
    const { y } = cfg;
    return [{ x, y: y[0] }, { x, y: y[1] }];
  },
  draw(cfg, group) {
    const points = this.parsePoints(cfg.points);
    // const { type } = cfg.origin._origin;
    if (points[0].x === points[1].x && points[0].y === points[1].y) {
      return group.addShape('circle', {
        attrs: {
          x: points[0].x,
          y: points[0].y,
          r: 2.5,
          fill: cfg.color,
        },
      });
    }
    return group.addShape('line', {
      attrs: {
        x1: points[0].x,
        y1: points[0].y,
        x2: points[1].x,
        y2: points[1].y,
        lineWidth: 5,
        strokeStyle: cfg.color,
        lineCap: 'round',
      },
    });
  },
});

Shape.registerShape('interval', 'empty', {
  draw() {
    return null;
  },
});

GuideLine

import '@antv/f2/lib/component/guide/line';
this.chart.guide().line({
  top: false,
  start: ['min', 100],
  end: ['max', 200],
  style: {
    stroke: 'red',
    lineDash: [0, 2, 2],
    lineWidth: 1,
    opacity: 0.3,
  },
});

Tootilp

import moment from 'moment';
this.chart.tooltip({
  showTitle: true,
  layout: 'vertical',
  offsetY: 60,
  onShow: ev => {
    const { items } = ev;
    items.forEach(item => {
      // eslint-disable-next-line no-param-reassign
      if (step === 1 || step === 2) item.title = moment(item.origin.datetime).format('MM-DD');
      const tempArray = item.value.split(',');
      // eslint-disable-next-line no-param-reassign
      item.value = tempArray[0] !== tempArray[1] ? tempArray.join('-') : tempArray[0];
    });
  },
});

渲染、清除、更新等

this.chart.render();

this.chart.clear();


//立即更新数据及图表
this.chart.changeData(data);


//更新数据并其他操作，最后再更新图表
this.chart.source(newData);
//do something
this.chart.repaint();

//改变宽高
this.chart.changeSize(width, height)

度量

• identity，常量类型的数值，也就是说数据的某个字段是不变的常量；

• linear，连续的数字 [1, 2, 3, 4, 5]；

• cat，分类, ['男','女']；

• timeCat，时间类型；