vue实现echarts随窗体变化(自适应)

<div id="myChart" :style="{width: '100%', height: '345px'}"></div>
<script> export default {
mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
    var myChartContainer = document.getElementById('myChart');      //用于使chart自适应宽度,通过窗体宽计算容器高宽
    var resizeMyChartContainer = function(){
     myChartContainer.style.width=(document.body.clientWidth-75)+'px'
    }     //设置容器高宽
    resizeMyChartContainer()
    // 基于准备好的dom，初始化echarts实例
    var myChart = this.$echarts.init(myChartContainer)
 
    // 绘制图表
    myChart.setOption({
      title: { text: '启动次数' },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['2019-02-15', '2019-02-16', '2019-02-17', '2019-02-18', '2019-02-19', '2019-02-20', '2019-02-21']
      },
      yAxis: {
         type:'value'
      },
      series: [{
        type: 'line',
        data: [0,0, 0, 7, 0, 0,12],
        smooth:true,
        symbol: 'circle',
        symbolSize: 6,
        itemStyle:{
          normal:{ 
 
            color:'#fc8a0f',
            lineStyle:{
              color:'#ff9c35'
                }
              }
            }
      }],
    });
    window.onresize=function(){
     resizeMyChartContainer();
      myChart.resize();
    }
   }
  }}</script>

重点:

window.onresize = function () {
   map1.resize() ; // 如果有多个图标变动，可写多个
}