【VUE中模板笔记】vue中flexible+padding撑开容器高让子元素固定比例+echarts模板

1、vue中flexible

2、padding撑开容器高让子元素固定比例，实现高度自适应。图片的高度可以根据width自适应，padding也可以，所以做一个盒子用padding撑开高度，里面的元素width和height都是100%即可

3、echarts模板 

<template>
    <div id="stage">
        <div id="wrap">
            <div id="myChart" ref="MyEcharts"></div>
        </div>
    </div>
</template>


<script>
    import echarts from 'echarts';

    export default {

        data: function () {
            return {}
        },
       mounted(){
         this.init()
       },
        methods:{
            init(){
                var myChart = echarts.init(document.getElementById('myChart'));
                var options = {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },

                    dataset: {
                        // 提供一份数据。
                        source:[
                            {product: 'Matcha Latte', PV: 823, UV: 95.8},
                            {product: 'Milk Tea', PV: 235, UV: 81.4},
                            {product: 'Cheese Cocoa', PV: 1042, UV: 91.2},
                            {product: 'Walnut Brownie', PV: 988, UV: 76.9}
                        ]
                    },
                    xAxis: [
                        {
                            type: 'category',
                            // data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'PV',
                            type: 'bar',
                            // barWidth: '60%',
                            // data:[10, 52, 200, 334, 390, 330, 220]
                        },
                        {
                            type:'bar',
                            name: 'UV',
                            // barWidth: '60%',
                        }
                    ]
                };
                myChart.setOption(options);
                window.onresize = function(){
                    myChart.resize()
                }
            }
        }
    }
</script>

<style>
    #stage {
        width: 100%;
        height: 100%;
        max-width: 768px; /*no*/
        margin: 0 auto;
    }

    #wrap {
        height: 0;
        padding-bottom: 56.25%; /* 16:9 相对于宽padding*/
        position: relative;
        width: 100%;
        border: 1px solid #3cff0b;
    }

    #wrap #myChart {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border: 1px solid #1411ff;
    }
</style>