f2.js是一个专注于移动开箱即用的可视化图表插件-BFW插件库

f2.js是一个专注于移动开箱即用的可视化图表插件

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

F2 特点
专注移动，体验优雅
围绕设计、性能以及异构环境，为用户提供移动端图表的最佳实践
图表丰富，组件完备
基于图形语法，可灵活构建各类图表（50+），组件完备，覆盖各类场景
扩展灵活，创意无限
插件机制，图形、动画、交互均可灵活扩展，使用更自由

使用方式：

第一步引入bfwone

第二步use插件及css

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["f2"], function() {
                // Any of the following formats may be used, just choose one!
                const chart = new F2.Chart({
                    id: 'myChart', // pass node's id
                    width: 375,
                    height: 260,
                    pixelRatio: window.devicePixelRatio
                });

                // const chart = new F2.Chart({
                //     el: document.getElementById('myChart'), // or pass node
                //     width: 375,
                //     height: 260,
                //     pixelRatio: window.devicePixelRatio
                // });

                // const chart = new F2.Chart({
                //     context: document.getElementById('myChart').getContext('2d'), // or pass 2d context of the canvas
                //     width: 375,
                //     height: 260,
                //     pixelRatio: window.devicePixelRatio
                // });
                const data = [{
                    genre: 'Sports', sold: 275
                },
                    {
                        genre: 'Strategy', sold: 115
                    },
                    {
                        genre: 'Action', sold: 120
                    },
                    {
                        genre: 'Shooter', sold: 350
                    },
                    {
                        genre: 'Other', sold: 150
                    },
                ];

                chart.source(data); // load the data
                chart.interval().position('genre*sold').color('genre');
                chart.render();
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <canvas id="myChart"></canvas>
</body>
</html>

官网：https://antv.gitbook.io/f2/