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(() => {
          window.onresize = function () {
            if(self.$refs.lineChart) {
               self.chart = echarts.init(self.$refs.lineChart);
               self.chart.resize();
            }
          };
        }, 20);
    }
上一篇:vue中使用Echart将一组数据展示出三种统计图


下一篇:在echart组件下用canvans画三角形