更新记录
0.0.4(2022-11-06) 下载此版本
- chore: 更新文档
0.0.3(2022-11-06) 下载此版本
- chore: 更新文档
0.0.2(2022-11-06) 下载此版本
- chore: 更新文档
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
× | √ | - | √ | √ | × | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
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
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | canvas类型,2d |
string | 2d |
isDisableScroll | 触摸cavnas是否禁止屏幕滚动以及下拉刷新 | boolean | false |
打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。