前端时候做一个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(() => {
window.onresize = function () {
if(self.$refs.lineChart) {
self.chart = echarts.init(self.$refs.lineChart);
self.chart.resize();
}
};
}, 20);
}