在vue中使用echarts3.0自适应的方法有哪些？ 

 1 // 引入 ECharts 主模块
 2 import echarts from 'echarts/lib/echarts'
 3 // 引入折线图
 4 import 'echarts/lib/chart/line' 
 5 // 引入提示框和图例组件
 6 import 'echarts/lib/component/tooltip'
 7 import 'echarts/lib/component/legendScroll'

 

 

第一种：浏览器自适应

通过：

在myChart.setOption后添加 

1 window.onresize = myChart.resize;

如果有多个图形，可以封装成方法： 

 1 mounted(){ 
 2 this.changEcharts(); 
 3 }, 
 4 methods:{ 
 5 changEcharts() { 
 6 window.addEventListener('resize', ()=> { 
 7 this.drawLineDom.resize(); 
 8 this.todayFlowDom.resize(); 
 9 this.hitRateDom.resize();});};},} 
10 this.drawLineDom = this.$echarts.init(document.getElementById('chart-bandwidth'));

第二种情况，根据p大小的变化进行自适应

因为vue不能实时监测p大小变化的，所以我定义了一个按键，当按键的值变化的时候，进行resize；

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

大小发生了变化，所以这样执行reszie，就能完美的自适应

 

posted @ 2022-08-23 10:38  Deer-Mr  阅读(376)  评论(0)    收藏  举报