更新记录

0.0.4（2022-11-06）

• chore: 更新文档

0.0.3（2022-11-06）

• chore: 更新文档

0.0.2（2022-11-06）

• chore: 更新文档

平台兼容性

lime-antvF2

• 基于uniapp vue3 及 antv f2 v4版本
• Q群 1046793420
• 官方文档

温馨提示

• antv f2上手难道有点大，谨慎使用！！！！！
• 官方示例使用JSX，若要在插件上用需要手动转成vnode
• 不支持 nvue
• 优点是图表体积比较小

安装

• 第一步、导入插件
• 第二步、安装f2

npm install @antv/f2 --save

使用

<view style="width: 100%; height:500rpx">
    <l-antv-f2 ref="chartRef"></l-antv-f2> 
</view>

    import {createElement as c, Chart, Canvas, Axis, Interval, Tooltip, Legend } from '@antv/f2';
    import {ref,onMounted} from 'vue'

    const data = [
        {
            genre: 'Sports',
            sold: 275
        }, {
            genre: 'Strategy',
            sold: 115
        }, {
            genre: 'Action',
            sold: 120
        }, {
            genre: 'Shooter',
            sold: 350
        }, {
            genre: 'Other',
            sold: 150
        }];

    const chartRef = ref(null)

    const chart = (({data}) => {
        return c(Chart, {
            data,
            children: [
                c(Axis, {
                    field: "genre"
                }), 
                c(Axis, {
                    field: "sold"
                }), 
                c(Interval, {
                    x: "genre",
                    y: "sold",
                    color: "genre",
                    selection: {
                        selectedStyle: {
                            fillOpacity: 1
                        },
                        unSelectedStyle: {
                            fillOpacity: 0.4
                        }
                    }
                }),
                c(Tooltip),
                c(Legend)
            ]
        });
    });

    const renderChart = (data) => {
        return c(chart, {
            data
        });
    }

    onMounted(() => {
        // 初始化
        // 需要把 F2 的 Canvas 传入
        chartRef.value.render(Canvas, {
            children: renderChart(data)
        })
    })

数据更新

chartRef.value.update({
    children: renderChart(data)
})

查看示例

导入后直接使用这个标签查看演示效果，

// 代码位于 uni_modules/lime-antvF2/compoents/lime-antvF2
<lime-antvF2 />

插件标签

• 默认 l-antv-f2 为 components
• 默认 lime-antvF2 为 demo

API

Props

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。