F2

安装

// yarn 
yarn add @antv/f2 

// npm
npm i --save @antv/f2

基本使用

Chart 创建图表实例


// html
// 图表装载容器
<canvas id='chart'/>

import F2 from '@antv/f2'

const chart = new F2.Chart({
    id: 'chart' // 挂载容器 id， 也可以使用 el: 元素对象
    width: 320,
    height: 400,
    pixelRatio: window.devicePixelRatio // 设置分辨率

})

Chart.source 添加数据


const data = [
    {
        label: "苹果",
        nums: 100
    },
    {
        label: "橘子",
        nums: 120
    }
]

chart.source(data)

声明图表类型


// 声明类型为 柱状图表
chart.interval()

图表类型
- point 点，气泡
- path 路径
- line 线段
- area 区域
- interval 矩形，弧形
- polygon 多边形
- schema 自定义

设置图表属性

// 图表属性需要跟随不同的图表做设定
chart.interval().position("label*nums").size(10)
// 这里设置 x, y 轴对应的数据值 "lable*nums", 柱图矩形的宽度

可设置的图表属性
- position 位置映射
- color 颜色
- size 大小尺寸
- shape 形状

渲染图形


chart.render()

更新数据

// 更新数据
chart.changedata(newData)

// 更新渲染
chart.repaint()

清除图表


chart.clear()

柱状图转饼图 (修改图表坐标系)

坐标系类型
- rect 直角坐标系(默认)
- polar 极坐标系


 chart.interval().position('genre*sold').color('genre')
 chart.coord('polar') // 修改坐标系，将柱状图改为饼图或雷达图

坐标系设置参数


// 直角坐标系
chart.coord('rect', {
  transposed: true  // 坐标系进行转置, 由纵向改为横向
});

// 极坐标系
chart.coord('polar', {
  startAngle: {Number}, // 起始弧度 [ 1弧度 = 57.29578度 ] 
  endAngle: {Number}, // 结束弧度 
  innerRadius: {Number}, // 用于空心部分的半径设置
  radius: {Number}, // 实心圆的半径大小设置
  transposed: true // 极坐标转置
});

进阶概念

度量

chart.source(data, defs)

设置数据源时，通过提供第二个参数，可以设置数据中单一数据值的展示属性

分类
- identity 常量
- linear 连续数字 [1, 2, 3]
- cat 分类 ['猫科', '犬科']
- timeCat 时间类型

基本使用

名称排序


const data = [

    {
        label: '广州',
        nums: 100
    },
    {
        label: '上海',
        nums: 120
    },
    {
        label: '深圳',
        nums: 50
    }

];

const defs = {
    
    label: {
        type: 'cat',
        values: ['深圳', '上海'] // 展示时的排列顺序, 未包含的值将不会显示
    }
    
}

chart.source(data, defs)

设置取值范围


const data = [
    
    {num: 10},
    {num: 50},
    {num: 90},
]


const defs = {
    num: {
        type: 'linear',
        min: 0, 
        max: 60
    }
}

chart.source(data, defs) // 只显示范围内数据

标识处理


const data = [

    {
        label: '广州',
        nums: 100
    },
    {
        label: '上海',
        nums: 120
    },
    {
        label: '深圳',
        nums: 50
    }

];

const defs = {
    label: {
        // 回调函数, 获取对应标识值作为参数
        formatter (value){
            return `${value}市`
        }
        
    }
}

图形属性

值类型/属性类型


const data = [

    [size: 10],
    [size: 20],
    [size: 40],

]

// 值类型
chart.point().size(20) // 所有点图形大小都为 20

// 属性类型
chart.point().size("size") // 点的大小由对应的数据属性"size" 决定

多值与回调
属性值可以设置为多个，使用 * 链接

可接受一个函数作为第二参数, 函数接收的参数为第一参数的配置，函数返回值将作为配置值


const data = [
    
    {w: 10, h: 20},
    {w: 30, h: 40},
    {w: 50, h: 10},
]

// 无回调
chart.point().size("w*h") // size 默认将取第一项值 既 w 的值

// 有回调
chart.point().size("w*h", (w, h) => w + h) // size 最终接收 w 与 h 的和作为配置值