1.antV的引入方式
2.使用前的基本要素
3.使用的注意点
引入方式
-
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.7-beta.4/dist/g2.min.js"></script>
image.png
image.png
2.npm install @antv/g2 --save ---- import G2 from '@antv/g2';
使用基本要素
html部分
<div id="c1"></div>
js部分
1.创建 Chart 图表对象，指定图表所在的容器 ID、指定图表的宽高、边距等信息；
2.载入图表数据源；
3.使用图形语法进行图表的绘制；
4.渲染图表
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }
]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象
const chart = new G2.Chart({
container: 'c1',
width: 600,
height: 300
})
// Step 2: 载入数据源
chart.source(data);
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart.interval().position('genre*sold').color('genre')
// Step 4: 渲染图表
chart.render();
几何图形(Geom)
所谓的集合图形就是最后用chart对象生成怎样的图表，像上述interval就是生成直线统计图，除这以外，
还有好几种，这里直接上官网截图
image.png
geom对象
使用生成对应的几何图后，返回的是geom对象，这个对象有一些方法去定义图标的一些属性(官方详细介绍https://antv.alipay.com/zh-cn/g2/3.x/tutorial/attr.html)和方法
image.png
这里的方法我们只提tooltip和label
image.png
image.png
*上面的别名是给坐标轴取名字
image.png
而chart的tooltip方法这里我直接丢官方链接，因为内容比较多,反正官网的最好: https://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_tooltip
*****使用tooltip的时候要分清楚是chart对象所拥有的还是geom对象拥有的，两者不可混合,坐标轴的设置有多种形式，你还可以用axis方法专门设置
重绘我就放一些基本够用的示例代码
// chart.clear() ----我也不知道放在哪里，感觉没什么差别
chart.source(newData)
chart.repaint()
chart.interval().position('genre*sold').color('genre')
chart.render()
上面的内容已经足够基本的一个需求使用了
image.png
我根据自己的基本需求画出了基本的图，还有最常用的饼图基本同上
如果还有更多精美的要求，请查询官网G2，希望对你有帮助
