echarts对于移动端的处理

通过media实现的

$(function() {
            // 多列柱形图
            var mychar = echarts.init(document.getElementById('bar'));
            var option = {
                baseOption : {
                    title : {
                        text : '南丁格尔玫瑰图',
                        subtext : '纯属虚构',
                        x : 'center'
                    },
                    tooltip : {
                        trigger : 'item',
                        formatter : "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend : {
                        data : ['rose1', 'rose2', 'rose3', 'rose4', 'rose5',
                                'rose6', 'rose7', 'rose8']
                    },
                    toolbox : {
                        show : true,
                        feature : {
                            mark : {
                                show : true
                            },
                            dataView : {
                                show : true,
                                readOnly : false
                            },
                            magicType : {
                                show : true,
                                type : ['pie', 'funnel']
                            },
                            restore : {
                                show : true
                            },
                            saveAsImage : {
                                show : true
                            }
                        }
                    },
                    calculable : true,
                    series : [{
                                name : '半径模式',
                                type : 'pie',
                                roseType : 'radius',
                                label : {
                                    normal : {
                                        show : false
                                    },
                                    emphasis : {
                                        show : true
                                    }
                                },
                                lableLine : {
                                    normal : {
                                        show : false
                                    },
                                    emphasis : {
                                        show : true
                                    }
                                },
                                data : [{
                                            value : 10,
                                            name : 'rose1'
                                        }, {
                                            value : 5,
                                            name : 'rose2'
                                        }, {
                                            value : 15,
                                            name : 'rose3'
                                        }, {
                                            value : 25,
                                            name : 'rose4'
                                        }, {
                                            value : 20,
                                            name : 'rose5'
                                        }, {
                                            value : 35,
                                            name : 'rose6'
                                        }, {
                                            value : 30,
                                            name : 'rose7'
                                        }, {
                                            value : 40,
                                            name : 'rose8'
                                        }]
                            }, {
                                name : '面积模式',
                                type : 'pie',
                                roseType : 'area',
                                data : [{
                                            value : 10,
                                            name : 'rose1'
                                        }, {
                                            value : 5,
                                            name : 'rose2'
                                        }, {
                                            value : 15,
                                            name : 'rose3'
                                        }, {
                                            value : 25,
                                            name : 'rose4'
                                        }, {
                                            value : 20,
                                            name : 'rose5'
                                        }, {
                                            value : 35,
                                            name : 'rose6'
                                        }, {
                                            value : 30,
                                            name : 'rose7'
                                        }, {
                                            value : 40,
                                            name : 'rose8'
                                        }]
                            }]
                },
                media : [{
                            option : {
                                legend : {
                                    right : 'center',
                                    bottom : 0,
                                    orient : 'horizontal'
                                },
                                series : [{
                                            radius : [20, '50%'],
                                            center : ['25%', '50%']
                                        }, {
                                            radius : [30, '50%'],
                                            center : ['75%', '50%']
                                        }]
                            }
                        }, {
                            query : {
                                minAspectRatio : 1
                            },
                            option : {
                                legend : {
                                    right : 'center',
                                    bottom : 0,
                                    orient : 'horizontal'
                                },
                                series : [{
                                            radius : [20, '50%'],
                                            center : ['25%', '50%']
                                        }, {
                                            radius : [30, '50%'],
                                            center : ['75%', '50%']
                                        }]
                            }
                        }, {
                            query : {
                                maxAspectRatio : 1
                            },
                            option : {
                                legend : {
                                    right : 'center',
                                    bottom : 0,
                                    orient : 'horizontal'
                                },
                                series : [{
                                            radius : [20, '50%'],
                                            center : ['50%', '30%']
                                        }, {
                                            radius : [30, '50%'],
                                            center : ['50%', '70%']
                                        }]
                            }
                        }, {
                            query : {
                                maxWidth : 500
                            },
                            option : {
                                legend : {
                                    right : 10,
                                    top : '15%',
                                    orient : 'vertical'
                                },
                                series : [{
                                            radius : [20, '50%'],
                                            center : ['50%', '30%']
                                        }, {
                                            radius : [30, '50%'],
                                            center : ['50%', '75%']
                                        }]
                            }
                        }]
            };
            mychar.setOption(option);

        });