G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"G2Plot"中的 G2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。
特性
- 📦 开箱即用、默认好用的高质量统计图表
- 🎨 提炼自企业级产品的视觉语言和设计规范
- 📊 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题
- 🔳 图层化设计方法：在 G2Plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性
安装
$ npm install @antv/g2plot
实际项目中使用示例
一直纠结异步请求数据不显示，研究两天各种视频，各种Issues，最后发现 xField: 'label',yField: 'value'这两个参数没改！囧~~~~~~
<script lang="ts" setup>
import { Column} from "@antv/g2plot";
import {onMounted, ref} from "vue";
import order from "../../../api/order";
let data = ref([])
const render = (change?: boolean) => {
const plot = new Column('column-min', {
data: data.value,
xField: 'label',
yField: 'value',
padding: [5, -10,0, -10],
xAxis: {
label: null,
line: null
},
yAxis: {
label: null,
line: null,
grid: null
},
meta: {
label: {alias: '月份'},
value: {alias: '销售额'}
},
});
plot.render()
}
const getData = async () => {
let res:any = await order.overview({name: 'sales', action: 'year', month: 3, year: 2022})
if(res.code === 200){
data.value = res.data
render()
}
}
onMounted(() => {
getData()
})
</script>
