在vue中使用echarts3.0自适应的方法有哪些？-tutorial js-php.cn

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

亚连

Lepaskan： 2018-06-04 13:56:27

asal

2289 orang telah melayarinya

这篇文章主要介绍了vue中echarts3.0自适应，现在分享给大家，也给大家做个参考。

前端时间做一个vue的项目，echart是按需引入的如下：

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

Salin selepas log masuk

然后发现在缩放浏览器窗口时折线图并不会自适应，费了好一会才解决，记录下来给需要的小伙伴，

第一种：浏览器自适应

通过：

在myChart.setOption后添加

window.onresize = myChart.resize;

Salin selepas log masuk

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

mounted(){ 
this.changEcharts(); 
}, 
methods:{ 
changEcharts() { 
window.addEventListener(&#39;resize&#39;, ()=> { 
this.drawLineDom.resize(); 
this.todayFlowDom.resize(); 
this.hitRateDom.resize();});};},} 
this.drawLineDom = this.$echarts.init(document.getElementById(&#39;chart-bandwidth&#39;));

Salin selepas log masuk

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

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

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

Salin selepas log masuk

其实我用这个是在导航进行伸缩的时候，导致p大小发生了变化，所以这样执行reszie，就能完美的自适应

上面是我整理给大家的，希望今后会对大家有帮助。

在vue中slot如何实现在子组件中显示父组件传递的模板（详细教程）

利用vue如何实现裁切图片同时实现放大、缩小、旋转功能（详细教程）

有关React组件性能优化详细讲解

Atas ialah kandungan terperinci 在vue中使用echarts3.0自适应的方法有哪些？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!