AntV G2的绘图流程

1.引入js库：

<!-- 引入在线资源 -->
<script type="text/javascript" src="https://unpkg.com/@antv/[email protected]/dist/g2plot.min.js"></script>
<script>
  const { Line } = G2Plot;
</script>

 

<!-- 下载到本地 引入本地脚本 -->
<script src="./g2plot.min.js"></script>
<script>
  const { Line } = G2Plot;
</script>

---

2.编写渲染容器DOM：

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

---

3.准备渲染数据：

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
];

---

4.获取渲染DOM对象：

const chartDom = document.getElementById('g2-chart');

---

5.初始化G2绘图对象（如：G2Plot.Line），配置绘图参数：

const line = new G2Plot.Line(chartDom, {绘图参数}）

---

6.调用render完成渲染

line.render();

相关参数设置链接

https://antv-g2plot.gitee.io/zh/docs/manual/introductionG2Plot教程