vue.js 가 echarts 를 통합 할 때 발생 하 는 문제 요약
최근 에 Beetlex 의 데이터 분석 플랫폼 을 만 들 고 이 제품 을 개발 하 는 과정 에서 대량의 데이터 도표 전시 기능 과 관련된다.제품 전단 에 vuejs 개발 을 사용 하기 때문에 echarts 를 통합 하 는 데 다소 문제 가 발생 할 수 있 습 니 다.여기 서 발생 하 는 문제 와 해결 방법 을 설명 합 니 다.
설명 하기 전에 실제 사용 효 과 를 공유 하 세 요.구체 적 으로 보면http://data.beetlex.io
컨트롤 ID
vuejs 에 서 는 자주 사용 하 는 기능 에 대해 구성 요 소 를 패키지 합 니 다.마찬가지 로 서로 다른 도 표를 재 활용 하기 위해 구성 요소 로 패키지 하여 사용 합 니 다.이 패 키 징 과정 에서 문제 가 존재 하 는 것 은 바로 도표 요소 DIV 의 ID 문제 이기 때문에 구성 요소 가 도표 DIV 를 구축 하 는 ID 도 유일 성 을 확보 해 야 한다.간단 한 함 수 를 봉인 하여 ID 를 생 성 할 수 있 습 니 다.
Vue.prototype.$getID = function () {
page.controlid = page.controlid + 1;
return page.controlid;
};
mounted(){
this.ChatID = "chat_" + this.$getID();
}
<div :id="ChatID">
</div>
Vuejs 를 사용 할 때 mounted()방법 에서 실 시 를 하 는 경우 가 많 지만 여기 서 echarts 를 실 시 했 을 때 주의해 야 합 니 다.mounted 는 모든 요소 가 구축 되 는 것 을 의미 하지 않 기 때문에 요 소 를 얻 는 데 실패 하여 echarts 를 초기 화 할 수 없습니다.따라서 echarts 를 한 방법 에 넣 고 상황 에 따라 수 동 으로 호출 하거나 호출 초기 화 를 지연 시 켜 야 합 니 다.편 의 를 위해 setTimeout 을 사용 하여 초기 화 했 습 니 다.
setTimeout(() => {
var dom = document.getElementById(this.ChatID);
this.Chat = echarts.init(dom, 'macarons');
this.Chat.setOption(this.ChatOption, true);
}, 300);
그래프 를 표시 전환 하려 면 v-if 와 같은 문법 을 사용 하지 않 는 것 이 좋 습 니 다.이러한 문법 은 DOM 에서 관련 요 소 를 구축 하지 않 기 때문에 echarts 가 Canvas 요 소 를 만 드 는 문제 로 인해 정상적으로 작 동 하지 못 합 니 다.가장 좋 은 방법 은 Css 를 전환 하 는 방식 으로 디 스 플레이 전환 을 하여 구 축 된 DOM 요소 의 내용 이 변경 되 지 않도록 하 는 것 입 니 다.
적응 레이아웃
창의 큰 변화 와 구성 요소 전환 후 echarts 가 현재 레이아웃 에 적응 하지 못 할 때 가 많 습 니 다.이 경우 echarts 의 resize 방법 을 수 동 으로 호출 하여 디 스 플레이 레이아웃 을 리 셋 해 야 합 니 다.실제로 SPA 응용 프로그램 에 서 는 상황 이 매우 복잡 합 니 다.전체 화면 에 창 을 바 꾸 고 구성 요소 화 후 다 차원 내장 되 어 있어 echarts 가 어디 에 사용 되 는 지 확인 하기 어렵 습 니 다.서로 다른 상황 의 수 요 를 만족 시 키 기 위해 서 는 이러한 변경 을 촉발 하 는 공공 행위 가 필요 하 다.
var __resizeHandlers = [];
function __addResizeHandler(handler) {
__resizeHandlers.push(handler);
};
function __resize() {
setTimeout(() => {
__resizeHandlers.forEach(v => {
v();
});
}, 100);
}
window.onresize = function () {
__resizeHandlers.forEach(v => {
v();
});
};
Vue.prototype.$addResize = function (handler) {
__addResizeHandler(handler);
};
Vue.prototype.$resize = function () {
__resize();
};
this.$addResize(r => {
if (this.Chat)
this.Chat.resize();
});
다음 과 같은 몇 가지 방법 으로 ECharts 를 얻 을 수 있 습 니 다.
1.Apache ECharts(incubating)홈 페이지 다운로드 인터페이스 에서 공식 소스 패 키 지 를 가 져 와 구축 합 니 다.
2,ECharts 의 GitHub 에서 가 져 옵 니 다.
3,npm 를 통 해 echarts,npm install echarts--save,
4,jsDelivr 등 CDN 도입
다음 그림 처럼 나타 나 면 성공 합 니 다.
끌어들이다
(다운로드 완료 전제)
1.구 축 된 echarts 파일 을 탭 으로 직접 도입 합 니 다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- ECharts -->
<script src="echarts.min.js"></script>
</head>
</html>
vue 의 main.js 에서
// echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts(다른 구성 요소 에서 echarts 를 사용 하려 면 다시 도입 해 야 합 니 다)
import echarts from “echarts”;vue.js 통합 echarts 에 문제 가 있 는 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue.js 통합 echarts 문제 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
