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