AntV使用方法详解

AndyVibes

已于 2022-05-13 09:24:52 修改

阅读量3.5w

点赞数 7

CC 4.0 BY-SA版权

文章标签：数据可视化

于 2021-08-18 11:56:28 首次发布

本文链接：https://blog.csdn.net/weixin_44793569/article/details/119776136

AntV 是一款强大的数据可视化工具，提供G2、F2、G6、X6、L7和AVA等多个模块，覆盖从移动端到地理空间数据的全方位解决方案。通过简单安装和使用，如在Vue项目中挂载G2，或者直接使用HTML代码，可以快速实现数据图表的创建和定制，让数据可视化变得轻松高效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AntV是一个数据可视化的工具，可以方便的创建图表或者其他图形，让我们的页面开发比较轻松的让数据可视化。

AntV | 蚂蚁数据可视化

进入网站有六个模块

数据驱动，高度易用，可扩展的可视化图形语法。

专注于移动端的可视化解决方案，兼容 H5/小程序/Weex 等多端环境

便捷的关系数据可视化引擎与图分析工具。

极易定制、开箱即用、数据驱动的图编辑引擎

高性能/高渲染质量的地理空间数据可视化框架。

AVA

AVA 是为了更简便的可视分析而生的技术框架。

举例G2

点进去是个这样的界面，用之前先想好数据需要一个怎样的图表

安装

VUE

1.首先安装antv/g2

yarn add @antv/g2 --save

2.在main.js中挂在到vue原型实例中

const G2 = require('@antv/g2')
Vue.prototype.$G2 = G2

HTML

$ npm install @antv/g2plot

使用

<div id="container"></div>

html直接复制antv提供的代码就可了，修改样式即可

VUE需要一定的修改

比如：

import { Bar } from '@antv/g2plot';

const data = [
  { year: '1951 年', value: 38 },
  { year: '1952 年', value: 52 },
  { year: '1956 年', value: 61 },
  { year: '1957 年', value: 145 },
  { year: '1958 年', value: 48 },
];

const bar = new Bar('container', {
  data,
  xField: 'value',
  yField: 'year',
  seriesField: 'year',
  legend: {
    position: 'top-left',
  },
});

bar.render();

修改成为

import { Bar, Plot } from '@antv/g2plot';
import { ref, onMounted, onUnmounted } from "vue";

export default{
  name:"demo",
  
  setup(){
const root = ref(null);
let Bar =null;

let data_column =ref([]);
    const loadData =async()=>{
      data.value = [
  { year: '1951 年', value: 38 },
  { year: '1952 年', value: 52 },
  { year: '1956 年', value: 61 },
  { year: '1957 年', value: 145 },
  { year: '1958 年', value: 48 },
  
];
    };
const initChart = () =>{
  plot = new Bar(root.value,{
    data:data_column.value,
    legend:{
      position: 'top-left',
      itemName:{
        style:{
          fill:"#FFFFFF",
          fontFamily:"TencentSans",
          fontSize:14,
        },
      },
    },
    xField: 'value',
    yField: 'year',
    seriesField: 'year',
    });
    bar.render();
    };
     onMounted(async () => {
      await loadData();
      initChart();
    });
        onUnmounted(() => {
      if (plot != null) {
        plot.destroy();
      }
    });
        return {
      root,
    };
  },
};

就行