应用场景：对查询数据有展示诉求，饼图展示各个模块以及总数据值，折线图以年月日为时间节点，展示当前时间下的各个字段值。
官方案例：环形饼图，基础折线图。
使用前端语言： vue
官方文档需要静下来心来查找所应用的属性值，还是可以找到所需要的属性值的。
使用g2饼图，折线图 你需要有以下几个步骤：
1. 根据官方教程，npminstall@antv/g2
2. 引入 import { Chart } from '@antv/g2'
3.在需要展示的饼图或折线图的地方，绘制一个dom 容器。
<div id="pieChart" class="pie-local"></div>
<div id="lineChart"></div>
4.在methods 里新增对应的方法。
先从饼图开始：
2. 折线图
对应饼图，折线图效果
饼图需要自定义的部分是 ，hover某个模块时配置active样式，以及总数显示和。其他的样式在官方的文档里调整部分字段就可以实现。
例如 更改环形饼图各个模块的颜色，在原有color的部分配置在数组里就可以了：
.color('item', ['#FF662D', '#FF9F23', '#3A8FFF'])
折线图自定义曲线以及tooltip文案展示部分。
以上两部分在代码里都有体现。后续要将注释加上。
最后，在需要触发折线图和饼图渲染的部分，执行以下代码就会渲染相应的图表了。
this.$nextTick(() => {
this.drawLine() // 这个是定义的折线图的方法名
})
*注：在前端多次查询和渲染图表数据时，会出现图表重复渲染的问题，这里有个解决方式，但不确定是不是最好的，如果大家有别的方式可以分享下。
document.getElementById('lineChart').innerHTML = ''
以上是环形饼图和折线图的g2 的配置信息，大家有相同诉求的可以参考下。这里我只是用于记录下便于总结，后续还要加上slider 滑动条。
网友评论