更新记录

0.5.6(2022-07-07)

  • fix: 修复 transform 报错

0.5.5(2022-07-06)

  • feat: nvue 本地化
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × ×

F2 图表 👑👑👑👑👑 全端

F2,一个专注于移动,开箱即用的可视化解决方案 查看更多 站点2 | 查看更多 站点2
基于antv F2 做了兼容处理,更多示例请访问 uni示例 站点1 | uni示例 站点2 | 官方示例
Q群:1046793420

因F2官方antv F2 升级到了 4.X,本插件是基于3.X,如果有BUG官方估计也不会维护,故不再推荐使用本插件。当然如果您执意要用,也不是不行。有BUG请去官方F2 github提。

平台兼容

H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ 小程序 App
  • 注意
  • 🔔 插件用到了 css 预编译器 stylus 请安装
  • 🔔 需要hbx 3.4.10及以上版本

安装

1、在uniapp 插件市场 找到 蚂蚁图表 导入即可 2、安装 f2

npm install @antv/f2@3.8.10

代码演示

基础用法

通过ref获取节点组件内部init方法生成图表

<view style="width: 100%; height:500rpx"><l-f2 ref="chart"></l-f2></view>
// 非 nvue 页面需要引进
import F2 from '@antv/f2';
export default {
    data() {
        return {
            baseData: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
        };
    },
    mounted() {
        this.$refs.chart.init(config => {
            const chart = new F2.Chart(config);
            chart.source(this.baseData);
            chart
                .interval()
                .position('genre*sold')
                .color('genre');
            chart.render();
            // 需要把 chart 返回
            return chart;
        });
    }
}

图饼

图饼示例,更多用法和示例请访问F2 示例

<view style="width: 100%; height:500rpx"><l-f2 ref="chart"></l-f2></view>
data() {
    return {
        pieMap: {
            '芳华': '40%',
            '妖猫传': '20%',
            '机器之血': '18%',
            '心理罪': '15%',
            '寻梦环游记': '5%',
            '其他': '2%'
          },
        pieData: [
            {
                name: '芳华',
                percent: 0.4,
                a: '1'
            },
            {
                name: '妖猫传',
                percent: 0.2,
                a: '1'
            },
            {
                name: '机器之血',
                percent: 0.18,
                a: '1'
            },
            {
                name: '心理罪',
                percent: 0.15,
                a: '1'
            },
            {
                name: '寻梦环游记',
                percent: 0.05,
                a: '1'
            },
            {
                name: '其他',
                percent: 0.02,
                a: '1'
            }
        ]
    };
},
mounted() {
    this.$refs.chart.init(config => {
        const chart = new F2.Chart(config);
        chart.source(this.pieData, {
            percent: {
                formatter:  val => val * 100 + '%';
            }
        });
        chart.legend({
            position: 'right',
            itemFormatter: val =>  val + '  ' + this.pieMap[val]; 
        });
        chart.tooltip(false);
        chart.coord('polar', {
            transposed: true,
            radius: 0.85
        });
        chart.axis(false);
        chart
            .interval()
            .position('a*percent')
            .color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'])
            .adjust('stack')
            .style({
                lineWidth: 1,
                stroke: '#fff',
                lineJoin: 'round',
                lineCap: 'round'
            })
            .animate({
                appear: {
                    duration: 1200,
                    easing: 'bounceOut'
                }
            });
        chart.render();
        // 需要把 chart 返回
        return chart;
    });
}

数据更新

F2 更新数据的方式有三种:

1、通过 ref 获取组件实例,使用内部方法changeData(newData)更新数据

  • 前后数据结构不发生变化,需要马上更新图表。
    this.$refs.chart.changeData(newData)

2、如果仅仅是更新数据,而不需要马上更新图表,

  • 前后数据结构不发生变化,不需要立即更新数据
this.$refs.chart.source(newData)
// do something
this.$refs.chart.repaint(); 

