AntV G2 自定义 饼图，折线图

应用场景：对查询数据有展示诉求，饼图展示各个模块以及总数据值，折线图以年月日为时间节点，展示当前时间下的各个字段值。

官方案例：环形饼图，基础折线图。

使用前端语言： vue 

官方文档需要静下来心来查找所应用的属性值，还是可以找到所需要的属性值的。

使用g2饼图，折线图 你需要有以下几个步骤：

1. 根据官方教程，npminstall@antv/g2

2. 引入 import { Chart } from '@antv/g2'

3.在需要展示的饼图或折线图的地方，绘制一个dom 容器。

4.在methods 里新增对应的方法。

先从饼图开始：

2. 折线图

对应饼图，折线图效果

饼图需要自定义的部分是 ，hover某个模块时配置active样式，以及总数显示和。其他的样式在官方的文档里调整部分字段就可以实现。

例如 更改环形饼图各个模块的颜色，在原有color的部分配置在数组里就可以了： 

.color('item', ['#FF662D', '#FF9F23', '#3A8FFF'])

折线图自定义曲线以及tooltip文案展示部分。

以上两部分在代码里都有体现。后续要将注释加上。

最后，在需要触发折线图和饼图渲染的部分，执行以下代码就会渲染相应的图表了。

this.$nextTick(() => {

       this.drawLine()  // 这个是定义的折线图的方法名

   })

*注：在前端多次查询和渲染图表数据时，会出现图表重复渲染的问题，这里有个解决方式，但不确定是不是最好的，如果大家有别的方式可以分享下。

document.getElementById('lineChart').innerHTML = '' 

以上是环形饼图和折线图的g2 的配置信息，大家有相同诉求的可以参考下。这里我只是用于记录下便于总结，后续还要加上slider 滑动条。