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>