// yarn
yarn add @antv/f2
// npm
npm i --save @antv/f2
// 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 // 设置分辨率
})
const data = [
{
label: "苹果",
nums: 100
},
{
label: "橘子",
nums: 120
}
]
chart.source(data)
// 声明类型为 柱状图表
chart.interval()
// 图表属性需要跟随不同的图表做设定
chart.interval().position("label*nums").size(10)
// 这里设置 x, y 轴对应的数据值 "lable*nums", 柱图矩形的宽度
chart.render()
// 更新数据
chart.changedata(newData)
// 更新渲染
chart.repaint()
chart.clear()
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)
设置数据源时,通过提供第二个参数, 可以设置数据中单一数据值的展示属性
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 的和作为配置值