ali F2(移动端数据展示) 入门
2019-02-27 本文已影响0人
copyLeft
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 的和作为配置值
