Bootstrap引入echarts图表如何自动适应col-*容器

Question

       <div class="container">
            <div class="row">
                <div class="col-xs-6">
                    <div class="panel panel-default">
                        <!-- Default panel contents -->
                        <div class="panel-heading">网站统计</div>
                        <div class="panel-body">
                            
                        </div>

                    </div>
                    
                </div>
                <div class="col-xs-6">                 
                        <canvas id="canvas"></canvas>                                 
                </div>
            </div>
        </div>

var myChart = echarts.init(document.getElementById('canvas'));

option = {
    
    title: {
        text: '今天访问数量'
    },
    tooltip: {},
    legend: {
        data:['访问量'],      
    },
    xAxis: {
        data: ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
    },
    yAxis: {},
    series: [{
        name: '访问量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20,80]
    }]
    
};
myChart.setOption(option);
window.onresize = function() {
            //重置容器高宽
            resizemyChartContainer();
            myChart.resize();
};

我之前搜了一些方法，说要监听容器,每当容器改变就需要重置图表高度,
而且boostrap的容器不是有内容才可以撑起宽高吗?如果直接一个canvas标签，又没有指定高度，它如何才能自适应?
图下,我无论怎么缩放它都是固定的大小了,

Answer 1

我建议你把容易canvas改成div，这样才能够使用echarts提供的方法，进行响应式。
<div id="canvas" style="width: 100%;height:200px;"></div>
高度可以根据需求进行设置，我这里是设置为200px;

Answer 2

window.onresize = function() {  
char.resize();  
};