ali F2(移动端数据展示) 入门

// 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 // 极坐标转置
});

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 的和作为配置值