博客

• 
  如果要是页面上的图表都要自适应。则需要将resize事件叠加在不同的图上面，使用一下代码可以实现。
  
• 
  实现自适应的效果代码:window.onresize = option.chart.resize(), 这个代码基本是官网上的window.onresize = myCharts.resize();的翻版。
  

更新

通过window来获取高宽，最终导致pc实用但是各个手机终端乱了套，所以还是要判断设备分块设置，采用可视区域宽高解决了移动端不适配的问题

通过window来获取高宽，最终导致pc实用但是各个手机终端乱了套，所以还是要判断设备分块设置，采用可视区域宽高解决了移动端不适配的问题

通过window来获取高宽，最终导致pc实用但是各个手机终端乱了套，所以还是要判断设备分块设置，采用可视区域宽高解决了移动端不适配的问题

html

<div id="main"></div>

css

#main {
    position: relative;
}

javascript

<script src="../js/echarts.min.js"></script>
    <script src="../js/jquery1.7.js"></script>
    <script type="text/javascript">
        var width;
        var height;
        var myChart;
        function browserRedirect() {  
            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) {  
                height = document.body.clientHeight/4
                width = document.body.clientWidth
                // alert(height)
                $("#main").css("width",width-30);
                $("#main").css("height",height);
                setEcharts();
                $(window).resize(function() {
                    width = document.body.clientWidth
                    height = document.body.clientHeight/4
                    $("#main").css("width",width-30);
                    $("#main").css("height",height);
                });

            } else {  
                alert("pc"); 
                //自适应设置
                width = $(window).width();
                height = $(window).height();
                // alert(height)
                $("#main").css("width",width-35);
                $("#main").css("height",height-360);
                setEcharts();
                $(window).resize(function() {
                    width = $(window).width();
                    height = $(window).height();
                    $("#main").css("width",width-35);
                    $("#main").css("height",height-360);
                });
            }  
        }

        window.onload=function(){
            browserRedirect()
        }


        function setEcharts(){

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

            //自适应
            window.onresize = myChart.resize;

            // axisTick刻度线显示隐藏

            // splitLine 垂直线条显示隐藏

            // 指定图表的配置项和数据
            var option = {
                color: ['#fec1a5'],
                title: {
                    text: ''
                },
                grid: {
                    show: true,
                    x: 50,
                    y: 45,
                    x2: 10,
                    y2: 30,
                    borderWidth: 0
                },
                legend: {
                    data:['万元'],
                    orient: 'horizontal',
                    x: 'right',
                },
                xAxis: {
                    data: ["17/03","17/04","17/05","17/06","17/07","17/08"],
                    splitLine:{  
                        show:false
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#fd5200',
                        }
                    },      
                },
                yAxis: {
                    axisTick: {
                        show: false,
                    },
                    splitLine:{  
                        show:false  
                    },
                    axisLine: {show: false},
                    axisLabel: {
                        textStyle: {
                            color: '#999',
                        },
                    },       
                },
                series: [{
                    name: '万元',
                    type: 'bar',
                    data: [1875, 5934, 9534, 4000, 5890, 690],
                    barWidth : 20,//柱图宽度
                    itemStyle: {
                        normal: {
                            barBorderColor: '#fd5200', //边框色
                            barBorderWidth: 1, //边框宽度
                            barBorderBottom:'none',
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c}万元',
                                textStyle: {
                                    color: "#fd5005",
                                    fontSize: 12,
                                }
                            }
                        }
                    },
                }]
            };

             // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            // myChart.showLoading();  加载动画
        }

    </script>