- 安装与引用
- chart对象的创建和基本配置
- F2各函数介绍(常用的函数与函数中常用的属性)
- source数据装载
- tooltip提示信息
- Axis坐标轴配置
- showTooltip默认激活坐标数据位置
- Geometry几何标记对象,决定了图表的类型
- Coordinate配置坐标系
- Legend图例
- Animate动画机制
- pieLabel用于绘制饼图文本的插件
- Guide绘制图表的辅助元素
1.1首先建一个uniapp项目,这里我不多做解释了
1.2其次在HBuliderX导入AntvF2封装好的组件
1.2.1HBuliderX导入地址
1.2.2页面局部引用
1、创建一个canvas元素(宽高可以在标签上设置)
2、创建一个chart对象
3.以下是之后渲染图表所用到的数据data
1.source数据装载
2.tooltip提示信息
3.Axis坐标轴配置
3.1 X轴Axis坐标配置
3.2 Y轴Axis坐标配置
4.showTooltip默认激活坐标数据位置
5.Geometry几何标记对象,决定了图表的类型
折线图
层叠图分割线为0
分组图分割线为0
6.Coordinate配置坐标系
极坐标图环形图
7.Legend图例
注: color, size 这两个图形属性如果判断接收的参数是数据源的字段时,会自动生成不同的图例
legend图例
8.Animate动画机制(一个动画效果)
具体动画效果参考F2文档
9.pieLabel用于绘制饼图文本的插件
饼状图点击激活