https://ext.dcloud.net.cn/plu...
因为AntV F2官方实现只有微信原生和支付宝原生,刚好我需要使用跨端小程序组件,于是我就基于AntV F2封装了一个,基于该组件的支付宝小程序已上线,可以扫码体验下。
因为防止不少人踩小程序npm的坑,我已经把最新的f2、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>
关于更多图表实例请查看:官网文档
邮箱: i@tech.top