antF2使用记录

最近项目用到antF2记录一下

使用npm安装工具

npm install @antv/f2 --save

安装完成使用import或者require引入

const F2 = require('@antv/f2');

也可以使用script标签引入本地文件在代码中使用canvas

<canvas id="myChart" width="400" height="260"></canvas>

下面对其封装成组件

绘画图标需要canvas标签对其进行封装成vue文件

<template>
    <div class="chart-wrapper">
        <canvas ref="canvas"
                :style="canvasStyle"
                :id="key"></canvas>
    </div>
</template>
<script>
import F2 from '@antv/f2/lib/index-all';

let Shape = F2.Shape;
let Util = F2.Util;

Shape.registerShape('interval', 'portraitRect', {
    draw: function draw(cfg, container) {
        let points = this.parsePoints(cfg.points);
        let style = {
            fill: cfg.color,
            z: true // 需要闭合
        };
        container.addShape('rect', {
            attrs: Util.mix({
                x: points[1].x,
                y: points[1].y,
                width: points[2].x - points[1].x,
                height: points[0].y - points[1].y
            }, style)
        });
        let origin = cfg.origin._origin; // 获取对应的原始数据
        if (origin.value > 4) {
            return container.addShape('text', {
                attrs: {
                    x: (points[1].x + points[2].x) / 2,
                    y: (points[0].y + points[1].y) / 2,
                    text: origin.value,
                    fill: '#fff',
                    fontSize: 9,
                    textAlign: 'center',
                    textBaseline: 'middle'
                }
            });
        }
    }
});

Shape.registerShape('interval', 'transverseRect', {
    draw: function draw(cfg, container) {
        let points = this.parsePoints(cfg.points);
        let style = {
            fill: cfg.color,
            z: true // 需要闭合
        };
        container.addShape('rect', {
            attrs: Util.mix({
                x: points[0].x,
                y: points[0].y,
                width: points[1].x - points[0].x,
                height: points[3].y - points[0].y
            }, style)
        });
        let origin = cfg.origin._origin; // 获取对应的原始数据
        if (origin.value > 4) {
            return container.addShape('text', {
                attrs: {
                    x: (points[1].x + points[0].x) / 2,
                    y: (points[0].y + points[3].y) / 2,
                    text: origin.value,
                    fill: '#fff',
                    fontSize: 9,
                    textAlign: 'center',
                    textBaseline: 'middle'
                }
            });
        }
    }
});

//仪表盘 自定义绘制数据的的形状
Shape.registerShape('point', 'dashBoard', {
    getPoints: function getPoints(cfg) {
        let x = cfg.x;
        let y = cfg.y;

        return [{
            x: x,
            y: y
        }, {
            x: x,
            y: 0.4
        }];
    },
    draw: function draw(cfg, container) {
        let point1 = cfg.points[0];
        let point2 = cfg.points[1];
        let color = cfg.color;
        point1 = this.parsePoint(point1);
        point2 = this.parsePoint(point2);
        let line = container.addShape('Polyline', {
            attrs: {
                points: [point1, point2],
                stroke: color,
                lineWidth: 2
            }
        });

        let text = cfg.origin._origin.value.toString();
        let text1 = container.addShape('Text', {
            attrs: {
                text: text + ' T',
                x: cfg.center.x,
                y: cfg.center.y + 10,
                fill: color,
                fontSize: 24,
                textAlign: 'center',
                textBaseline: 'bottom'
            }
        });
        let text2 = container.addShape('Text', {
            attrs: {
                text: cfg.origin._origin.pointer,
                x: cfg.center.x,
                y: cfg.center.y + 60,
                fillStyle: color,
                fontSize: 18,
                textAlign: 'center',
                textBaseline: 'top'
            }
        });

        return [line, text1, text2];
    }
});

