vue2中使用AntV 以g2plot为实例
目录
- 使用AntV以g2plot为例
- 效果
- 代码
- antV g2的简单运用
- 安装
- 语法介绍
使用AntV以g2plot为例
效果
代码
nmp 导入:
npm install @antv/g2plot
代码:
<template> <div id="app"> <div id="container"></div> </div> </template>
<script> import { Bar } from '@antv/g2plot'; export default { name: 'App', data() { return { sj: [{ year: '1951 年', value: 38 }, { year: '1952 年', value: 52 }, { year: '1956 年', value: 61 }, { year: '1957 年', value: 145 }, { year: '1958 年', value: 48 }, ] } }, mounted() { const bar = new Bar('container', { data: this.sj, xField: 'value', yField: 'year', seriesField: 'year', legend: { position: 'top-left', }, }); bar.render(); } } </script>
<style> </style>
antV g2的简单运用
G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性。
使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
安装
npm install @antv/g2 --save
成功安装完成之后,即可使用 import 或 require 进行引用。
import { Chart } from '@antv/g2';
在绘图前我们需要为 G2 准备一个 DOM 容器:
<div id="container"></div>
数据类型和实现步骤
const data = [ { year: '1951 年', sales: 38 }, { year: '1952 年', sales: 52 }, { year: '1956 年', sales: 61 }, { year: '1957 年', sales: 145 }, { year: '1958 年', sales: 48 }, { year: '1959 年', sales: 38 }, { year: '1960 年', sales: 38 }, { year: '1962 年', sales: 38 }, ]; const chart = new Chart({ container: 'container', autoFit: true, height: 500, }); chart.data(data); chart.scale('sales', { nice: true, }); chart.tooltip({ showMarkers: false }); chart.interaction('active-region'); chart.interval().position('year*sales'); chart.render();
语法介绍
1.new Chart() 创建 Chart 图表对象,指定图表所在的容器 id、图表的宽高、边距等信息;
2.chart.data() 载入图表数据源;
3.使用图形语法进行图表的绘制;
4.chart.render() 渲染图表。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)