echarts+vue,根据窗口变化重新渲染

HTML部分

<div id="myLine" class="e-line"></div>

 然后是js data

data() {
    return {
      myEchartLine:{},
    }
}

在生命周期mounted里面添加监听 ：

mounted() {
  let that = this 
  that.drawLine()
  window.addEventListener("resize", () => { 
    that.myEchartLine.resize();
  });
},

methods里面的绘图：

drawLine() {
    let _this = this
      // 基于准备好的dom，初始化echarts实例
      this.myEchartLine = echarts.init(document.getElementById('myLine'))
      this.myEchartLine .setOption({
        grid:{
            left:'8%',
            top: '4%',
            bottom:'8%',      
        },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#000'
            }
        }
      },
        textStyle: {
          fontSize:15,
          color:'#0ec8ff'
        },
        xAxis: {
          splitLine: {
              show: true,
              lineStyle:{
                color: ['#315070'],
                width: 1,
                type: 'solid'
            }
      　　},
          type: 'category',
          data: [1,2,3,4,5,6,7,8,9,10,11,12],
        },
        yAxis: {
          type: 'value',
          splitLine: {
              show: true,
              lineStyle:{
                color: ['#315070'],
                width: 1,
                type: 'solid'
            }
      　　}
        },
        series: [{
          data: [567,345,511,244,455,87,570,65,99,432,655,229],
          type: 'line',
          smooth: true,
          itemStyle: {
              color: '#81D1FA'
          },
        },
        {
          data: [323,200,111,104,455,222,547,568,99,810,141,799],
          type: 'line',
          smooth: true,
          itemStyle: {
              color: '#C211EE'
          },
        },
        {
          data: [78,238,70,467,455,326,98,508,99,45,456,429],
          type: 'line',
          smooth: true,
          itemStyle: {
              color: '#0000FF'
          },
        },
        {
          data: [224,111,821,38,344,90,555,79,99,810,141,329],
          type: 'line',
          smooth: true,
          itemStyle: {
              color: '#F7F709'
          },
        },
        {
          data: [414,403,311,234,455,65,547,568,229,810,141,109],
          type: 'line',
          smooth: true,
          itemStyle: {
              color: '#F73809'
          },
        },
        ]
    }); 
    },