自适应样式,自适应计算

聚客2022-05-29  44

echarts自适应大小(vue 中echart折线自适应)

我之前写过一个vue项目,echart是按需引入的,如下:

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

然后发现折线图在缩放浏览器窗口时不自适应,花了很长时间才解决,记录下来给有需要的小伙伴。

解决方法是在mounted中调用以下方法:

init () { //折线图宽高自适应 const self = this; setTimeout(() =gt; { window.onresize = function () { if(self.$refs.lineChart) { self.chart = echarts.init(self.$refs.lineChart); self.chart.resize(); } }; }, 20); }

Ps:我之前在其他技术平台上贴过这个笔记,后来我开始慢慢把它搬到头条上。哈哈。

转载请注明原文地址:https://juke.outofmemory.cn/read/183725.html

最新回复(0)