vue 에서 G2 도표 의 예제 코드 를 사용 합 니 다.

G2 노트
G2 는 개미 골 드 웨 어의 오픈 소스 그래프 플러그 인 으로 프로젝트 를 연구 해 봐 야 하기 때문에 Echarts 에 비해 G2 문 서 는 이해 하기 어렵 고 인터넷 에 도 예시 가 많 지 않 기 때문에 G2 를 사용 하 는 데 발생 하 는 문 제 를 기록 합 니 다.
공식 적 으로 vue 프로젝트 에서 Viser 를 사용 하 는 것 을 추 천 했 습 니 다.G2 를 포장 하여 사용 하기에 더욱 편리 할 수 있 습 니 다.그리고 하나의 Viser 를 연 구 했 습 니 다.그 결과 Viser 는 전체적으로 viser-react 를 어떻게 사용 하 는 지 에 대해 소 개 했 습 니 다.viser-vue 를 가 져 왔 습 니 다.홈 페이지 는 이렇게 소 개 했 습 니 다.
우 리 는 viser-react 를 예 로 들 어 chore 그림 을 예 로 들 면 viser-vue 와 viser-ng 의 용법 이 유사 하 다.
결 과 를 사용 할 때 이 차이 점 이 너무 크다 는 것 을 알 게 되 었 습 니 다.(github 에서 issue 를 찾 으 면 얻 은 것 도 있 지만 제품 의 수요 에 맞 는 도형 을 어떻게 맞 추 는 지 모 르 겠 습 니 다.문 서 를 뜯 어 먹고 G2 와 Viser 의 문 서 를 비교 해 야 합 니 다.마지막 으로 결론 을 얻 을 수 있 습 니 다.
vue 에서 직접 G2 를 사용 하 는 것 이 viser-vue 를 사용 하 는 것 보다 편리 합 니 다.(viser-vue 는 문서 가 하나 도 없 기 때 문 입 니 다!)
G2 를 모 르 면 viser-vue 는 돌 릴 수 없 기 때문에 G2 를 먼저 말 하 는 것 이 좋 습 니 다.
1.vue 에서 G2 를 직접 사용
설치 하 다.

npm install @antv/g2
npm install @antv/data-set

DataSet 은 G2 의 데이터 처리 모듈 입 니 다.
파일 참조

import G2 from '@antv/g2'
import { View } from '@antv/data-set'

도표 만 들 기
먼저 도표 용 기 를 만 듭 니 다.

<div id="funnelNode" ></div>

그 다음 에 chart 대상 을 예화 하고 홈 페이지 예제 코드 를 참고 하 며 여기 서 설정 속성 을 어떻게 수정 하여 수요 에 맞 는 도형 을 만 드 는 지 기록 합 니 다.

깔때기 그림 은 기본 깔때기 그림(바닥 은 사각형)과 뾰족 한 깔때기 그림 으로 나 뉘 는데 이들 이 사용 할 때의 차 이 는 실례 화 도표 시 기하학 적 표기 대상 Geom 의 shape()방법 이 고 shape(funnel)는 기본 깔때기 를 나타 내 며 shape(pyramid)는 뾰족 한 깔때기 를 나타 낸다.(((()4567915) ）

도표 의 사건 처리https://www.yuque.com/antv/g2-docs/api-geom에 대해 공식 문서 에 상세 하 게 소개 되 어 있 습 니 다.여 기 는 깔때기 그림 클릭 사건 바 인 딩 방법 만 소개 합 니 다.다음 과 같 습 니 다.

 chart.on('interval:click', ev => {
  //        
 })

여기 서 interval:click 을 사용 하 는 것 은 깔때기 그림 에 대응 하 는 geom 형식 이 intervalhttps://www.yuque.com/antv/g2-docs/tutorial-chart-event이기 때 문 입 니 다.
2.vue 에서 viser-vue 사용 하기:
설치 하 다.

npm install viser-vue
npm install @antv/data-set

전역 참조

import Viser from 'viser-vue'
Vue.use(Viser)

도표 그리 기(깔때기 그림 을 예 로 들 면)
Viser 홈 페이지 는 기본 깔때기 그림(사실은 뾰족 한 바닥 깔때기 그림)의 예 를 주 었 습 니 다.먼저 이 를 실제 기초 깔때기 그림(깔때기 밑부분 은 사각형)으로 바 꾸 고 예제 코드 의라벨 을태그 로 바 꾸 는 것 입 니 다.G2 에서'funnel'은 기본 깔때기 를 대표 하고'pyramid'는 뾰족 한 바닥 깔때기 를 대표 하 며 Viser 가 포장 할 때 도 이 를 바탕 으로 하기 때 문 입 니 다.
교체 전:

 <v-pyramid
  :position="funnelOpts.position"
  :color="funnelOpts.color"
  ...
 />

교체 후:

 <v-funnel
  :position="funnelOpts.position"
  :color="funnelOpts.color"
  ...
 />

이벤트 클릭 이 필요 하 다 면탭 에서 사용:on-click 바 인 딩 이벤트.
나의 github 프로젝트 주소:https://www.yuque.com/antv/g2-docs/tutorial-geom안에 상세 한 예 가 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.