What are the ways to use echarts3.0 adaptive in vue?

This article mainly introduces echarts3.0 adaptation in vue. Now I share it with you and give you a reference.

During the front-end time, I was working on a vue project. Echart was introduced on demand as follows:

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

Then I found that the line chart would not adapt when the browser window was zoomed in. It took a while. I just solved it and recorded it for friends who need it,

The first type: Browser adaptation

Passed:

In myChart Add

window.onresize = myChart.resize;

after .setOption. If there are multiple graphics, they can be encapsulated into a method:

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'));

In the second case, it is adapted according to the change of p size

Because vue cannot monitor p size changes in real time, I defined a button. When the value of the button changes, resize is performed;

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

In fact, I use this when the navigation is scaling. , causing the size of p to change, so executing reszie in this way can perfectly adapt

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement slot in vue to display the template passed by the parent component in the child component (detailed tutorial)

How to use vue to crop images while enlarging, reducing, and rotating functions (detailed tutorial)

Detailed explanation of React component performance optimization

The above is the detailed content of What are the ways to use echarts3.0 adaptive in vue?. For more information, please follow other related articles on the PHP Chinese website!