vue中的echarts3.0自适应方法

日期：2023-09-29 19:08

前端做vue项目时，按需引入echart如下：

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

然后我发现当浏览器窗口放大时折线图不会适应，我花了一段时间才解决。记录下来给有需要的朋友，

第一种：浏览器自适应

作者：

在 myChart.setOption 之后添加

window.onresize = myChart.resize;

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

安装（）{
this.changEcharts();
},
方法：{
更改Echarts() {
window.addEventListener('调整大小', ()=> {
this.drawLineDom.resize();
this.todayFlowDom.resize();
this.hitRateDom.resize();});};},}
this.drawLineDom = this.$echarts.init(document.getElementById('chart-bandwidth'));

第二种情况是根据div大小的变化进行适配

因为vue无法实时监控div大小变化，所以我定义了一个按钮，当按钮的值发生变化时，就调整大小；

导入{mapState}from'vuex';
计算：mapState({isCollapse:'isCollapse',//这里我是vuex保存的一个实用变量，你不需要使用vuex，我这样做是因为组件之间的通信}),
手表： {isCollapse() { // 注意不要使用箭头函数，否则获取不到this
设置超时（（）=> {
this.drawLineDom.resize();
this.todayFlowDom.resize();
this.hitRateDom.resize();
}, 500);},},

其实我是在导航缩回的时候使用这个，导致div的大小发生变化，所以这样执行reszie就可以完美适配

最近发表

猜你喜欢

vue中的echarts3.0自适应方法

相关文章