自适应样式,自适应计算

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:我之前在其他技术平台上贴过这个笔记，后来我开始慢慢把它搬到头条上。哈哈。