小程序跨端圖表組件，開箱即用（基於Antv F2）

https://ext.dcloud.net.cn/plu...

組件說明

由於AntV F2官方實現只有微信原生和支付寶原生，恰好我須要使用跨端小程序組件，因而我就基於AntV F2封裝了一個，基於該組件的支付寶小程序已上線，能夠掃碼體驗下。

效果圖

使用說明

由於防止很多人踩小程序npm的坑，我已經把最新的f二、f2-context打包進js_sdk（持續更新），開箱即用。

使用範例

使用圖表只須要一行代碼 <f2 :init="initChart" />

<template>
    <view class="container">
        <f2 :init="initChart" />
    </view>
</template>

<script>
    // 引入組件
    import f2 from '@/components/i-uni-f2/f2.vue'
    export default {
        components: {
            f2
        },
        methods: {
            initChart(F2, config) {
                // 實例化chart
                const chart = new F2.Chart(config)
                // 這裏按照F2的調用方式正常使用便可，支持全部圖表，如下是DEMO
                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);
                chart.interval()
                    .position('genre*sold')
                    .color('genre')
                // 渲染，而後返回chart
                chart.render()
                return chart
            }
        }
    }
</script>

<style scoped>
    .container {
        width: 100vw;
        height: 800rpx;
    }
</style>

關於更多圖表實例請查看：官網文檔

須要注意的點（重要）

1. 支付寶小程序須要開啓component2編譯（在開發者工具點擊詳情，勾上component2編譯，這裏主要是由於props：Function的綁定問題，下個版本考慮使用事件+回調方式處理下，近期更新）；
2. 官方未對微信、支付寶外的小程序平臺進行單獨的兼容處理，目前其餘小程序我使用的是針對微信的兼容方案。

有問題能夠在下面評論或者聯繫我

郵箱: i@tech.top