function random(lower, upper) {
    return Math.floor(Math.random() * (upper - lower)) + lower;
}
export default {
    props: {
        width: {
            type: Number,
            default: null
        },
        height: {
            type: Number,
            default: null
        },
        data: {
            type: Array,
            default() {
                return [];
            }
        },
        padding: {
            type: [String, Number, Array]
        },
        canvasStyle: {
            type: String,
            default: ''
        },
        syncY: Boolean
    },
    computed: {
        key() {
            return 'chart' + random(1, 100);
        }
    },
    data() {
        return {
            // F2: F2,
            chart: null
        };
    },
    mounted() {
        this.init(this.data);
    },
    methods: {
        init(data) {
            if (this.chart) {
                // this.chart.clear();
                this.chart.destroy();
                this.chart = null;
            }
            // 初始化
            this.chart = new F2.Chart({
                el: this.$refs.canvas,
                width: this.width,
                height: this.height,
                pixelRatio: window.devicePixelRatio,
                padding: this.padding,
                syncY: this.syncY
            });
            this.$emit('init', this.chart, data, F2);
        },
        changeData(data) {
            this.chart.changeData(data);
        },
        clearChart(){
            if(this.chart){
                this.chart.guide().clear();
                this.chart.clear();
            }
        },
        setData(that, fun, data, type='clear'){
            if(type === 'destroy'){
                this.chart = new F2.Chart({
                    el: this.$refs.canvas,
                    width: this.width,
                    height: this.height,
                    pixelRatio: window.devicePixelRatio,
                    padding: this.padding,
                    syncY: this.syncY
                });
            }
            
            if (typeof fun === 'function') {
                fun.call(that, this.chart, data, F2);
            }
        },
        destroyChart(){
            if(this.chart){
                this.chart.guide().clear();
                this.chart.clearInteraction();
                this.chart.clear();
            }
            this.chart = null;
        }

    },
    beforeDestroy() {
        if (this.chart) {
            this.chart = null;
        }
    }

};
</script>
<style lang="scss" scoped>
</style>

页面需要使用时使用import进行引入

import antvF2 from '@/components';

1、折线图

 // 可直接使用
 <antvF2 ref="lineChart" // 需要操作dom绑定
    @init="dayChartInit" // 初始化绑定事件
    :padding="['auto','auto','auto','auto']" /> // 四周padding值
    
    
    
<script>
    // 请求数据 res
    res.forEach(item => {
        newList.push({ // 可以对数据进行格式化 更好的使用
            dayId: 日期,
            value: 数量,
            type: 重量
        }, {
            dayId: 日期,
            value: 毛重,
            type: 总重
        });
    });
    this.$setChartData('lineChart', this.dayChartInit, newList); // 传入数据开始绘制折线图
    
    dayChartInit(chart, list = []) { // 执行函数绘制
        const array = [];
        let copyAarry = [...list];
        copyAarry = copyAarry.splice(copyAarry.length - 20); // 设置滑动条
        copyAarry.forEach(item => {
            array.push(item.dayId);
        });
        chart.source(list, { // 载入数据源
            dayId: {
                type: 'cat',
                values: array
            },
            value: {
                min: 0,
                tickCount: 5 //可以设置刻度的数量
            },
            '完成比': {
                min: 0,
                formatter: val => val + '%' // 设置刻度的数值和展示的数值
            }
        });
        // 定义进度条
        chart.scrollBar({
            mode: 'x', // 方向
            xStyle: {
                offsetY: -24
            }
        });
        chart.interaction('swipe'); // 开启滑动条
        chart.axis('valueC', true); // 可以设置刻度值是否展示
        chart.tooltip(true); // 开启可以展示详情内容
        chart.tooltip({ // 设置提示内容 
                showCrosshairs: true, // 是否显示提示
                showItemMarker: true, // 是否显示提示前的图标
                showXTip: false, 是否显示横坐标提示
            });
        chart.axis('dayId', {  // 对底坐标进行设置
            label: (text) => {
                const day = this.$dayjs(text);
                let val = '';
                if (day.get('day') === 0) {
                    val = '周日';
                } else {
                    val = day.get('date');
                }
                return { text: text };
            },
            label: {
                textAlign: 'start', // 底坐标文字开始的方向
                // textBaseline: 'middle', // 设置样式
                // rotate: 90 // 方向
            }
        });

        chart.legend({ // 规范数据 过滤 设置注释区域样式或者自己可定义
            custom: false,
            position: 'bottom',
            align: 'center',
            titleGap: 0
        });
        // 创建图形语法 position()里的数据决定x,y轴进行映射
        // line()图表的类型
        chart.line().position(['dayId', 'value']).color('type');


        // 绘制文本
        list.map(function (obj) {
            chart.guide().text({
                position: [obj.dayId, obj.value],
                content: obj.value,
                style: {
                    textAlign: 'center',
                    fontSize: 8
                },
                offsetY: -10
            });
        });
        chart.render(); // 返回图表
    });
</script>

各种图表绘图可参照antF2官方文档