vue2中使用AntV?以g2plot為實例

更新時間：2022年04月28日 10:04:03 作者：cmmboy1990

這篇文章主要介紹了vue2中使用AntV?以g2plot為實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用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 是一套基于圖形語法理論的可視化底層引擎，以數(shù)據(jù)驅動，提供圖形語法與交互語法，具有高度的易用性和擴展性。

使用 G2，你可以無需關注圖表各種繁瑣的實現(xiàn)細節(jié)，一條語句即可使用 Canvas 或 SVG 構建出各種各樣的可交互的統(tǒng)計圖表。

安裝

npm install @antv/g2 --save

成功安裝完成之后，即可使用 import 或 require 進行引用。

import { Chart } from '@antv/g2';

在繪圖前我們需要為 G2 準備一個 DOM 容器：

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

數(shù)據(jù)類型和實現(xiàn)步驟

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();