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>

 

转载于:https://www.cnblogs.com/colorful-paopao1/p/10443529.html