初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828

概述

F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex），完备的图形语法理论，满足你的各种可视化需求，专业的移动设计指引为你带来最佳的移动端图表体验。

官网： https://antv.alipay.com/zh-cn/f2/3.x/
demo： https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html
api文档：https://www.yuque.com/antv/f2/api-index

vue中使用

1、安装

cnpm i @antv/f2 --save

2、引入

import F2 from "@antv/f2";

示例

1、饼状图

<template>
    <div class="box">
        <div class="chart">
            <canvas id="mountNode"></canvas>
        </div>
    </div>
</template>
 
<script>
import F2 from "@antv/f2"; //引入插件
export default {
    components: {},
    data() {
        return {};
    },
    mounted() {
        this.showChart();
    },
    methods: {
        // 图表数据初始化
        showChart() {
            var data = [
                {
                    name: "股票类",
                    percent: 83.59,
                    a: "1"
                },
                {
                    name: "债券类",
                    percent: 2.17,
                    a: "1"
                },
                {
                    name: "现金类",
                    percent: 14.24,
                    a: "1"
                }
            ];

            var map = {};
            data.map(function(obj) {
                map[obj.name] = obj.percent + "%";
            });

            var chart = new F2.Chart({
                id: "mountNode",
                pixelRatio: window.devicePixelRatio,
                padding: [20, "auto"]
            });
            chart.source(data, {
                percent: {
                    formatter: function formatter(val) {
                        return val + "%";
                    }
                }
            });
            chart.tooltip(false);
            chart.legend({
                position: "right",
                itemFormatter: function itemFormatter(val) {
                    return val + "    " + map[val];
                }
            });
            chart.coord("polar", {
                transposed: true,
                innerRadius: 0.7,
                radius: 0.85
            });
            chart.axis(false);
            chart
                .interval()
                .position("a*percent")
                .color("name", ["#FE5D4D", "#3BA4FF", "#737DDE"])
                .adjust("stack");

            chart.guide().html({
                position: ["50%", "45%"],
                html:
                    '<div style="width: 250px;height: 40px;text-align: center;">' +
                    '<div style="font-size: 16px">总资产</div>' +
                    '<div style="font-size: 24px">133.08 亿</div>' +
                    "</div>"
            });
            chart.render();
        }
    }
};
</script>
 
<style>
</style>

效果：

2、折线图

<template>
    <div class="box">
        <div class="chart">
            <canvas id="mountNode"></canvas>
        </div>
    </div>
</template>
 
<script>
import F2 from "@antv/f2"; //引入插件
export default {
    components: {},
    data() {
        return {};
    },
    mounted() {
        this.showChart();
    },
    methods: {
        // 图表数据初始化
        showChart() {
            var data = [
                {
                    date: "2017-06-16",
                    value: 139
                },
                {
                    date: "2017-06-17",
                    value: 115
                },
                {
                    date: "2017-06-18",
                    value: 111
                },
                {
                    date: "2017-06-19",
                    value: 309
                },
                {
                    date: "2017-06-20",
                    value: 206
                },
                {
                    date: "2017-06-21",
                    value: 137
                },
                {
                    date: "2017-06-22",
                    value: 128
                },
                {
                    date: "2017-06-23",
                    value: 85
                },
                {
                    date: "2017-06-24",
                    value: 94
                },
                {
                    date: "2017-06-25",
                    value: 71
                },
                {
                    date: "2017-06-26",
                    value: 106
                },
                {
                    date: "2017-06-27",
                    value: 84
                },
                {
                    date: "2017-06-28",
                    value: 93
                },
                {
                    date: "2017-06-29",
                    value: 85
                },
                {
                    date: "2017-06-30",
                    value: 73
                },
                {
                    date: "2017-07-01",
                    value: 83
                },
                {
                    date: "2017-07-02",
                    value: 125
                },
                {
                    date: "2017-07-03",
                    value: 107
                },
                {
                    date: "2017-07-04",
                    value: 82
                },
                {
                    date: "2017-07-05",
                    value: 44
                },
                {
                    date: "2017-07-06",
                    value: 72
                },
                {
                    date: "2017-07-07",
                    value: 106
                },
                {
                    date: "2017-07-08",
                    value: 107
                },
                {
                    date: "2017-07-09",
                    value: 66
                },
                {
                    date: "2017-07-10",
                    value: 91
                },
                {
                    date: "2017-07-11",
                    value: 92
                },
                {
                    date: "2017-07-12",
                    value: 113
                },
                {
                    date: "2017-07-13",
                    value: 107
                },
                {
                    date: "2017-07-14",
                    value: 131
                },
                {
                    date: "2017-07-15",
                    value: 111
                },
                {
                    date: "2017-07-16",
                    value: 64
                },
                {
                    date: "2017-07-17",
                    value: 69
                },
                {
                    date: "2017-07-18",
                    value: 88
                },
                {
                    date: "2017-07-19",
                    value: 77
                },
                {
                    date: "2017-07-20",
                    value: 83
                },
                {
                    date: "2017-07-21",
                    value: 111
                },
                {
                    date: "2017-07-22",
                    value: 57
                },
                {
                    date: "2017-07-23",
                    value: 55
                },
                {
                    date: "2017-07-26",
                    value: 60
                }
            ];
            var chart = new F2.Chart({
                id: "mountNode",
                pixelRatio: window.devicePixelRatio
            });

            chart.source(data, {
                value: {
                    tickCount: 5,
                    min: 0
                },
                date: {
                    type: "timeCat",
                    range: [0, 1],
                    tickCount: 3
                }
            });
            chart.tooltip({
                custom: true,
                showXTip: true,
                showYTip: true,
                snap: true,
                crosshairsType: "xy",
                crosshairsStyle: {
                    lineDash: [2]
                }
            });
            chart.axis("date", {
                label: function label(text, index, total) {
                    var textCfg = {};
                    if (index === 0) {
                        textCfg.textAlign = "left";
                    } else if (index === total - 1) {
                        textCfg.textAlign = "right";
                    }
                    return textCfg;
                }
            });
            chart
                .line()
                .position("date*value")
                .style({
                    stroke: "#FF642C",
                    lineWidth: 1
                });
            chart.render();
        }
    }
};
</script>
 
<style>
#mountNode {
    width: 100%;
    height: 260px;
}
</style>

效果：