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

이 글은 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!