> 웹 프론트엔드 > JS 튜토리얼 > vue에서 echarts3.0 적응형을 사용하는 방법은 무엇입니까?

vue에서 echarts3.0 적응형을 사용하는 방법은 무엇입니까?

亚连
풀어 주다: 2018-06-04 13:56:27
원래의
2282명이 탐색했습니다.

이 글은 주로 Vue의 echarts3.0 적용을 소개하고 있습니다.

프런트엔드 시간에 Vue 프로젝트를 진행하고 있었는데 Echart가 다음과 같이 On Demand로 도입되었습니다.

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入折线图
import 'echarts/lib/chart/line'
// 引入提示框和图例组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legendScroll'
로그인 후 복사

그러다가 브라우저 창을 확대하면 꺾은선형 차트가 적용되지 않는 것을 발견했습니다. 해결하는 데 시간이 좀 걸렸습니다. 친구 여러분,

첫 번째 유형: 브라우저 적응

패스:

myChart.setOption 뒤에

window.onresize = myChart.resize;
로그인 후 복사

를 추가하세요

그래픽이 여러 개인 경우 방법:

mounted(){ 
this.changEcharts(); 
}, 
methods:{ 
changEcharts() { 
window.addEventListener('resize', ()=> { 
this.drawLineDom.resize(); 
this.todayFlowDom.resize(); 
this.hitRateDom.resize();});};},} 
this.drawLineDom = this.$echarts.init(document.getElementById('chart-bandwidth'));
로그인 후 복사
두 번째 경우, p 크기 변화에 따라 적응됨

vue에서는 p 크기 변화를 실시간으로 모니터링할 수 없기 때문에 버튼을 정의하고 버튼 값이 변경되면 크기를 조정합니다.

import { mapState }from'vuex'; 
computed: mapState({isCollapse:'isCollapse',//这里我是语用的vuex保存的变量,可以不用vuex,我是因为组件之间的通讯}), 
watch: { 
isCollapse() { // 注意一定不要用箭头函数,会获取不到this 
setTimeout(() => { 
this.drawLineDom.resize(); 
this.todayFlowDom.resize(); 
this.hitRateDom.resize(); 
}, 500);},},
로그인 후 복사

사실 저는 이것을 네비게이션으로 사용합니다. 스케일링을 하면 p의 크기가 변하기 때문에 이렇게 reszie를 실행하면 완벽하게 적응할 수 있습니다. 위의 내용은 모두에게 도움이 되기를 바랍니다. 미래에.

관련 기사:

vue 슬롯의 하위 구성 요소에 있는 상위 구성 요소에 의해 전달된 템플릿을 표시하는 방법(자세한 튜토리얼)


vue를 사용하여 확대/축소, 축소 및 회전을 달성하면서 이미지를 자르는 방법 함수(세부 튜토리얼)


React 컴포넌트 성능 최적화에 대한 자세한 설명


위 내용은 vue에서 echarts3.0 적응형을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