3、更新数据时还可以清除图表上的所有元素,重新定义图形语法,改变图表类型和各种配置。

  • 前后数据结构发生变化 或 需要更改text等元素。
this.$refs.chart.reset(chart => {
        const baseData = [{ genre: '成犬粮', sold: 375 }, { genre: '化毛膏', sold: 15 }, { genre: '益生菌', sold: 20 }, { genre: '氨糖', sold: 240 }, { genre: '其它', sold: 150 }];
        chart.clear() // 清理所有
        chart.source(baseData); // 加载新数据
        chart.interval().position('genre*sold').color('sold'); // 重新定义图形语法
        chart.render();
        return chart;
    })
}); 

Nvue

本插件通过webview组件使得 antv F2 能在nvue里使用。

  • 温馨提示
  • 🔔 Nvue 是指 app nvue,非使用nvue打包到小程序 h5等平台。
  • 🛡 不需要引进F2,但需求引入插件
  • ⚙️ 在函数外面的数据需要通过init方法的第二个参数传递数据
<view class="f2"><l-f2 ref="chart"></l-f2></view>
export default {
    data() {
        return {
            baseData: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
        }
    },
    mounted() {
        this.$refs.chart.init(config => {
            const chart = new F2.Chart(config);
            // 在函数外面的数据,需要在第二个参数传进去。
            // 数据名保持跟this里的一致
            chart.source(baseData);
            chart
                .interval()
                .position('genre*sold')
                .color('genre');
            chart.render();
            return chart;
        },
        // 在函数外面的数据需要传进组件
        {baseData: this.baseData}
        );
    }
}

Nvue 使用注意事项

  • 由于 nvue 使用的是字符串模板传输,打包的时候会被混淆压缩
  • 所在要保持 关键词 不被 混淆压缩

1、F2、DataSet 不需要被引入

👎 错误

import F2 from '@antv/f2';
import DataSet from '@/antv/DataSet'
export default {
    ...code
}

👍 正确

export default {
    ...code
}

2、引用函数外面数据的关键词不需要声明

👎 错误

const {data} = this
this.$refs.chart.init(config => {
    chart.source(data);
})

👍 正确

// 所有用函数外里的数据,只要保持跟 this 里的一致
this.$refs.chart.init(config => {
    chart.source(data);
})

- or -

this.$refs.chart.init(config => {
    chart.source(this.data);
})

3、引用函数外面的数据需要通过params或函数的第二个参数传递

👎 错误

<l-f2 />

- or -

this.$refs.chart.init(config => {...code})

👍 正确

<l-f2 :params="{data}"/>

- or -

this.$refs.chart.init(config => {...code}, {data: this.data})

不支持的功能

  • 目前由于小程序不支持 document,所以 Guide.Html 辅助元素组件目前仍无法使用,其他 F2 的功能全部支持。
  • Nvue是通过webview实现的,所以它不受影响!
  • H5 uni官方 canvas 模拟了 小程序 所以也不支持 。
  • 缩放手势暂时不支持,因为原厂也不支持小程序,将来如果有需要考虑修改源码。
  • 词云只支持H5。

Props

参数 说明 类型 默认值 版本
custom-style 自定义样式 string - -
webviewStyles 仅针对nvue的webview设置样式 object - -
type canvas 类型 2d 仅针对微信和头条有效 string 2d 0.3.0
is-disable-scroll 触摸图表时是否禁止页面滚动 boolean false

事件

参数 说明
init(callback, data) callback: 回调函数 data: nvue 如果使用了外部数据,需要传递
changeData(data) 更新数据 ,传递是数据数组
clear() 清除所有
destroy() 销毁实例
repaint() 用于暂时只更新数据,等需要时再调用重绘
reset(callback, data) 重新定义图形语法,改变图表类型和各种配置, callback: 回调函数 data: nvue 如果使用了外部数据,需要传递
canvasToTempFilePath(opt) 用于生成图片

打赏

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

输入图片说明

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问