ECharts图表生成、大小自适应手机、pc端

echarts的图表，如果在bootstracp等框架div是自适应宽度的，如果设置成100%，页面会出现问题，且不能正常的生成图表。所以div容器的高度宽度必须指定为px，下面是高度只适应的2种方法，pc端固定宽度，手机端自适应。

 <div class="col-sm-12">
      <hr>
      <div id="main"></div>
 </div>

1、自适应手机pc宽度、高度

 <script type="text/javascript">

 var worldMapContainer = document.getElementById('main');
        var resizeWorldMapContainer = function () {
            worldMapContainer.style.width = window.innerWidth+'px';
            worldMapContainer.style.height = window.innerHeight+'px';
        };



//设置容器高宽
resizeWorldMapContainer();

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
  
  title: {
              text: '网站访问量数据分析'
            },

    tooltip : {

        trigger: 'axis'

    },

    legend: {

        data:['访问PV','访问IP']

    },

    toolbox: {

        show : true,

        feature : {

            mark : {show: true},

            dataView : {show: true, readOnly: false},

            magicType : {show: true, type: ['line', 'line']},

            restore : {show: true},

            saveAsImage : {show: true}

        }

    },

    calculable : true,

    xAxis : [

        {

            type : 'category',

            boundaryGap : false,

            //data : ['周一','周二','周三','周四','周五','周六','周日']
      data: {$data_time}
        }

    ],

    yAxis : [

        {

            type : 'value'

        }

    ],

    series : [

 

        {

            name:'访问IP',

            type:'line',

            stack: '总量',
      
      itemStyle : {  
                           normal : {  
                  color:'#007500',
                               lineStyle:{  
                                        color:'#007500'  
                    }  
                  }  
                         },

            //data:[220, 182, 191, 234, 290, 330, 310]
      data:{$count_ip}

        },
    {

            name:'访问PV',

            type:'line',

            stack: '总量',
      
      itemStyle : {  
               normal : {  
                  color:'#ff0000',
                 lineStyle:{  
                    color:'#ff0000'  
                    }  
                  }  
             },

            data: {$count}
      

        }


    ]

};



    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //用于使chart自适应高度和宽度
window.onresize = function () {
    //重置容器高宽
    resizeWorldMapContainer();
    myChart.resize();
};
</script>

2、固定pc宽度，自适应手机宽度、高度

<script type="text/javascript">

 var worldMapContainer = document.getElementById('main');

    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
         //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
        var resizeWorldMapContainer = function () {
            worldMapContainer.style.width = '100%';
            worldMapContainer.style.height = '470'+'px';
        };
    }else{
        var resizeWorldMapContainer = function () {
            worldMapContainer.style.width = window.innerWidth+'px';
            worldMapContainer.style.height = window.innerHeight+'px';
        };
    }


//设置容器高宽
resizeWorldMapContainer();

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
  
  title: {
              text: '网站访问量数据分析'
            },

    tooltip : {

        trigger: 'axis'

    },

    legend: {

        data:['访问PV','访问IP']

    },

    toolbox: {

        show : true,

        feature : {

            mark : {show: true},

            dataView : {show: true, readOnly: false},

            magicType : {show: true, type: ['line', 'line']},

            restore : {show: true},

            saveAsImage : {show: true}

        }

    },

    calculable : true,

    xAxis : [

        {

            type : 'category',

            boundaryGap : false,

            //data : ['周一','周二','周三','周四','周五','周六','周日']
      data: {$data_time}
        }

    ],

    yAxis : [

        {

            type : 'value'

        }

    ],

    series : [

 

        {

            name:'访问IP',

            type:'line',

            stack: '总量',
      
      itemStyle : {  
                           normal : {  
                  color:'#007500',
                               lineStyle:{  
                                        color:'#007500'  
                    }  
                  }  
                         },

            //data:[220, 182, 191, 234, 290, 330, 310]
      data:{$count_ip}

        },
    {

            name:'访问PV',

            type:'line',

            stack: '总量',
      
      itemStyle : {  
               normal : {  
                  color:'#ff0000',
                 lineStyle:{  
                    color:'#ff0000'  
                    }  
                  }  
             },

            data: {$count}
      

        }


    ]

};



    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //用于使chart自适应高度和宽度
window.onresize = function () {
    //重置容器高宽
    resizeWorldMapContainer();
    myChart.resize();
};
</script>