腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

vue2中使用AntV?以g2plot為實(shí)例

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

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

使用AntV以g2plot為例

效果

代碼

nmp 導(dǎo)入：

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的簡(jiǎn)單運(yùn)用

G2 是一套基于圖形語(yǔ)法理論的可視化底層引擎，以數(shù)據(jù)驅(qū)動(dòng)，提供圖形語(yǔ)法與交互語(yǔ)法，具有高度的易用性和擴(kuò)展性。

使用 G2，你可以無(wú)需關(guān)注圖表各種繁瑣的實(shí)現(xiàn)細(xì)節(jié)，一條語(yǔ)句即可使用 Canvas 或 SVG 構(gòu)建出各種各樣的可交互的統(tǒng)計(jì)圖表。

安裝

npm install @antv/g2 --save

成功安裝完成之后，即可使用 import 或 require 進(jìn)行引用。

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

在繪圖前我們需要為 G2 準(zhǔn)備一個(gè) DOM 容器：

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

數(shù)據(jù)類型和實(shí)現(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();