antV蚂蚁可视化简单使用

F2|F6--移动端

安装与引入

#安装
npm install @antv/f2 --save

#引入
main.js
// 引入f2(图表组件)
const F2 = require('@antv/f2/lib/core');
require('@antv/f2/lib/geom/line'); // 只加载折线图
require('@antv/f2/lib/geom/interval'); // 只加载柱状图
require('@antv/f2/lib/geom/point'); // 只加载点图
require('@antv/f2/lib/interaction/'); // 引入所有的交互行为
require('@antv/f2/lib/component/guide/text'); // 只加载 Guide.Text 组件
require('@antv/f2/lib/component/guide/line'); // 只加载 Guide.Line 组件
// 第一步：加载插件 Tooltip
const Tooltip = require('@antv/f2/lib/plugin/tooltip');
const Legend = require('@antv/f2/lib/plugin/legend');
const Guide = require('@antv/f2/lib/plugin/guide');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
// 第二步：注册插件 Legend
F2.Chart.plugins.register(Tooltip);
F2.Chart.plugins.register(Legend);
F2.Chart.plugins.register(Guide);
F2.Chart.plugins.register(ScrollBar);

简单使用

#使用
`1.创建canvas标签`
<canvas id="container"></canvas>
`2.创建 Chart 对象`
const chart = new F2.Chart({
        id: 'container',
        pixelRatio: window.devicePixelRatio,// 指定分辨率
        padding: 'auto',
});
`3. 载入数据源`
chart.source(data,defs) //第一个参数为数据源，第二个参数为度量，defs为一个对象
eg:
data = [
  { a: 'a', b: 20 },
  { a: 'b', b: 12 },
  { a: 'c', b: 8 },
];
*defs配置项  
{
	参数a:{//参数a为data中某个参数
       type:'cat',//声明字段a的类型 timeCat(时间分类类型)、identity、linear、cat
       formatter:fn(),//用于格式化坐标轴刻度点的文本显示
       range:[0,1],//输出数据的范围，数值类型的默认值为 [0, 1]，格式为 [min, max] 
       alias:'string',//数据字段的显示别名
       tickCount:Number,//坐标轴上刻度点的个数   
       ...   
    },
    参数b:{
       ...同上
    }    
}

`4.数据文字提示处理`
chart.tooltip({
        showItemMarker: true, // 是否展示每条记录项前面的 marker
        showTitle: true, // 展示  tooltip 的标题
        showCrosshairs: true,
        titleStyle: {
          fontSize: 16,
        }, // tooltip 标题的文本样式配置，showTitle 为 false 时不生效
        valueStyle: {
          fontSize: 18,
        }, // tooltip value 项的文本样式配置
      });
    
`5.创建图形语法---chart.几何类型().图形属性(fields[, callback]);`
 chart.line().position('publishTime*indexValue');
 //几何标记
 1.geomType--- chart.`line()`.position('publishTime*indexValue');
 	(1)line()---折线图、曲线图 
 	(2)path()---路径图
 	(3)point()---点图、气泡图、散点图
 	(4)area()---区域图
 	(5)interval()---柱状图、分组柱状图、瀑布图、层叠柱状图、百分比层叠柱状图、直方图、南丁格尔玫瑰图、饼图、条形环图（玉缺图）、漏斗图 等
 	(6)polygon()---色块图、地图 
 	(7)schema()---k 线图
 //属性属性   
 2.geomType--- chart.line().`position('publishTime*indexValue')`;
    (1)position位置属性映射，用于确定由数据中的哪几个字段来确定数据在平面坐标系的位置 确定X轴和Y轴
    (2)color() 颜色映射
    
`6.渲染图表`
 chart.render();

G2--PC端