G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成。
特性
📦 开箱即用、默认好用的高质量统计图表
🎨 提炼自企业级产品的视觉语言和设计规范
📊 响应式图表:致力于解决图表在任何数据和显示尺寸下的基本可读性问题
🔳 图层化设计方法:在 G2Plot 体系下,图表不仅仅只是各不相关的实例,图层概念的引入提供了多图表组合叠联动,共同讲述一个数据故事的可能性
https://antv.vision/zh
https://g2plot.antv.vision/zh/docs/manual/introduction
一、基本步骤
安装g2plot
npm install @antv/g2plot --save
之后便可使用 import 或 require 进行引用:
import { Line } from '@antv/g2plot';
二、使用
step1: 创建图表容器
<a-row :gutter="2">
<a-col :span="12">
<div id="container" style="width: 100%"></div>
<div id="g2-Area" style="width: 100%"></div>
</a-col>
<a-col :span="12">
<div id="g2-Column" style="width: 100%"></div>
<div id="g2-Pie" style="width: 100%"></div>
</a-col>
</a-row>
step2: 引入数据。G2Plot 的数据源格式是 JSON 数组,数组的每个元素是一个标准 JSON 对象,部分图表除外。
step3: 创建并渲染图表
const line = new Line('container', {
data,
xField: 'year',
yField: 'value',
});
line.render();
三、完整代码
<template>
<div>
<a-card :bordered="false">
<div style="display: flex; flex-wrap: wrap">
<head-info title="参与项目" content="8" :bordered="true"/>
<head-info title="本周完成case数" content="32" :bordered="true"/>
<head-info title="团队内排名" content="3/61"/>
</div>
</a-card>
<a-row :gutter="2">
<a-col :span="12">
<div id="container" style="width: 100%"></div>
<div id="g2-Area" style="width: 100%"></div>
</a-col>
<a-col :span="12">
<div id="g2-Column" style="width: 100%"></div>
<div id="g2-Pie" style="width: 100%"></div>
</a-col>
</a-row>
</div>
</template>
<script>
//引入g2plot
import { Line, Area, Column, Pie} from '@antv/g2plot';
import HeadInfo from "@/components/tool/HeadInfo";
const data = [
{ type: '郑先森', value: 27 },
{ type: '曹先森', value: 25 },
{ type: '王先森', value: 18 },
{ type: '李先森', value: 15 },
{ type: '张先森', value: 10 },
{ type: '其他', value: 5 },
];
export default {
name: 'Demo',
components: {HeadInfo},
data() {
return {
data,
}
},
mounted() {
fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
.then((res) => res.json())
.then((data) => {
const linePlot = new Line('container', {
data,
xField: 'year',
yField: 'gdp',
seriesField: 'name',
yAxis: {
label: {
formatter: (v) => `${(v / 10e8).toFixed(1)} B`,
},
},
legend: {
position: 'top',
},
smooth: true,
// @TODO 后续会换一种动画方式
animation: {
appear: {
animation: 'path-in',
duration: 5000,
},
},
});
linePlot.render();
});
fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
.then((res) => res.json())
.then((data) => {
const area = new Area('g2-Area', {
data,
xField: 'Date',
yField: 'scales',
xAxis: {
tickCount: 5,
},
animation: false,
slider: {
start: 0.1,
end: 0.9,
trendCfg: {
isArea: true,
},
},
});
area.render();
});
fetch('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json')
.then((data) => data.json())
.then((data) => {
const stackedColumnPlot = new Column('g2-Column', {
data,
isStack: true,
xField: 'year',
yField: 'value',
seriesField: 'type',
label: {
// 可手动配置 label 数据标签位置
position: 'middle', // 'top', 'bottom', 'middle'
},
interactions: [{ type: 'active-region', enable: false }],
columnBackground: {
style: {
fill: 'rgba(0,0,0,0.1)',
},
},
})
stackedColumnPlot.render();
});
const piePlot = new Pie('g2-Pie', {
appendPadding: 10,
data,
angleField: 'value',
colorField: 'type',
radius: 1,
innerRadius: 0.6,
label: {
type: 'inner',
offset: '-50%',
content: '{value}',
style: {
textAlign: 'center',
fontSize: 14,
},
},
interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
statistic: {
title: false,
content: {
style: {
whiteSpace: 'pre-wrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
content: 'AntV\nG2Plot',
},
},
});
piePlot.render();
}
}
</script>
<style scoped>
</style>
三、效果演示
用的都是示例,需要时再调后端接口吧。。。。