應用場景：對查詢數(shù)據(jù)有展示訴求，餅圖展示各個模塊以及總數(shù)據(jù)值，折線圖以年月日為時間節(jié)點，展示當前時間下的各個字段值。

官方案例：環(huán)形餅圖，基礎折線圖。

使用前端語言： vue?

官方文檔需要靜下來心來查找所應用的屬性值，還是可以找到所需要的屬性值的。

使用g2餅圖，折線圖 你需要有以下幾個步驟：

1. 根據(jù)官方教程，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樣式，以及總數(shù)顯示和。其他的樣式在官方的文檔里調整部分字段就可以實現(xiàn)。

例如 更改環(huán)形餅圖各個模塊的顏色，在原有color的部分配置在數(shù)組里就可以了：?

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

折線圖自定義曲線以及tooltip文案展示部分。

以上兩部分在代碼里都有體現(xiàn)。后續(xù)要將注釋加上。

最后，在需要觸發(fā)折線圖和餅圖渲染的部分，執(zhí)行以下代碼就會渲染相應的圖表了。

this.$nextTick(() => {

? ? ? ?this.drawLine()? // 這個是定義的折線圖的方法名

? ?})

*注：在前端多次查詢和渲染圖表數(shù)據(jù)時，會出現(xiàn)圖表重復渲染的問題，這里有個解決方式，但不確定是不是最好的，如果大家有別的方式可以分享下。

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

以上是環(huán)形餅圖和折線圖的g2 的配置信息，大家有相同訴求的可以參考下。這里我只是用于記錄下便于總結，后續(xù)還要加上slider 滑動條。