关于echarts在bootstrap框架下的自适应调整大小

关键代码：

           //渲染图
            var myChart = echarts.init(document.getElementById(myChartID)); 
            myChart.setOption(option);        
            window.addEventListener("resize",function(){myChart.resize();});            

完整代码如下，

function echarts_pie(myChartID,id){

    var QueryParams ={};  
    QueryParams['id'] = id;        
    dataurl = 'data_chart.php';

    $.ajax({
        type:'GET',
        url:dataurl,
        data:QueryParams,
        dataType:"json", 
        success: function(data){
            //定义饼图配置项
            var option = {
                toolbox: {//工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
                    feature: {//各工具配置项。
                        dataView: {//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                            show: true,//是否显示组件。
                            readOnly: false
                        },
                        restore: {//配置项还原。
                            show: true
                        },
                        saveAsImage: {//保存为图片。
                            show: true
                        }
                    }
                },                            
                title: {
                    top: "4%",
                    text: data.title,
                    x: 'center',
                    show: true ,
                    padding: 15 ,
                    textStyle: {
                        //color: '#fff' ,
                        fontStyle: 'normal' ,
                        fontWeight: 'bolder' ,
                        fontFamily: 'sans-serif' ,
                        fontSize: 18 ,
                        textBorderType: 'solid' ,
                    },                    
                },
                graphic: {
                    type: "text",
                    left: "center",
                    top: "45%",
                    style: {
                        text:"需求合计\n" + String(Number(data.sum).toFixed(2)) +"\n（万元）", //圆饼中心显示数据，这里是显示得总数
                        textAlign: "center",
                        fill: "#333",
                        width: 30,
                        height: 30,
                        fontSize: 12,
                    },    
                },
                tooltip: {
                    trigger: 'item',
                    //formatter: "{a} <br/>{b} : {c} ({d}%)"
                    formatter: function (data) {
                        viewstr =  data.name  + "\n"  +String(Number(data.value).toFixed(2)) +'（万元）';
                        return viewstr;
                    },
                },            
                //边框四至缩放
                grid: {
                    top: "20%",
                    left: '2%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true,  //grid 区域是否包含坐标轴的刻度标签。
                },                
                legend: {
                    orient: 'horizontal',//'vertical',
                    left: 'center',
                    bottom:0,
                    data: data.name
                },
                series: [{
                    name: '三滚计划',
                    type: 'pie',
                    radius: ['30%','50%'],
                    center: ['50%', '50%'],
                    data: data.rows,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },                                                
                        normal: {
                            color: function (params) {
                                // 根据系列索引返回颜色
                                var colorList = [                        
                                    '#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
                                    '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
                                    '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
                                    '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0',
                                    '#3398DB','#59C4E6','#55ff00','#ffff7f','#ffaa00','#DB3333',];
                                return colorList[params.dataIndex]; // 循环使用颜色数组
                            },
                        }
                    },                        
                    label: {
                        normal: {
                            //borderRadius: 5, // 设置圆角大小
                            //borderWidth: 1, // 设置边框宽度
                            //borderColor: '#f9c956', // 设置边框颜色
                            //backgroundColor: '#eee', // 设置标签背景颜色
                            //padding: 6,
                            formatter:function(data){
                                 
                                viewstr = String(Number(data.value).toFixed(2)) +'\n（万元）';
                                 
                                return viewstr
                            },
                            //position : 'inner',
                            rich: {
                                b: {
                                    fontSize: 10,
                                    align: 'center',
                                    padding: 6,
                                    textStyle: {
                                        color: '#fff',
                                        fontWeight: 'normal',
                                        fontSize: 10,
                                    }
                                },
                                hr: {
                                    borderColor: '#5470c6', //'#12EABE',
                                    //color: '#fff',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0,
                                },
                                d: {
                                    fontSize: 10,
                                    color: '#fff',
                                    align: 'left',
                                    padding: 4
                                },
                                c: {
                                    fontSize: 10,
                                    color: '#fff',
                                    align: 'center',
                                    padding:6
                                }
                            }
                        }
                    },                            
                },]
            };
             
            //渲染图
            var myChart = echarts.init(document.getElementById(myChartID)); 
            myChart.setOption(option);        
            window.addEventListener("resize",function(){myChart.resize();});            
            return myChart
        },
        error: function() {
               console.log('ajax请求失败！');
        }    
    });                    
}